معمارية شريط التنقل المتجاوب | شريط التنقل Navbar في بوتستراب 5

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

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

يضطلع الشريط العلوي الرئيسي في تطبيقات الويب الحديثة بمهمة مزدوجة: جمع شعار الموقع والروابط والقوائم المنسدلة وحقل البحث في سطر متناسق على الشاشات العريضة، وطيّها بأناقة على شاشات الهواتف. يتكفل مكوّن .navbar في بوتستراب 5 بهذه الهندسة المتجاوبة اعتماداً على الصندوق المرن.

يتألف كل شريط متجاوب من ثلاث طبقات متداخلة: وسم دلالي خارجي <nav class="navbar navbar-expand-lg bg-body-tertiary">، يليه غلاف داخلي .container أو .container-fluid لضبط الهوامش الجانبية، ثم عناصر الهوية والروابط بالداخل؛ حيث يحدد .navbar-expand-lg نقطة التوقف 992px لفرد القائمة أفقياً.

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

HTML

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="#">CloseTag</a>
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">Courses</a>
      </li>
    </ul>
  </div>
</nav>

جرّب بنفسك

Responsive Navbar Markup معمارية شريط التنقل المتجاوب

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

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