Source

Navbar

Bootstrap-ning kuchli, sezgir navigatsiya sarlavhasi, navigatsiya paneli uchun hujjatlar va misollar. Brendlash, navigatsiya va boshqalarni qoʻllab-quvvatlash, jumladan, bizning siqilish plaginini qoʻllab-quvvatlashni oʻz ichiga oladi.

U qanday ishlaydi

Navbardan foydalanishni boshlashdan oldin nimani bilishingiz kerak:

  • Navbarlar sezgir siqilish va rang sxemasi sinflari uchun o'rashni talab .navbarqiladi ..navbar-expand{-sm|-md|-lg|-xl}
  • Navbarlar va ularning tarkibi sukut bo'yicha suyuqlikdir. Gorizontal kengligini cheklash uchun ixtiyoriy idishlardan foydalaning .
  • Navbarlar ichidagi oraliq va hizalanishni boshqarish uchun bizning intervalli va moslashuvchan yordamchi sinflarimizdan foydalaning.
  • Navbarlar sukut bo'yicha javob beradi, lekin uni o'zgartirish uchun ularni osongina o'zgartirishingiz mumkin. Javob beruvchi xatti-harakat bizning Collapse JavaScript plaginimizga bog'liq.
  • Chop etishda navbarlar sukut bo'yicha yashirin bo'ladi. ga qo'shish orqali ularni chop .d-printetishga majbur qiling .navbar. Displey yordam dasturi sinfiga qarang .
  • Element yordamida kirish imkoniyatini taʼminlang <nav>yoki agar , kabi umumiyroq elementdan foydalansangiz, har bir navbarga “a” belgisini <div>qoʻshib, role="navigation"uni yordamchi texnologiyalar foydalanuvchilari uchun moʻljallangan hudud sifatida aniq belgilang.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

Qo'llab-quvvatlanadigan kichik komponentlarning namunasi va ro'yxati uchun o'qing.

Qo'llab-quvvatlanadigan kontent

Navbarlar bir nechta kichik komponentlar uchun o'rnatilgan yordam bilan birga keladi. Zarur bo'lganda quyidagilardan tanlang:

  • .navbar-brandkompaniyangiz, mahsulotingiz yoki loyihangiz nomi uchun.
  • .navbar-navto'liq balandlikdagi va engil navigatsiya uchun (shu jumladan ochiladigan menyularni qo'llab-quvvatlash).
  • .navbar-togglerbizning siqilish plaginimiz va boshqa navigatsiyani almashtirish xatti-harakatlarimiz bilan foydalanish uchun.
  • .form-inlinehar qanday shakl nazorati va harakatlari uchun.
  • .navbar-textvertikal markazlashtirilgan matn satrlarini qo'shish uchun.
  • .collapse.navbar-collapsenavbar tarkibini asosiy to'xtash nuqtasi bo'yicha guruhlash va yashirish uchun.

lgBu erda (katta) to'xtash nuqtasida avtomatik ravishda yiqilib tushadigan sezgir yorug'lik mavzusidagi navbarga kiritilgan barcha kichik komponentlarga misol .

<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="#" tabindex="-1" aria-disabled="true">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>

Bu misol rang ( bg-light) va intervalli ( my-2, my-lg-0, mr-sm-0, my-sm-0) yordamchi sinflardan foydalanadi.

Brend

Ko'pgina elementlarga qo'llanilishi mumkin, ammo langar eng .navbar-brandyaxshi ishlaydi, chunki ba'zi elementlar yordam sinflari yoki maxsus uslublarni talab qilishi mumkin.

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

Tasvirlarga rasm qo'shish .navbar-brandhar doim to'g'ri o'lcham uchun maxsus uslublar yoki yordamchi dasturlarni talab qilishi mumkin. Bu erda ko'rsatish uchun ba'zi misollar.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar navigatsiya havolalari .navo'z modifikatorlari sinfiga ega bo'lgan variantlarimizga asoslanadi va to'g'ri javob beruvchi uslublar uchun almashtirish sinflaridan foydalanishni talab qiladi. Navbardagi navigatsiya ham oʻsib boradi, bu esa navigatsiya paneli tarkibini xavfsiz tarzda hizalanishini taʼminlash uchun imkon qadar koʻproq gorizontal joyni egallash imkonini beradi.

.activeJoriy sahifani ko'rsatish uchun faol holatlar - bilan - to'g'ridan-to'g'ri .nav-links yoki ularning bevosita ota-onasiga qo'llanilishi mumkin .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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Va biz navlar uchun darslardan foydalanganimiz sababli, agar xohlasangiz, ro'yxatga asoslangan yondashuvdan butunlay qochishingiz mumkin.

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Shuningdek, siz navbar panelidagi ochiladigan menyudan foydalanishingiz mumkin. Ochiladigan menyular joylashishni aniqlash uchun o'rash elementini talab qiladi, shuning uchun quyida ko'rsatilganidek, alohida .nav-itemva ichki elementlardan foydalaning..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>

Shakllar

Har xil shakl boshqaruvlari va komponentlarini navbar paneliga joylashtiring .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>

Foydalanilayotgan bevosita bolalar elementlari .navbarmoslashuvchan tartib va ​​sukut bo'yicha bo'ladi justify-content: space-between. Ushbu xatti-harakatni sozlash uchun kerak bo'lganda qo'shimcha moslashuvchan yordamchi dasturlardan foydalaning.

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

Kirish guruhlari ham ishlaydi:

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

Ushbu navbar shakllarining bir qismi sifatida turli tugmalar ham qo'llab-quvvatlanadi. Bu, shuningdek, vertikal hizalama yordam dasturlari turli o'lchamdagi elementlarni tekislash uchun ishlatilishi mumkinligini eslatib turadi.

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

Matn

Navbarlar yordamida matn bitlari bo'lishi mumkin .navbar-text. Bu sinf matn satrlari uchun vertikal tekislash va gorizontal oraliqlarni sozlaydi.

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

Agar kerak bo'lsa, boshqa komponentlar va yordamchi dasturlar bilan aralashtiring va moslang.

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

Rang sxemalari

Mavzu sinflari va yordamchi dasturlarning kombinatsiyasi tufayli navigatsiya panelini mavzulashtirish hech qachon oson bo'lmagan background-color. .navbar-lightOchiq fon ranglari yoki .navbar-darkquyuq fon ranglari bilan foydalanish uchun tanlang . Keyin, yordamchi dasturlar bilan moslashtiring .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>

Konteynerlar

Bu shart boʻlmasa-da, siz navigatsiya panelini sahifaning oʻrtasiga qoʻyishingiz yoki faqat sobit yoki statik yuqori navbarning.container mazmunini markazlashtirish uchun uni ichiga qoʻshishingiz mumkin .

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

Konteyner navigatsiya panelida bo'lsa, uning gorizontal to'ldirishi belgilangan .navbar-expand{-sm|-md|-lg|-xl}sinfingizdan pastroq to'xtash nuqtalarida olib tashlanadi. Bu sizning navigatsiya paneli yopilganda pastki ko'rish oynalarida keraksiz to'ldirishni ikki baravar oshirmasligimizni ta'minlaydi.

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

Joylashtirish

Navbarlarni statik bo'lmagan joylarga joylashtirish uchun bizning joylashuv yordamchi dasturlarimizdan foydalaning. Yuqoriga mahkamlangandan, pastga mahkamlangandan yoki tepaga yopishtirilgandan tanlang (sahifa bilan tepaga yetguncha aylantiradi, keyin u erda qoladi). Ruxsat etilgan navbarlar dan foydalanadi position: fixed, ya'ni ular DOMning oddiy oqimidan tortib olinadi va boshqa elementlar bilan bir-biriga o'xshashlikni oldini olish uchun maxsus CSS (masalan, ) padding-toptalab qilinishi mumkin.<body>

Shuni ham yodda tutingki, .sticky-tophar position: stickybir brauzerda to'liq qo'llab-quvvatlanmaydi .

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

Javobgar xatti-harakatlar

Navbarlar .navbar-toggler, .navbar-collapse, va .navbar-expand{-sm|-md|-lg|-xl}sinflardan foydalanishlari mumkin, ularning mazmuni tugma orqasida yiqilib tushganda o'zgartirish mumkin. Boshqa yordamchi dasturlar bilan birgalikda siz ma'lum elementlarni qachon ko'rsatish yoki yashirishni osongina tanlashingiz mumkin.

Hech qachon yiqilmaydigan navbatlar uchun navbarga .navbar-expandsinfni qo'shing. Har doim yopiladigan navbarlar uchun hech qanday .navbar-expandsinf qo'shmang.

Toggler

Navbarni oʻzgartirish tugmalari sukut boʻyicha chapga hizalanadi, lekin agar ular a kabi birodar elementga amal qilsa .navbar-brand, ular avtomatik ravishda eng oʻng tomonga tekislanadi. Belgilashni teskari o'zgartirish o'zgartirish moslamasining joylashishini o'zgartiradi. Quyida turli xil almashtirish uslublariga misollar keltirilgan.

Eng past to'xtash nuqtasida ko'rsatilmagan .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="#" tabindex="-1" aria-disabled="true">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>

Chapda brend nomi va o'ng tomonda o'zgartirish tugmasi ko'rsatilgan:

<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="#" tabindex="-1" aria-disabled="true">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>

Chapda o'zgartirish tugmasi va o'ngda brend nomi bilan:

<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="#" tabindex="-1" aria-disabled="true">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>

Tashqi tarkib

Ba'zan siz sahifaning boshqa joylarida yashirin kontentni ishga tushirish uchun siqilish plaginidan foydalanmoqchisiz. Chunki bizning plaginimiz mos idva moslashda ishlaydi data-target, bu osonlik bilan amalga oshiriladi!

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