نافبار

وثائق وأمثلة لرأس التنقل القوي والسريع الاستجابة لـ Bootstrap ، شريط التنقل. يتضمن دعمًا للعلامة التجارية والتنقل والمزيد ، بما في ذلك دعم المكوِّن الإضافي للانهيار.

كيف تعمل

إليك ما تحتاج إلى معرفته قبل البدء في استخدام شريط التنقل:

تتطلب أشرطة Navbars التفافًا .navbarباستخدام فئات أنظمة الألوان.navbar-expand{-sm|-md|-lg|-xl} والطي سريع الاستجابة .
تعتبر Navbars ومحتوياتها سائلة بشكل افتراضي. استخدم الحاويات الاختيارية للحد من عرضها الأفقي.
استخدم فئات أدوات التباعد والمرنة الخاصة بنا للتحكم في التباعد والمحاذاة داخل أشرطة التنقل.
تستجيب Navbars بشكل افتراضي ، ولكن يمكنك تعديلها بسهولة لتغيير ذلك. يعتمد السلوك المتجاوب على المكون الإضافي Collapse JavaScript.
يتم إخفاء أشرطة التنقل افتراضيًا عند الطباعة. قم بإجبارهم على طباعتهم عن طريق الإضافة .d-printإلى ملف .navbar. انظر فئة العرض المساعدة.
تأكد من إمكانية الوصول باستخدام <nav>عنصر أو ، في حالة استخدام عنصر أكثر عمومية مثل a <div>، أضف a role="navigation"إلى كل شريط تنقل لتحديده بوضوح كمنطقة مميزة لمستخدمي التقنيات المساعدة.

تابع القراءة للحصول على مثال وقائمة بالمكونات الفرعية المدعومة.

المحتوى المدعوم

تأتي Navbars مزودة بدعم مدمج لعدد قليل من المكونات الفرعية. اختر مما يلي حسب الحاجة:

.navbar-brandعن اسم شركتك أو منتجك أو مشروعك.
.navbar-navللتنقل كامل الطول وخفيف الوزن (بما في ذلك دعم القوائم المنسدلة).
.navbar-togglerللاستخدام مع المكوِّن الإضافي الانهيار وسلوكيات تبديل التنقل الأخرى.
.form-inlineلأي شكل من الضوابط والإجراءات.
.navbar-textلإضافة سلاسل نصية تتمركز رأسياً.
.collapse.navbar-collapseلتجميع وإخفاء محتويات شريط التنقل بواسطة نقطة توقف أصل.

فيما يلي مثال على جميع المكونات الفرعية المضمنة في شريط التنقل سريع الاستجابة ذي السمة الضوئية والذي ينهار تلقائيًا عند lgنقطة الإيقاف (الكبيرة).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

يستخدم هذا المثال فئات الأدوات المساعدة color ( bg-light) والتباعد ( my-2، my-lg-0، mr-sm-0، ).my-sm-0

ماركة

يمكن .navbar-brandتطبيقه على معظم العناصر ، ولكن يعمل المرساة بشكل أفضل لأن بعض العناصر قد تتطلب فئات أدوات مساعدة أو أنماطًا مخصصة.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

.navbar-brandمن المرجح أن تتطلب إضافة الصور إلى أنماط مخصصة أو أدوات مساعدة للحجم المناسب. فيما يلي بعض الأمثلة للتوضيح.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

التنقل

تعتمد روابط التنقل في Navbar على خياراتنا .navمع فئة المُعدِّل الخاصة بها وتتطلب استخدام فئات التبديل للحصول على تصميم سريع الاستجابة مناسب. سينمو التنقل في أشرطة التنقل أيضًا ليشغل أكبر مساحة أفقية قدر الإمكان للحفاظ على محاذاة محتويات شريط التنقل الخاصة بك بشكل آمن.

يمكن تطبيق الحالات النشطة - مع .active- للإشارة إلى الصفحة الحالية مباشرة على .nav-linkالأبوين أو الأبوين المباشرين .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

ونظرًا لأننا نستخدم فئات للتنقل لدينا ، يمكنك تجنب النهج القائم على القائمة تمامًا إذا كنت ترغب في ذلك.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

يمكنك أيضًا استخدام القوائم المنسدلة في التنقل في شريط التنقل. تتطلب القوائم المنسدلة عنصر التفاف لتحديد الموضع ، لذا تأكد من استخدام عناصر منفصلة ومتداخلة لـ .nav-itemوكما .nav-linkهو موضح أدناه.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

نماذج

ضع عناصر تحكم ومكونات متنوعة داخل شريط التنقل باستخدام .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

يتم استخدام العناصر الفرعية الفورية في .navbarتنسيق مرن وسيتم تعيينها افتراضيًا إلى justify-content: between. استخدم أدوات مساعدة مرنة إضافية حسب الحاجة لضبط هذا السلوك.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

تعمل مجموعات الإدخال أيضًا:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

يتم دعم العديد من الأزرار كجزء من نماذج شريط التنقل هذه أيضًا. يعد هذا أيضًا تذكيرًا رائعًا بأنه يمكن استخدام أدوات المحاذاة الرأسية لمحاذاة العناصر ذات الأحجام المختلفة.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

نص

قد تحتوي Navbars على أجزاء من النص بمساعدة ملفات .navbar-text. تقوم هذه الفئة بضبط المحاذاة الرأسية والتباعد الأفقي لسلاسل النص.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

امزج وتطابق مع المكونات والمرافق الأخرى حسب الحاجة.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

الألوان

لم يكن تصميم شريط التنقل أسهل من أي وقت مضى بفضل الجمع بين فئات التخصيص background-colorوالمرافق. اختر من .navbar-lightبينها للاستخدام مع ألوان الخلفية الفاتحة أو .navbar-darkألوان الخلفية الداكنة. بعد ذلك ، قم بالتخصيص باستخدام .bg-*الأدوات المساعدة.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

حاويات

على الرغم من أنه ليس مطلوبًا ، يمكنك التفاف شريط التنقل في a لتوسيطه .containerعلى صفحة أو إضافة واحد داخل لتوسيط محتويات شريط التنقل العلوي الثابت أو الثابت فقط .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

عندما تكون الحاوية داخل شريط التنقل الخاص بك ، تتم إزالة المساحة المتروكة الأفقية الخاصة بها عند نقاط التوقف الأقل من .navbar-expand{-sm|-md|-lg|-xl}الفئة المحددة. يضمن هذا عدم مضاعفة المساحة المتروكة دون داعٍ في إطارات العرض السفلية عند تصغير شريط التنقل.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

تحديد مستوى

استخدم أدوات الموضع الخاصة بنا لوضع أشرطة التنقل في مواضع غير ثابتة. اختر من الثابت إلى الأعلى ، أو الثابت في الأسفل ، أو التمسك بالأعلى (يتدرج مع الصفحة حتى تصل إلى الأعلى ، ثم يبقى هناك). تم إصلاح استخدام أشرطة التنقل position: fixed، مما يعني أنها تم سحبها من التدفق الطبيعي لـ DOM وقد تتطلب CSS مخصصًا (على سبيل المثال ، padding-topفي <body>) لمنع التداخل مع العناصر الأخرى.

لاحظ أيضًا أن .sticky-topالاستخدامات position: stickyغير مدعومة بالكامل في كل متصفح .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

السلوكيات المستجيبة

يمكن استخدام Navbars .navbar-toggler، .navbar-collapseوالفئات .navbar-expand{-sm|-md|-lg|-xl}لتغييرها عندما ينهار محتواها خلف زر. بالاشتراك مع الأدوات المساعدة الأخرى ، يمكنك بسهولة اختيار وقت إظهار أو إخفاء عناصر معينة.

بالنسبة إلى أشرطة التنقل التي لا تنهار أبدًا ، أضف .navbar-expandالفئة على شريط التنقل. لأشرطة التنقل التي تنهار دائمًا ، لا تضف أي .navbar-expandفئة.

تبديل

يتم محاذاة أدوات Navbar إلى اليسار افتراضيًا ، ولكن إذا اتبعت عنصرًا شقيقًا مثل a .navbar-brand، فسيتم محاذاة تلقائيًا إلى أقصى اليمين. سيؤدي عكس الترميز إلى عكس موضع مفتاح التبديل. فيما يلي أمثلة لأنماط تبديل مختلفة.

مع عدم .navbar-brandظهوره في أدنى نقطة توقف:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

مع اسم علامة تجارية يظهر على اليسار والمفتاح على اليمين:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

مع تبديل على اليسار واسم العلامة التجارية على اليمين:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

المحتوى الخارجي

قد ترغب أحيانًا في استخدام ملحق الطي الإضافي لتشغيل المحتوى المخفي في مكان آخر بالصفحة. نظرًا لأن المكون الإضافي الخاص بنا يعمل على والمطابقة ، يمكن القيام بذلك بسهولة id!data-target

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>