in English

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.

Ushbu sahifada

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|-xxl}
Navbarlar va ularning tarkibi sukut bo'yicha suyuqlikdir. Gorizontal kengligini turli yo'llar bilan cheklash uchun idishni o'zgartiring .
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.
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.
aria-current="page"Joriy sahifa uchun yoki to'plamdagi joriy element uchun foydalanib aria-current="true", joriy elementni ko'rsating.

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

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.
Har qanday shakl boshqaruvi va harakatlar uchun moslashuvchan va intervalli yordamchi dasturlar.
.navbar-textvertikal markazlashtirilgan matn satrlarini qo'shish uchun.
.collapse.navbar-collapsenavbar tarkibini asosiy to'xtash nuqtasi bo'yicha guruhlash va yashirish uchun.
O'rnatish uchun ixtiyoriy qo'shing .navbar-scrollva max-heightkengaytirilgan navbar tarkibini aylantiring .

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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Bu misolda fon ( bg-light) va intervalli ( my-2, my-lg-0, me-sm-0, my-sm-0) yordamchi sinflar qo‘llaniladi.

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.

Matn

.navbar-brandMatningizni sinf bilan elementga qo'shing .

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

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

Rasm

Siz ichidagi matnni .navbar-brandbilan almashtirishingiz mumkin <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Rasm va matn

Bir vaqtning o'zida rasm va matn qo'shish uchun ba'zi qo'shimcha yordamchi dasturlardan ham foydalanishingiz mumkin. .d-inline-blockva .align-text-topustiga qo'shilganiga e'tibor bering <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

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.

Joriy sahifani ko'rsatish uchun .activesinfni qo'shing ..nav-link

Shuni esda tutingki, siz aria-currentfaol ga atributni ham qo'shishingiz kerak .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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">Disabled</a>
        </li>
      </ul>
    </div>
  </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Navbarda ochiladigan menyudan ham 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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Shakllar

Navbarga turli shakl boshqaruvlari va komponentlarini joylashtiring:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Foydalanishning bevosita asosiy elementlari .navbartartibni moslashuvchan 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">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Kirish guruhlari ham ishlaydi. Agar navigatsiya paneli butun shakl yoki asosan shakl bo'lsa, siz <form>elementni konteyner sifatida ishlatishingiz va biroz HTMLni saqlashingiz mumkin.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <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="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" 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">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </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 navbar panelini .containersahifaning o'rtasiga qo'yish uchun o'rashingiz mumkin, lekin ichki konteyner hali ham talab qilinishini unutmang. Yoki faqat sobit yoki statik yuqori navbarning.navbar mazmunini markazlashtirish uchun ichiga konteyner qo'shishingiz mumkin .

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

Navbaringizdagi kontent qanchalik keng koʻrsatilishini oʻzgartirish uchun har qanday sezgir konteynerdan foydalaning.

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

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

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

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Oʻtkazish

.navbar-nav-scrollYiqilgan navigatsiya panelining almashtiriladigan tarkibi ichida vertikal aylantirishni yoqish uchun .navbar-nav(yoki boshqa navbar pastki komponentiga) qo'shing . Odatiy bo'lib, aylantirish 75vh(yoki ko'rish oynasi balandligining 75%) da boshlanadi, lekin siz buni mahalliy CSS maxsus xususiyati --bs-navbar-heightyoki maxsus uslublar bilan bekor qilishingiz mumkin. Navbar kengaytirilganda kattaroq ko‘rish oynalarida kontent standart navbardagi kabi ko‘rinadi.

Shuni esda tutingki, bu xatti-harakatning mumkin bo'lgan kamchiliklari bilan birga keladi overflow- qachon sozlash overflow-y: auto(kontentni bu yerga aylantirish uchun kerak), overflow-xga ekvivalent bo'lib auto, u ba'zi gorizontal tarkibni kesadi.

Bu yerda optimal oraliq uchun baʼzi qoʻshimcha margin yordamchi dasturlari bilan .navbar-nav-scrollfoydalaniladigan navbarning misoli keltirilgan .style="--bs-scroll-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Javobgar xatti-harakatlar

Navbarlar .navbar-toggler, .navbar-collapse, va .navbar-expand{-sm|-md|-lg|-xl|-xxl}sinflardan foydalanib, ularning mazmuni tugma ortida qachon yiqilib tushishini aniqlashi 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.

.navbar-brandEng kichik to'xtash nuqtasida ko'rsatilmagan :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Tashqi tarkib

Ba'zan siz tizimdan tashqarida joylashgan kontent uchun konteyner elementini ishga tushirish uchun siqilish plaginidan foydalanmoqchisiz .navbar. Chunki bizning plaginimiz mos idva moslashda ishlaydi data-bs-target, bu osonlik bilan amalga oshiriladi!

Collapsed content

Toggleable via the navbar brand.

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Buni qilganingizda, fokusni ochilganda dasturli ravishda konteynerga ko'chirish uchun qo'shimcha JavaScript-ni qo'shishni tavsiya qilamiz. Aks holda, klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari yangi ochilgan kontentni topishda qiynalishi mumkin, ayniqsa ochilgan konteyner hujjat strukturasidagi oʻzgartirish tugmasidan oldin kelgan boʻlsa. Shuningdek, almashtirish moslamasi kontent konteyneriga aria-controlsishora qiluvchi atributga ega ekanligiga ishonch hosil qilishni tavsiya etamiz . idNazariy jihatdan, bu yordamchi texnologiya foydalanuvchilariga to'g'ridan-to'g'ri o'zgartirish moslamasidan o'zi boshqaradigan konteynerga o'tish imkonini beradi, ammo hozirda buni qo'llab-quvvatlash juda noaniq.

Tuvaldan tashqari

Kengayadigan va yiqilib turuvchi navigatsiya panelini offcanvas plaginidan foydalanib, ochiq-oydin chizmaga aylantiring. Biz offcanvas standart uslublarini kengaytiramiz va .navbar-expand-*dinamik va moslashuvchan navigatsiya yon panelini yaratish uchun sinflarimizdan foydalanamiz.

Quyidagi misolda, har doim barcha to'xtash nuqtalari bo'ylab yopilgan offcanvas navbarni yaratish uchun .navbar-expand-*sinfni butunlay o'tkazib yuboring.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Ma'lum bir to'xtash nuqtasida oddiy navbarga kengayadigan offcanvas navbarni yaratish uchun dan lgfoydalaning .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass

O'zgaruvchilar

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Loop

Javob beruvchi navbarni kengaytirish/qistirish sinflari (masalan, ) xarita .navbar-expand-lgbilan birlashtiriladi va .$breakpointsscss/_navbar.scss

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}