انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: شريط التنقل Navbar في بوتستراب 5

Collapsible Mobile Navbar زر الهاتف والطي المتجاوب

ابنِ أشرطة التنقل المتجاوبة في بوتستراب 5.3 مع تنسيق الشعار وحقول البحث والوضع الداكن بسمة data-bs-theme="dark" وقوائم الهاتف المطوية ودرج Offcanvas.
3 صفوف تعليمية
بوتستراب 5
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحت نقطة التوقف المحددة، يخفي الإطار حاوية .collapse.navbar-collapse ويُظهر زر القائمة الثلاثية .navbar-toggler تلقائياً. ويتم ربطهما معاً تصريحياً دون كتابة سطر جافاسكريبت واحد:

  • إسناد data-bs-toggle="collapse" وdata-bs-target="#mainNav" إلى الزر <button class="navbar-toggler" type="button">.
  • إضافة ثلاثية الإتاحة aria-controls="mainNav" وaria-expanded="false" وaria-label="Toggle navigation" لأن أيقونة الخطوط الثلاثية خالية من النص المقروء.
الصف 2 كود برمجي
HTML 
<button class="navbar-toggler" type="button"
  data-bs-toggle="collapse" data-bs-target="#mainNav"
  aria-controls="mainNav" aria-expanded="false"
  aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
  <ul class="navbar-nav me-auto">...</ul>
</div>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (شريط التنقل Navbar في بوتستراب 5)