English 中文 العربية 日本語 Português

Bootstrap: شريط التنقل، القوائم المنسدلة، ولوحة Offcanvas

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات الأساسية

(2) 🎯 ما الذي ستتعلّمه

(3) المشكلة

يحتاج موقع شركة Bob إلى عرض تنقل أفقي كامل على سطح المكتب والطيّ إلى قائمة همبرغر على الجوال. إنشاء شريط تنقل متجاوب باستخدام HTML/CSS/JS فقط يتطلب الكثير من التعليمات البرمجية للتعامل مع التخطيط والأحداث ونقاط التوقف.

(4) الحل

باستخدام navbar-expand-* في Bootstrap بالإضافة إلى زر الهمبرغر، يمكن تحقيق ذلك في حوالي 10 أسطر من التعليمات البرمجية. يدمج مكوّن شريط التنقل في Bootstrap الطيّ المتجاوب والقوائم المنسدلة واللوحات الجانبية، مما يسمح لقاعدة شيفرة واحدة بالتكيّف مع الجوال وسطح المكتب.

لفهم الفكرة: شريط التنقل = حاوية + العلامة التجارية + لوحة قابلة للطيّ + مكوّنات تفاعلية (قائمة منسدلة/بحث/زر). يتحكم navbar-expand-* في متى يتم التوسيع إلى تنقل أفقي؛ أسفل نقطة التوقف، يُطوى تلقائيًا.

(5) الفوائد

باستخدام شريط تنقل Bootstrap، أكمل Bob التنقل المتجاوب بالكامل باستخدام بضعة أسطر فقط من التعليمات البرمجية — يتوسع أفقيًا على سطح المكتب ويُطوى إلى قائمة همبرغر على الجوال، مع دعم القوائم المنسدلة المدمجة.

2. البنية الأساسية لشريط التنقل

HTML 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(1) المكوّنات الرئيسية

المكوّن الفئة الغرض
حاوية شريط التنقل navbar تُعرّف شريط التنقل وتوفر تخطيط Flex
نقطة توقف التوسيع navbar-expand-lg يتوسع أفقيًا عند lg وأعلى، ويُطوى أسفله
العلامة التجارية navbar-brand الشعار / اسم الموقع
زر الهمبرغر navbar-toggler يظهر على الجوال، يُشغّل الطيّ عند النقر
اللوحة القابلة للطيّ collapse navbar-collapse لوحة القائمة التي يتحكم بها زر الهمبرغر
قائمة التنقل navbar-nav قائمة روابط التنقل (Flex)
عنصر الرابط nav-item / nav-link رابط تنقل واحد

▶ مثال: شريط تنقل بألوان سمات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice's Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDark">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navDark">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-primary navbar-dark mt-2">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLight">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLight">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Resize the browser to see the navbar collapse on smaller screens.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة. أنظمة ألوان السمات: | الخلفية | النص | التأثير | |:-----------|:-----|:-------| | bg-dark navbar-dark | نص فاتح | شريط تنقل داكن | | bg-light navbar-light | نص داكن | شريط تنقل فاتح | | bg-primary navbar-dark | نص فاتح | شريط تنقل ملوّن بالعلامة التجارية |

3. محتوى شريط التنقل المُحسّن

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/30x30" alt="Logo" class="d-inline-block align-text-top me-2">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navExt">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navExt">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      </ul>
      <form class="d-flex mx-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
      <a href="#" class="btn btn-success">Sign Up</a>
    </div>
  </div>
</nav>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

4. القوائم المنسدلة

HTML 
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</li>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

العنصر الفئة الوصف
المُشغّل dropdown-toggle زر قائمة منسدلة مع مؤشر سهم
حاوية القائمة dropdown-menu لوحة القائمة المنسدلة
عنصر القائمة dropdown-item خيار واحد
فاصل dropdown-divider يفصل بين مجموعات القائمة
عنصر معطّل dropdown-item disabled رمادي وغير قابل للنقر

(1) تنويعات القائمة المنسدلة

HTML 
<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">Help</h6></li>
  <li><a class="dropdown-item" href="#">FAQ</a></li>
</ul>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

5. مكوّن Offcanvas

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas Nav</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title text-white">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">More</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Contact</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(1) Offcanvas مقابل التنقل القابل للطيّ

بُعد المقارنة collapse navbar-collapse offcanvas
اتجاه الحركة توسع/طيّ عمودي ينزلق من الجانب
الخلفية المعتمة لا نعم (خلفية شبه شفافة)
حالة الاستخدام روابط بسيطة (3-5 عناصر) قوائم متعددة المستويات + بحث + لوحات مستخدم

(2) اتجاهات Offcanvas

الفئة الاتجاه السيناريو
offcanvas-start ينزلق من اليسار تنقل الشريط الجانبي
offcanvas-end ينزلق من اليمين سلة التسوق، الإشعارات (افتراضي)
offcanvas-top ينزلق من الأعلى لوحة البحث
offcanvas-bottom ينزلق من الأسفل تصفية الجوال

6. مخطط مكوّن شريط التنقل ومرجعه

(1) هرمية مكوّن شريط التنقل

100% 
graph TD
    subgraph navbar
        A[.navbar] --> B[.container]
        B --> C[.navbar-brand Brand Identifier]
        B --> D[.navbar-toggler Hamburger Button]
        B --> E[.collapse .navbar-collapse Collapsible Panel]
        E --> F[.navbar-nav Navigation List]
        F --> G[.nav-item Link Item]
        G --> H[.nav-link Link]
        G --> I[.dropdown Dropdown Menu]
        I --> J[.dropdown-menu]
        J --> K[.dropdown-item]
        E --> L[Search Form / Buttons etc.]
    end
    subgraph Coloring
        A --> M[bg-* Background Color]
        A --> N[navbar-dark / navbar-light Text Color]
    end
    subgraph Positioning
        A --> O[fixed-top / fixed-bottom / sticky-top]
    end

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(2) مرجع سلوك نقاط توقف شريط التنقل

قيمة navbar-expand سلوك الطيّ شاشة التوسع الأفقي السيناريو النموذجي
غير محدد يُطوى دائمًا لا شيء تنقل للجوال فقط
navbar-expand-sm يُطوى <576px >=576px الهواتف الكبيرة+
navbar-expand-md يُطوى <768px >=768px الأجهزة اللوحية+
navbar-expand-lg يُطوى <992px >=992px سطح المكتب+ (الأكثر شيوعًا)
navbar-expand-xl يُطوى <1200px >=1200px سطح المكتب الكبير
navbar-expand-xxl يُطوى <1400px >=1400px الشاشات الكبيرة جدًا

▶ مثال: شريط تنقل علوي مثبّت

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Top Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 56px; }
    .scroll-content { height: 1500px; background: linear-gradient(#f8f9fa, #e9ecef); }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Top Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navFixed">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navFixed">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container scroll-content d-flex justify-content-center align-items-center">
    <p class="text-muted">fixed-top fixes the navbar to the top of the viewport; it remains visible when scrolling.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: شريط تنقل مع بحث وأزرار

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar with Search</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">MyApp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navSearch">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navSearch">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Explore</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Favorites</a></li>
        </ul>
        <form class="d-flex me-2" role="search">
          <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search">
          <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>
        <a href="#" class="btn btn-primary">Log In</a>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>The navbar includes a search box and a login button; all are collapsed into the hamburger menu when collapsed.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: قائمة Mega منسدلة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mega Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .mega-menu { min-width: 400px; padding: 1rem; }
    @media (max-width: 991.98px) { .mega-menu { min-width: auto; } }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Mega Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMega">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMega">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Product Categories</a>
            <div class="dropdown-menu mega-menu p-4">
              <div class="row g-3">
                <div class="col-6">
                  <h6 class="dropdown-header">Electronics</h6>
                  <a class="dropdown-item" href="#">Phones</a>
                  <a class="dropdown-item" href="#">Computers</a>
                  <a class="dropdown-item" href="#">Headphones</a>
                  <a class="dropdown-item" href="#">Accessories</a>
                </div>
                <div class="col-6">
                  <h6 class="dropdown-header">Home & Living</h6>
                  <a class="dropdown-item" href="#">Furniture</a>
                  <a class="dropdown-item" href="#">Kitchenware</a>
                  <a class="dropdown-item" href="#">Textiles</a>
                  <a class="dropdown-item" href="#">Storage</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">New Arrivals</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Promotions</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Mega Menu uses `dropdown-menu` + an internal Grid to create a multi-column layout, suitable for navigation with many categories.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: شريط تنقل شفاف فوق Hero

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transparent Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navTrans">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navTrans">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Works</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="d-flex justify-content-center align-items-center text-white" style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="text-center">
      <h1 class="display-3 fw-bold">Creative Design Studio</h1>
      <p class="lead">We tell brand stories through design</p>
      <a href="#" class="btn btn-light btn-lg mt-3">Learn More</a>
    </div>
  </div>

  <div class="container py-5">
    <p>The transparent navbar overlays the Hero background, overlapping with content when scrolling. `backdrop-filter: blur(4px)` enhances readability.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

❓ أسئلة شائعة

س navbar-expand-lg يُطوى أسفل lg، لكنني أريد أن يُطوى قبل ذلك أسفل md. ماذا أفعل؟
ج ببساطة غيّر نقطة التوقف إلى أصغر: navbar-expand-md يعني أنه يتوسع أفقيًا عند md وأعلى، ويُطوى أسفل md. القيم المتاحة: sm / md / lg / xl / xxl. إذا حذفت navbar-expand-*، فسيبقى مطويًا دائمًا.
س لماذا لا يمكنني النقر على القائمة المنسدلة في شريط التنقل على الجوال؟
ج تأكد من أن مُشغّل القائمة المنسدلة هو وسم <a> أو <button> يحتوي على data-bs-toggle="dropdown"، وأن حزمة Bootstrap JS مُضمّنة في أسفل الصفحة.
س ما الفرق بين Offcanvas وModal؟
ج Offcanvas هو لوحة تنزلق من الجانب ولا تحجب منطقة المحتوى الرئيسية (لا تزال مرئية على سطح المكتب)، ومناسبة للتنقل/التصفية. Modal هو نافذة منبثقة في المنتصف تحجب الخلفية تمامًا، ومناسب لحواريات التأكيد/تعبئة النماذج.
س هل يمكن تثبيت شريط التنقل في الأعلى؟
ج نعم. أضف فئة fixed-top لتثبيته في أعلى إطار العرض؛ ستحتاج بعدها إلى إضافة padding-top إلى body لتعويض الارتفاع. هناك أيضًا خيار sticky-top: يتم التمرير بشكل طبيعي ولا يُثبّت إلا عندما يخرج من إطار العرض.
س ما الذي يجب أن أنتبه إليه بشأن إمكانية الوصول (A11y) لشريط التنقل؟
ج النقاط الرئيسية: (1) استخدم وسم <nav> مع aria-label يصف غرض التنقل؛ (2) استخدم aria-controls على زر الهمبرغر يشير إلى معرّف اللوحة القابلة للطيّ؛ (3) أضف aria-current="page" لرابط الصفحة الحالية؛ (4) استخدم حالة aria-expanded على مُشغّل القائمة المنسدلة. مكوّنات JS في Bootstrap تتعامل تلقائيًا مع معظم سمات ARIA.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ شريط تنقل كامل لموقع شركة: خلفية داكنة، شعار العلامة التجارية على اليسار، روابط القائمة على اليمين (Home / About / Services / Contact)، مع Services تحتوي على قائمة فرعية منسدلة.
  2. ⭐⭐ غيّر طريقة طيّ شريط التنقل إلى Offcanvas (ينزلق من الجانب). أضف صندوق بحث وزر تسجيل دخول مستخدم داخل لوحة Offcanvas.
  3. ⭐⭐⭐ أنشئ شريط أدوات سفلي: استخدم fixed-bottom للتثبيت السفلي، يحتوي على 4 روابط بأيقونات، لمحاكاة التنقل السفلي لتطبيقات الجوال.

الدرس السابق: Grid · الدرس التالي: Buttons & Button Groups

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%