الروابط والقوائم وحقل البحث | شريط التنقل Navbar في بوتستراب 5

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

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

تُبنى قائمة الروابط داخل الشريط عبر الكلاس .navbar-nav، وهو نسخة مخصصة تتراص عمودياً على الهاتف ثم تنفرد أفقياً تلقائياً عند بلوغ نقطة التوقف المحددة في .navbar-expand-*، كما تقبل تضمين القوائم المنسدلة عبر <li class="nav-item dropdown">.

ولتوزيع العناصر على طرفي الشريط، اعتمد الهوامش المنطقية الحديثة في بوتستراب 5: يدفع .me-auto العناصر التالية نحو نهاية السطر المنطقية بديلاً عن الكلاسات القديمة المُلغاة، بينما يجمع form.d-flex حقل البحث وزر الإرسال في صف متناسق، وينسق .navbar-text العبارات النصية القصيرة.

الصف 2 كود برمجي

HTML

<form class="d-flex" role="search">
  <input class="form-control me-2" type="search"
    placeholder="Search docs" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">
    Search
  </button>
</form>

جرّب بنفسك

Navbar Links and Forms الروابط والقوائم وحقل البحث

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

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