Bootstrap 5: شريط التوجيه

القائمة التوجيهية

القائمة التوجيهية هي الرأس التوجيهي الموجود في أعلى الصفحة:

القائمة التوجيهية الأساسية

من خلال استخدام Bootstrap، يمكن للقائمة التوجيهية أن تتوسع أو تنكمش بناءً على حجم الشاشة.

استخدم .navbar الفئة .navbar لإنشاء القائمة التوجيهية القياسية، ثم الفئات التفاعلية للإجابة على الاستجابة التفاعلية:.navbar-expand-xxl|xl|lg|md|sm（تنتشر الأجهزة الكبيرة، الكبيرة، الكبيرة، المتوسطة، الصغيرة هوريزونتially، أو القائمة التوجيهية المتداخلة في الشاشات الصغيرة）。

لإضافة روابط إلى القائمة التوجيهية، استخدم class="navbar-nav" ال <ul> العنصر (أو <div>(). ثم أضف مع .nav-item الفئة <li> العنصر، يتبعه .nav-link الفئة <a> العنصر:

مثال

<!-- القائمة التوجيهية الرمادية الأفقية تصبح عمودية في الشاشات الصغيرة -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- الروابط -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">رابط 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">رابط 3</a>
      </li>
    </ul>
  </div>
</nav>

تجربة شخصية

القائمة التوجيهية العمودية

أزال .navbar-expand-* الفئة .navbar-expand-* تستطيع إنشاء قائمة توجيهية عمودية دائمًا:

مثال

<!-- القائمة التوجيهية العمودية الرمادية -->
<nav class="navbar bg-light">
  ...
</nav>

تجربة شخصية

القائمة التوجيهية في الوسط

أضف .justify-content-center الفئة .justify-content-center تستطيع تعديل القائمة التوجيهية إلى الوسط:

مثال

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

تجربة شخصية

قائمة توجيهية ملونة

استخدم أي .bg-color الفئة .bg-color لتغيير لون الخلفية للقائمة التوجيهية:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

إشارة:استخدم .navbar-dark الفئة .navbar-light تضيف لون النص الأبيض لكل الروابط في القائمة التوجيهية، أو يمكنك استخدام .navbar-light أضف لون النص الأسود إلى الفئة.

مثال

<!-- أزرق رمادي، نص أبيض -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">نشط</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">مستبعد</a>
<!-- خلفية سوداء، نص أبيض -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- خلفية زرقاء، نص أبيض -->

تجربة شخصية

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>وضع الحالة النشطة/المستبعدة: .active إلى <a> لإبراز الروابط الحالية أو إضافة .disabled لإشارة إلى أن الروابط غير قابلة للنقر

العلامة التجارية / الشعار

.navbar-brand لإبراز اسم العلامة التجارية/الشعار/اسم العنوان

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

تجربة شخصية

إذا كنت تستخدم .navbar-brand عند استخدام الأنماط مع الصورة، يتم تعيين أنماط الصورة تلقائيًا بواسطة Bootstrap 5 لتناسب القائمة العمودية في الاتجاه الرأسي.

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

تجربة شخصية

نص القائمة

استخدم .navbar-text استخدم الأنماط class="navbar-text" لتحديد أي عنصر غير رابط في القائمة العمودية (تأكد من الهوامش واللون النصي الصحيح).

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">نص القائمة</span>
  </div>
</nav>

تجربة شخصية

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

لإنشاء قائمة تقييدية قابلة للطي، استخدم الأنماط class="navbar-toggler"،data-bs-toggle="collapse" و data-bs-target="#thetarget" أغلفة محتوى القائمة (روابط إلخ) في class="collapse navbar-collapse" في عناصر <div> التالية، ومن ثم مع data-bs-target المطابقة للـ id: "thetarget"。

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <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" href="#">رابط</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

تجربة شخصية

إشارة:يمكنك أيضًا حذف .navbar-expand-md النوع يستخدم دائمًا لإخفاء روابط navigation bar وعرض زر التبديل.

navigation bar لقوائم السقوط

يمكن لـ navigation bar الاستيعاب قوائم السقوط:

مثال

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">قائمة سقوط</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">رابط</a></li>
    <li><a class="dropdown-item" href="#">رابط آخر</a></li>
    <li><a class="dropdown-item" href="#">رابط ثالث</a></li>
  </ul>
</li>

تجربة شخصية

قائمة التنقل وأزرار النavigation bar

يمكنك أيضًا تضمين النموذج في قائمة التنقل:

مثال

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">رابط</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">رابط</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">رابط</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="البحث">
        <button class="btn btn-primary" type="button">البحث</button>
      </form>
    </div>
  </div>
</nav>

تجربة شخصية

قائمة التوجيهات الثابتة

يمكن أيضًا إبقاء قائمة التوجيهات ثابتة في الجزء العلوي أو السفلي للصفحة.

سيبقى قائمة التوجيهات مرئية في موقع ثابت مستقل عن تمرير الصفحة (الجزء العلوي أو السفلي).

.fixed-top تساعد الصفيف على إبقاء قائمة التوجيهات ثابتة في صفحةالجزء العلوي:

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

تجربة شخصية

استخدم صفيف .fixed-bottom لجعل قائمة التوجيهات ثابتة في أسفل الصفحة:

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

تجربة شخصية

استخدم .sticky-top تساعد هذه الصنف على إبقاء قائمة التوجيهات ثابتة/معلقة في صفحة عند مرورهاالجزء العلوي。

ملاحظة:لا يعمل هذا النوع في إصدارات IE11 وكلها الأحدث (تقديمها كـ position:relative）。

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

تجربة شخصية