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.
v5.2.0 da yangi: Navbarlar asosiy sinfga tegishli bo'lgan CSS o'zgaruvchilari bilan mavzulanishi mumkin .navbar. .navbar-lighteskirgan va .navbar-darkqo'shimcha uslublar qo'shish o'rniga CSS o'zgaruvchilarini bekor qilish uchun qayta yozilgan.

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 .

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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 ( me-auto, mb-2, mb-lg-0, me-2) 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 .

html

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

<!-- As a heading -->
<nav class="navbar 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>.

html

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

Rasm va matn

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

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" 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

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

html

<nav class="navbar navbar-expand-lg 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.

html

<nav class="navbar navbar-expand-lg 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

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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:

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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.

html

<nav class="navbar 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.

html

<nav class="navbar 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.

html

<nav class="navbar 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.

html

<nav class="navbar navbar-expand-lg 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

v5.2.0 da yangilik: Navbar mavzusi endi CSS o'zgaruvchilari tomonidan quvvatlanadi va .navbar-lighteskirgan. CSS o'zgaruvchilari .navbar"yorug'lik" ko'rinishida sukut bo'yicha qo'llaniladi va bilan bekor qilinishi mumkin .navbar-dark.

Bootstrap-ning Sass va CSS o'zgaruvchilari kombinatsiyasi tufayli Navbar mavzulari har qachongidan ham osonroq. Ochiq fon ranglari bilan foydalanish uchun sukut bo'yicha bizning "engil navbar" bo'ladi, lekin siz .navbar-darkquyuq fon ranglariga ham murojaat qilishingiz mumkin. 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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteynerlar

Garchi bu shart bo'lmasa-da, siz navbar panelini sahifaning o'rtasiga qo'yish uchun o'rashingiz mumkin, .containerlekin ichki konteyner hali ham talab qilinishiga e'tibor bering. Yoki faqat sobit yoki statik yuqori navbarning.navbar mazmunini markazlashtirish uchun ichiga konteyner qo'shishingiz mumkin .

html

<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html

<nav class="navbar navbar-expand-lg 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 mahkamlangan, pastga mahkamlangan, tepaga yopishtirilgan (sahifa bilan tepaga yetguncha aylantiradi, keyin o‘sha yerda qoladi) yoki pastga yopishgan (sahifa bilan pastga tushguncha aylantiradi, keyin qoladi)ni tanlang. U yerda).

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>

html

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

html

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

html

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

html

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

html

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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;"

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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 :

html

<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html

<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html

<nav class="navbar navbar-expand-lg 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" role="search">
        <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!

Yiqilgan kontent

Navbar brendi orqali o'tish mumkin.

html

<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 komponenti bilan offcanvas tortmasiga 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.

html

<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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-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>

Qorong'i navigatsiya panelida offcanvas-dan foydalanayotganda, matnni o'qib bo'lmaydigan qilib qo'ymaslik uchun siz offcanvas kontentida qorong'i fonga ega bo'lishingiz kerakligini yodda tuting. Quyidagi misolda quyuq rangli tuval bilan to'g'ri uslublash uchun , ga , ga va ga .navbar-darkva ga qo'shamiz..bg-dark.navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida, navbarlar endi .navbarreal vaqtda yaxshilangan sozlash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Ba'zi qo'shimcha CSS o'zgaruvchilari ham mavjud .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS o'zgaruvchilari orqali moslashtirishni .navbar-darksinfda ko'rish mumkin, bu erda biz takroriy CSS selektorlarini qo'shmasdan ma'lum qiymatlarni bekor qilamiz.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass o'zgaruvchilari

Barcha navbarlar uchun 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-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;

Qorong'i navbar uchun o'zgaruvchilar :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass halqasi

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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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