نواری‌های 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 类可创建垂直导航：

مثال

کلاس می‌تواند منوهای هدایت‌کننده عمودی ایجاد کند:

به طور شخصی امتحان کنید

<ul class="nav flex-column">

لطفاً از کارت‌های انتخابی .nav-tabs کلاس منوهای هدایت‌کننده را به منوهای کارت انتخابی تبدیل می‌کند. و .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

مثال

<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="#">Dropdown</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="#">Dropdown</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>
<!-- پنجره‌های Tab -->
<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>

به طور شخصی امتحان کنید