نوار ناوبری

مستندات و نمونه هایی برای هدر ناوبری قدرتمند و پاسخگو Bootstrap، نوار ناوبری. شامل پشتیبانی از نام تجاری، پیمایش، و موارد دیگر، از جمله پشتیبانی از افزونه فروپاشی ما.

چگونه کار می کند

قبل از شروع کار با نوار ناوبری باید بدانید:

نوارهای ناوبری برای جمع شدن پاسخگو و کلاس های طرح رنگ نیاز به بسته بندی دارند .navbar..navbar-expand{-sm|-md|-lg|-xl}
نوارهای ناوبری و محتویات آنها به طور پیش فرض روان هستند. از ظروف اختیاری برای محدود کردن عرض افقی آنها استفاده کنید.
از کلاس‌های کاربردی فاصله و انعطاف‌پذیری ما برای کنترل فاصله و تراز در نوارهای ناوبری استفاده کنید.
نوارهای Navbar به طور پیش فرض پاسخگو هستند، اما شما به راحتی می توانید آنها را تغییر دهید تا آن را تغییر دهید. رفتار پاسخگو به افزونه Collapse JavaScript ما بستگی دارد.
نوارهای ناوبری به طور پیش فرض هنگام چاپ پنهان می شوند. آنها را مجبور کنید با اضافه کردن .d-printبه چاپ شوند .navbar. کلاس ابزار نمایش را ببینید .
با استفاده از یک عنصر، دسترسی را تضمین کنید <nav>یا در صورت استفاده از یک عنصر عمومی‌تر مانند یک <div>، یک علامت role="navigation"را به هر نوار ناوبری اضافه کنید تا صریحاً آن را به عنوان یک منطقه شاخص برای کاربران فناوری‌های کمکی شناسایی کنید.

برای مثال و لیستی از اجزای فرعی پشتیبانی شده به ادامه مطلب بروید.

محتوای پشتیبانی شده

نوارهای Navbar با پشتیبانی داخلی از تعداد انگشت شماری از اجزای فرعی ارائه می شوند. در صورت نیاز از بین موارد زیر انتخاب کنید:

.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="#">Navbar</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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</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">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <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">Search</button>
    </form>
  </div>
</nav>

این مثال از کلاس های کاربردی رنگ ( bg-light) و فاصله ( my-2, my-lg-0, mr-sm-0, ) استفاده می کند.my-sm-0

نام تجاری

.navbar-brandمی توان آن را برای اکثر عناصر اعمال کرد، اما یک لنگر بهترین عملکرد را دارد زیرا برخی از عناصر ممکن است به کلاس های کاربردی یا سبک های سفارشی نیاز داشته باشند .

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

افزودن تصاویر به .navbar-brandاحتمالاً همیشه نیاز به سبک ها یا ابزارهای سفارشی برای اندازه مناسب دارد. در اینجا چند نمونه برای نشان دادن آورده شده است.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

پیوندهای پیمایش نوار ناوبری بر روی .navگزینه‌های ما با کلاس اصلاح‌کننده خاص خود ساخته شده‌اند و برای استایل واکنش‌گرای مناسب نیاز به استفاده از کلاس‌های تغییردهنده دارند. پیمایش در نوارهای ناوبری نیز به گونه ای افزایش می یابد که تا حد امکان فضای افقی را اشغال کند تا محتویات نوار ناوبری شما به طور ایمن تراز شود.

حالت‌های فعال - با .active- برای نشان دادن صفحه فعلی می‌تواند مستقیماً روی .nav-links یا والد فوری آنها اعمال شود .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

و از آنجایی که ما از کلاس‌ها برای ناوبری خود استفاده می‌کنیم، در صورت تمایل می‌توانید از رویکرد مبتنی بر فهرست به طور کامل اجتناب کنید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

همچنین می توانید از منوهای کشویی در نوار ناوبری خود استفاده کنید. منوهای کشویی به یک عنصر بسته بندی برای موقعیت یابی نیاز دارند، بنابراین حتماً از عناصر جداگانه و تودرتو برای .nav-itemو .nav-linkمطابق شکل زیر استفاده کنید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</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="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

عناصر فرزندان فوری در .navbarاستفاده از طرح انعطاف پذیر هستند و به طور پیش فرض روی justify-content: between. برای تنظیم این رفتار در صورت نیاز از ابزارهای انعطاف پذیر اضافی استفاده کنید.

<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">Search</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="Username" 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">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

متن

نوارهای ناوبری ممکن است حاوی بیت هایی از متن با کمک .navbar-text. این کلاس تراز عمودی و فاصله افقی را برای رشته های متن تنظیم می کند.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

در صورت نیاز با سایر اجزا و ابزارهای کاربردی ترکیب و مطابقت دهید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

طرح های رنگی

به لطف ترکیبی از کلاس های موضوعی و background-colorابزارهای کاربردی، قالب بندی نوار ناوبری آسان تر نبوده است. .navbar-lightبرای استفاده با رنگ‌های پس‌زمینه روشن یا .navbar-darkبرای رنگ‌های پس‌زمینه تیره ، یکی را انتخاب کنید. سپس، با ابزارهای کاربردی سفارشی .bg-*کنید.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ظروف

اگرچه نیازی به آن نیست، می‌توانید یک نوار ناوبری را در یک بپیچید .containerتا آن را در مرکز صفحه قرار دهید یا یکی را در داخل آن اضافه کنید تا فقط محتویات نوار ناوبری ثابت یا ثابت بالا را در مرکز قرار دهید .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

وقتی کانتینر در نوار ناوبری شما باشد، بالشتک افقی آن در نقاط شکست پایین‌تر از .navbar-expand{-sm|-md|-lg|-xl}کلاس مشخص‌شده شما حذف می‌شود. این تضمین می‌کند که وقتی نوار ناوبری شما جمع می‌شود، در نمای‌پورت‌های پایین‌تر، بی‌رویه padding را دو برابر نمی‌کنیم.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</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="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</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="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <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">Search</button>
    </form>
  </div>
</nav>

با نام تجاری نشان داده شده در سمت چپ و تغییر دهنده در سمت راست:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</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="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <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">Search</button>
    </form>
  </div>
</nav>

محتوای خارجی

گاهی اوقات می خواهید از افزونه جمع کردن برای راه اندازی محتوای پنهان در جای دیگری از صفحه استفاده کنید. از آنجایی که افزونه ما بر روی idو data-targetمطابقت کار می کند، این کار به راحتی انجام می شود!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</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="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>