Navbar
Bootstrap-ning kuchli, sezgir navigatsiya sarlavhasi, navigatsiya paneli uchun hujjatlar va misollar. Brendlash, navigatsiya, plaginni yig‘ish va boshqalarni 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}
- Navbarlar va ularning tarkibi sukut bo'yicha suyuqlikdir. Gorizontal kengligini cheklash uchun ixtiyoriy idishlardan foydalaning .
- Navbarlar ichidagi oraliq va hizalanishni boshqarish uchun bizning intervalli va moslashuvchan yordamchi sinflarimizdan foydalaning.
- Navbarlar sukut bo'yicha javob beradi, lekin uni o'zgartirish uchun ularni osongina o'zgartirishingiz mumkin. Javob beruvchi xatti-harakat bizning Collapse JavaScript plaginimizga bog'liq.
- Chop etishda navbatlar sukut bo'yicha yashirin bo'ladi. ga qo'shish orqali ularni chop
.d-print
etishga majbur qiling.navbar
. Displey yordam dasturi sinfiga qarang . - Element yordamida kirish imkoniyatini taʼminlang
<nav>
yoki agar , kabi umumiyroq elementdan foydalansangiz, har bir navbarga “a” belgisini<div>
qoʻshib,role="navigation"
uni yordamchi texnologiyalar foydalanuvchilari uchun moʻljallangan hudud sifatida aniq belgilang.
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..form-inline
har qanday shakl nazorati va harakatlari uchun..navbar-text
vertikal markazlashtirilgan matn satrlarini qo'shish uchun..collapse.navbar-collapse
navbar tarkibini asosiy to'xtash nuqtasi bo'yicha guruhlash va yashirish uchun.
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">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Bu misol rang ( bg-light
) va intervalli ( my-2
, my-lg-0
, mr-sm-0
, my-sm-0
) yordamchi sinflardan foydalanadi.
Brend
Ko'pgina elementlarga qo'llanilishi mumkin, ammo langar eng .navbar-brand
yaxshi ishlaydi, chunki ba'zi elementlar yordam sinflari yoki maxsus uslublarni talab qilishi mumkin.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
Tasvirlarga rasm qo'shish .navbar-brand
har doim to'g'ri o'lcham uchun maxsus uslublar yoki yordamchi dasturlarni talab qilishi mumkin. Bu erda ko'rsatish uchun ba'zi misollar.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</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.
.active
Joriy sahifani ko'rsatish uchun faol holatlar - bilan - to'g'ridan-to'g'ri .nav-link
s yoki ularning bevosita ota-onasiga qo'llanilishi mumkin .nav-item
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</nav>
Va biz navlar uchun darslardan foydalanganimiz sababli, agar xohlasangiz, ro'yxatga asoslangan yondashuvdan butunlay qochishingiz mumkin.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</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">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Shakllar
Har xil shakl boshqaruvi va komponentlarini navbar paneliga joylashtiring .form-inline
.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
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">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Kirish guruhlari ham ishlaydi:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Ushbu navbar shakllarining bir qismi sifatida turli tugmalar ham qo'llab-quvvatlanadi. Bu, shuningdek, vertikal hizalama yordam dasturlari turli o'lchamdagi elementlarni tekislash uchun ishlatilishi mumkinligini eslatib turadi.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Matn
Navbarlar yordamida matn bitlari bo'lishi mumkin .navbar-text
. Bu sinf matn satrlari uchun vertikal tekislash va gorizontal oraliqlarni sozlaydi.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Agar kerak bo'lsa, boshqa komponentlar va yordamchi dasturlar bilan aralashtiring va moslang.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Rang sxemalari
Theming the navbar has never been easier thanks to the combination of theming classes and background-color
utilities. Choose from .navbar-light
for use with light background colors, or .navbar-dark
for dark background colors. Then, customize with .bg-*
utilities.
<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>
Containers
Although it’s not required, you can wrap a navbar in a .container
to center it on a page. Or you can add a container inside the .navbar
to only center the contents of a fixed or static top navbar.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl}
class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placement
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed
, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top
on the <body>
) to prevent overlap with other elements.
Also note that .sticky-top
uses position: sticky
, which isn’t fully supported in every browser.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Scrolling
Add .navbar-nav-scroll
to a .navbar-collapse
(or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at 75vh
(or 75% of the viewport height), but you can override that with inline or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
Please note that this behavior comes with a potential drawback of overflow
—when setting overflow-y: auto
(required to scroll the content here), overflow-x
is the equivalent of auto
, which will crop some horizontal content.
Here’s an example navbar using .navbar-nav-scroll
with style="max-height: 100px;"
, with some extra margin utilities for optimum spacing.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-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">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Responsive behaviors
Navbars can use .navbar-toggler
, .navbar-collapse
, and .navbar-expand{-sm|-md|-lg|-xl}
classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand
class on the navbar. For navbars that always collapse, don’t add any .navbar-expand
class.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand
, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
With no .navbar-brand
shown at the smallest breakpoint:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
With a brand name shown on the left and toggler on the right:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
With a toggler on the left and brand name on the right:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
External content
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar
. Because our plugin works on the id
and data-target
matching, that’s easily done!
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
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.