Bootstrap 5 التوجيه

قائمة التنقل

إذا كنت ترغب في إنشاء قائمة مستوى أقل، فيجب أن تكون: .nav النوع المضاف إلى <ul> العناصر، ثم لكل <li> إضافة العناصر .nav-item ويعمل .nav-link الكلاس يضيف إلى روابطهم:

مثال

<ul class="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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">ممنوع</a>
  </li>
</ul>

جربها بنفسك

توازي القائمة التنقل

إضافة .justify-content-center الكلاس يجعل التنقل في الوسط، وإضافة .justify-content-end الكلاس يجعل التنقل يساوي من اليمين.

مثال

<!-- التنقل في الوسط -->
<ul class="nav justify-content-center">
<!-- التنقل مساوٍ من اليمين -->
<ul class="nav justify-content-end">

جربها بنفسك

القائمة التنقل العمودية

إضافة .flex-column نوع .flex-column يمكن إنشاء تنقل عمودي:}}

مثال

<ul class="nav flex-column">

جربها بنفسك

أزرار منقولة

استخدم .nav-tabs نوع .nav-tabs يتحول إلى قائمة تنقل التنقل. ويضيف .active إضافة نوع .active إلى الرابط النشط/الحالي. إذا كنت ترغب في أن تكون الأزرار المنقولة قابلة للتغيير، يرجى الرجوع إلى مثال الأخير في هذه الصفحة.

مثال

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">ممنوع</a>
  </li>
</ul>

جربها بنفسك

الكبسولة

استخدم .nav-pills استخدم نوع .nav-pills لضبط قائمة التنقل ككبسولة. إذا كنت ترغب في أن تكون الكبسولة قابلة للتغيير، يرجى الرجوع إلى مثال الأخير في هذه الصفحة.

مثال

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">ممنوع</a>
  </li>
</ul>

جربها بنفسك

أزرار منقولة متساوية في العرض

استخدم .nav-justified استخدام

مثال

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

جربها بنفسك

قائمة تنقل الكبسولة

مثال

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">تنزيل</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">رابط 1</a></li>
      <li><a class="dropdown-item" href="#">رابط 2</a></li>
      <li><a class="dropdown-item" href="#">رابط 3</a></li>
    </ul>
  </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>

جربها بنفسك

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

مثال

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">تنزيل</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">رابط 1</a></li>
      <li><a class="dropdown-item" href="#">رابط 2</a></li>
      <li><a class="dropdown-item" href="#">رابط 3</a></li>
    </ul>
  </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>

جربها بنفسك

قابلة للتغيير / أزرار منقولة ديناميكية

إذا كنت ترغب في أن تكون الأزرار المنقولة قابلة للتغيير، يرجى إضافة data-toggle="tab" اضف خاصية إلى كل رابط. .tab-pane نوع، وقم بتغليفها في دالة تحتوي على .tab-content نوع <div> إلى العنصر.

إذا كنت ترغب في أن تكون الأزرار المنقولة قابلة للتجول بالتدرج عند النقر، يرجى إضافة .fade النوع المضاف إلى .tab-pane：

مثال

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">المنزل</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">القائمة 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">القائمة 2</a>
  </li>
</ul>
<!-- وحدات الوسائط -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

جربها بنفسك

التبديل / التوجيه الكابسولي المتغير

الشفرة نفسها تنطبق على التوجيه؛ فقط قم بتغيير خاصية data-toggle data-toggle="pill" يمكنك القيام بذلك على الفور:

مثال

<!-- قلب التوجيه -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">ربيع</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">ربيع الأول</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">تسلق الجبال</a>
  </li>
</ul>
<!-- وحدة التكوين -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

جربها بنفسك