نوار ناوبری در Bootstrap 5

ناوبری

ناوبری سربرگ ناوبری در بالای صفحه است:

ناوبری پایه

با استفاده از Bootstrap، ناوبری می‌تواند گسترش یا تا شود، بسته به اندازه صفحه نمایش.

لطفاً از .navbar کلاس برای ایجاد ناوبری استاندارد استفاده می‌شود، سپس کلاس‌های چرخش پاسخگو:.navbar-expand-xxl|xl|lg|md|smاستفاده کنید (در دستگاه‌های فوق‌العاده بزرگ، بزرگ، متوسط، کوچک به صورت افقی نمایش داده می‌شوند، یا در صفحه‌های کوچک به صورت عمودی قرار می‌گیرند).

برای افزودن لینک به ناوبری، از class="navbar-nav" از <ul> عنصر (یا <div>()). سپس با استفاده از .nav-item کلاس <li> عنصر، دنبال .nav-link کلاس عنصر:

مثال

<!-- ناوبری افقی خاکستری در صفحه‌های کوچک به عمودی تبدیل می‌شود -->
<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-* کلاس می‌تواند یک ناوبری همیشه عمودی ایجاد کند:

مثال

<!-- ناوبری عمودی خاکستری -->
<nav class="navbar bg-light">
  ...
</nav>

آزادانه امتحان کنید

ناوبری در وسط

افزودن .justify-content-center کلاس می‌تواند ناوبری را در وسط قرار دهد:

مثال

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

آزادانه امتحان کنید

ناوبری رنگی

از هر .bg-color کلاس برای تغییر رنگ پس‌زمینه ناوبری استفاده کنید:

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

توجه:لطفاً از .navbar-dark کلاس می‌تواند رنگ نوشتار سفید همه لینک‌های ناوبری را اضافه کند، یا از .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">
        禁用
      </li>
    </ul>
  </div>
</nav>

آزادانه امتحان کنید

活动/禁用状态：将 .active 类添加到 元素可突出显示当前链接，或添加 .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 کسی چیز کا کا کسی کسولناک نواقصی میں کسولناک بنائیں (تصدیق صحیح انداز و رنگ متن)،

مثال

<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 کلاس‌ها برای همیشه لینک‌های ناوزاری بار را پنهان کرده و دکمه‌های تغییر وضعیت را نمایش می‌دهند.

ناوزاری بار منوی فروپاشی

ناوزاری بار می‌تواند منوی‌های فروپاشی را شامل شود:

مثال

<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>

آزادانه امتحان کنید

منوی ناوزاری بار و دکمه‌ها

آپ ناوزاری بار می‌توانید فرم‌ها را در ناوزاری بار شامل کنید:

مثال

<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>

آزادانه امتحان کنید

ناوبری ثابت

ناوبری می‌تواند در بالا یا پایین صفحهpage ثابت شود.

ناوبری ثابت، در مکان ثابت مستقل از رول صفحهpage (بالا یا پایین) قابل مشاهده خواهد بود.

.fixed-top این نوع، ناوبری را در بالای صفحهpage ثابت می‌کند.بالا:

مثال

<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 این نوع، ناوبری را در حالی که رول می‌شود، در بالای صفحهpage ثابت/باقی می‌ماند.بالا.

توضیح:این نوع در نسخه‌های IE11 و قدیمی‌تر کار نمی‌کند (آن را به عنوان position:relative)

مثال

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

آزادانه امتحان کنید