شرائط التنقّل في إطار العمل Bootstrap

تعرَّف على مكوِّن شرائط التنقّل القويّ والمرن الذي يقدّمه إطار العمل Bootstrap. يدعم شريط التنقّل في Bootstrap الهويّة التجاريّة (branding)، وعناصر التنقّل وأمورًا أخرى تتعرّض لها صفحة التوثيق هذه.

آليّة العمل

في ما يلي أمور ينبغي الانتباه إليها قبل البدء في استخدام شريط التنقّل في Bootstrap:

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

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

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

تأتي شرائط التنقّل مبدئيًّا مع دعم مجموعة من المكوِّنات الفرعيّة. استخدم حسب الحاجة أيًّا من المكوِّنات التاليّة:

‎.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="#">شريط تنقّل</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>
    <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="#">الرئيسيّة <span class="sr-only">(الحالي)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط</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">
          قائمة منسدلة
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">إجراء</a>
          <a class="dropdown-item" href="#">إجراء آخر</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">أمر آخر هنا</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">مُعطَّل</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
    </form>
  </div>
</nav>

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

الهويّة التجارية

يعمل الصنف ‎.navbar-brand على أغلب العناصر؛ إلّا أنّ الروابط (<a>) هي المُرشّح الأفضل لتطبيقه عليها، إذ تحتاج بعضُ العناصر لأصناف خدميّة أو أنماط مُخصَّصة.

<!-- استخدام رابط -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط تنقّل</a>
</nav>

<!-- استخدام ترويسة -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">شريط تنقّل</span>
</nav>

تحتاج الصوّر غالبًا عند إضافتها ضمن الصنف ‎.navbar-brand إلى تنسيقات مُخصَّصة وأدوات لتحديد أبعادها الصحيحة. في ما يلي أمثلةٌ للتوضيح.

<!-- صورة فقط -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- صورة ونصّ -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

عناصر التنقل

تُبنَى روابط التنقّل في شرائط التنقّل بالاعتماد على الخيّارات التي يقدّمها مكوِّن عناصر التنقّل واستخدام أصناف مُعدِّلة مخصوصة. تتطلّب روابط التنقّل استخدام أصناف التبديل (انظُر أدناه) لتنسيق متجاوب. تتمدّد عناصر التنقّل في شريط التنقّل لاحتلال أكبر مساحة أفقيّة ممكنة للإبقاء على محتويات شريط التنقّل محاذاة على نحو آمن.

يمكن تطبيق الصنف ‎.active مباشرة على روابط التنقّل (‎.nav-link) أو آبائها المباشرين (‎.nav-item) للإشارة إلى الصفحة الحاليّة.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط التنقّل</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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الميزات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التسعير</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">مُعطَّل</a>
      </li>
    </ul>
  </div>
</nav>

يمكن الاستغناء تمامًا عن التنقّل المعتمد على القوائم، نظرًا لاستخدام أصناف Bootstrap لإنشاء عناصر التنقّل.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط التنقّل</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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      <a class="nav-item nav-link" href="#">الميزات</a>
      <a class="nav-item nav-link" href="#">التسعير</a>
      <a class="nav-item nav-link disabled" href="#">مُعطَّل</a>
    </div>
  </div>
</nav>

يمكن كذلك استخدام قوائم التنقّل في عناصر شريط التنقّل. تحتاج القوائم المنسدلة عنصُر مُغلِّفًا للتموضع؛ لذا تأكّد من استخدام عناصر مختلفة ومتداخلة للصنفيْن ‎.nav-item و‎.nav-link كما في المثال التالي.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط التنقّل</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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الميزات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التسعير</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          رابط قائمة منسدلة
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">إجراء</a>
          <a class="dropdown-item" href="#">إجراء آخر</a>
          <a class="dropdown-item" href="#">أمر آخر هنا</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="البحث" aria-label="البحث">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
  </form>
</nav>

يستخدم الأبناء المباشرون في ‎.navbar الخطاطة المنسابة flex، أما قيمتها الافتراضية فهي justify-content: space-between. استخدم أدوات flex الإضافية لتعديل السلوك.

<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">بحث</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="اسم المستخدم" 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">الزرّ الرئيسيّ</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">زرّ أصغر</button>
  </form>
</nav>

النص

يمكن أن تتضمّن شرائط التنقّل نصوصًا بفضل الصنف‎.navbar-text الذي يصحّح المحاذاة العموديّة والتباعد الأفقيّ بالنسبة لسلاسل المحارف.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    نصّ في شريط تنقل باستخدام عنصُر سطريّ
  </span>
</nav>

يمكن المزج بين هذا الصنف والمكوِّنات الأخرى حسب الحاجة.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط تنقّل يوجد به نصّ</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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الميزات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التسعير</a>
      </li>
    </ul>
    <span class="navbar-text">
      نصّ في شريط تنقل باستخدام عنصُر سطريّ
    </span>
  </div>
</nav>

مُخطَّطات الألوان

من السهل جدًّا تخصيص مظهر شائط التنقّل، بفضل المزج بين أصناف المظهر وأدوات ألوان الخلفيّة (background-color). اختر بين ‎.navbar-light لألوان خلفيّة مضيئة و‎.navbar-dark لألوان خلفيّة غامقة؛ ثم خصّص المظهر بالأصناف ‎.bg-‎*‎.

<nav class="navbar navbar-dark bg-dark">
  <!-- محتوى شريط التنقّل -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- محتوى شريط التنقّل -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- محتوى شريط التنقّل -->
</nav>

الحاويات

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

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">شريط التنقّل</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="#">شريط التنقّل</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="#">مبدئيّ</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">مُثبّت في الأعلى</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">مُثبّت في الأسفل</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">ملتصق بالأعلى</a>
</nav>

التجاوب

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

أضف الصنف ‎.navbar-expand إلى شرائط التنقّل التي لا تريد لها الطيّ أبدًا. بالعكس، لا تضف أي ‎.navbar-expand إلى شرائط التنقّل التي تُطوَى دائما.

مبدِّل حالة شريط التنقل

يُحاذى مبدِّل حالة شريط التنقّل (الزرّ الذي يؤدّي النقر عليه لإظهار أو إخفاء عناصر التنقّل) مبدئيًّا على اليسار، ولكن إنْ سبقه عنصُر أخ مثل ‎.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="يظهر أو يخفي عناصر التنقّل">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">هويّة مخفيّة</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">مُعطَّل</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
    </form>
  </div>
</nav>

الهويّة يسارًا والمبدِّل يمينًا:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شريط التنقّل</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="يظهر أو يخفي عناصر التنقّل">
    <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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">مُعطَّل</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="البحث">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</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="يظهر أو يخفي عناصر التنقّل">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">شريط التنقّل</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="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">مُعطَّل</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
    </form>
  </div>
</nav>

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

قد ترغب أحيانًا في استخدام مُلحَق الطيّ (collapse plugin) للتعامل مع محتوى في مكان آخر من الصفحة. هذا الأمر سهل، نظرًا لكون مُلحَق الطيّ يعمل على معرِّف العناصر (id) وخاصيّة data-target.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">محتوى مطويّ</h4>
      <span class="text-muted">يمكن إظهاره أو إخفاؤه باستخدام هويّة شريط التنقّل.</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="يظهر أو يخفي عناصر التنقّل">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

مصادر

صفحة Navbar في توثيق Bootstrap.