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
.navbar
qiladi ..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 foydalanibaria-current="true"
, joriy elementni ko'rsating.
prefers-reduced-motion
media 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-brand
kompaniyangiz, mahsulotingiz yoki loyihangiz nomi uchun..navbar-nav
to'liq balandlikdagi va engil navigatsiya uchun (shu jumladan ochiladigan menyularni qo'llab-quvvatlash)..navbar-toggler
bizning siqilish plaginimiz va boshqa navigatsiyani almashtirish xatti-harakatlarimiz bilan foydalanish uchun.- Har qanday shakl boshqaruvi va harakatlar uchun moslashuvchan va intervalli yordamchi dasturlar.
.navbar-text
vertikal markazlashtirilgan matn satrlarini qo'shish uchun..collapse.navbar-collapse
navbar tarkibini asosiy to'xtash nuqtasi bo'yicha guruhlash va yashirish uchun.- O'rnatish uchun ixtiyoriy qo'shing
.navbar-scroll
vamax-height
kengaytirilgan navbar tarkibini aylantiring .
lg
Bu 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" href="#" tabindex="-1" aria-disabled="true">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-brand
yaxshi ishlaydi, chunki ba'zi elementlar yordam sinflari yoki maxsus uslublarni talab qilishi mumkin.
Matn
.navbar-brand
Matningizni 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-brand
bilan almashtirishingiz mumkin <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/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-block
va .align-text-top
ustiga 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.0/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 .nav
o'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 .active
sinfni qo'shing ..nav-link
Esda tutingki, siz aria-current
faol 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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-item
va 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 .navbar
tartibni 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-light
Ochiq fon ranglari yoki .navbar-dark
quyuq 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 .container
sahifaning 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-top
talab qilinishi mumkin.<body>
Shuni ham yodda tutingki, .sticky-top
har position: sticky
bir 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-scroll
Yiqilgan 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-height
yoki 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-x
ga 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-scroll
foydalaniladigan 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" href="#" tabindex="-1" aria-disabled="true">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-expand
sinfni qo'shing. Har doim yopiladigan navbarlar uchun hech qanday .navbar-expand
sinf 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-brand
Eng 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 id
va moslashda ishlaydi data-bs-target
, bu osonlik bilan amalga oshiriladi!
<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-controls
ishora qiluvchi atributga ega ekanligiga ishonch hosil qilishni tavsiya etamiz . id
Nazariy 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.
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-lg
bilan birlashtiriladi va .$breakpoints
scss/_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;
}
}
}
}
}