Навбар
Ҳуҷҷатҳо ва мисолҳо барои сарлавҳаи навигатсионии пурқувват ва ҷавобгӯи Bootstrap, навбар. Дастгирии брендинг, паймоиш ва ғайраро дар бар мегирад, аз ҷумла дастгирии плагини шикастани мо.
Он чӣ гуна кор мекунад
Ин аст он чизе ки шумо бояд пеш аз оғози кор бо навор донед:
- Навбарҳо барои синфҳои реаксияи рангҳо ва реаксияи реаксия печонидани онро
.navbar
талаб мекунанд ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Навбарҳо ва мундариҷаи онҳо ба таври нобаёнӣ моеъ мебошанд. Контейнерро иваз кунед , то паҳнои уфуқии онҳоро бо роҳҳои гуногун маҳдуд кунед.
- Барои назорати фосила ва ҳамворкунӣ дар дохили наворҳо синфҳои фосилавӣ ва фасеҳро истифода баред .
- Навбарҳо бо нобаёнӣ ҷавоб медиҳанд, аммо шумо метавонед онҳоро ба осонӣ тағир диҳед, то онро тағир диҳед. Рафтори ҷавобӣ аз плагини Colapse JavaScript-и мо вобаста аст.
- Бо истифода аз як унсур дастрасиро таъмин кунед
<nav>
ё агар унсури умумӣтаре ба мисли , истифода шавад, ба ҳар як навор<div>
илова кунед,role="navigation"
то онро ба таври возеҳ ҳамчун минтақаи муҳим барои корбарони технологияҳои ёрирасон муайян кунед. - Ҷузъи ҷориро бо истифода
aria-current="page"
аз саҳифаи ҷорӣ ёaria-current="true"
ҷузъи ҷорӣ дар маҷмӯа нишон диҳед.
prefers-reduced-motion
дархости медиа вобаста аст. Ба
қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .
Мазмуни дастгирӣ
Навбарҳо бо дастгирии дарунсохт барои як чанд зеркомпонентҳо меоянд. Ҳангоми зарурат аз инҳо интихоб кунед:
.navbar-brand
барои ширкат, маҳсулот ё номи лоиҳаи шумо..navbar-nav
барои паймоиши пурра ва сабук (аз ҷумла дастгирии афтандаҳо)..navbar-toggler
барои истифода бо плагини пошхӯрии мо ва дигар рафтори ивазкунии паймоиш .- Утилитҳои фасеҳ ва фосила барои ҳама гуна назорат ва амалҳои шакл.
.navbar-text
барои илова кардани сатрҳои амудии марказонидашудаи матн..collapse.navbar-collapse
барои гурӯҳбандӣ ва пинҳон кардани мундариҷаи навбар аз ҷониби нуқтаи рахнашавии волидайн.- Иловаи ихтиёрӣ
.navbar-scroll
барои гузоштани amax-height
ва ҳаракат кардани мундариҷаи васеъшудаи навбар .
Дар ин ҷо як мисоли ҳамаи зеркомпонентҳое, ки ба наворҳои мавзӯи рӯшноӣ дохил карда шудаанд, ки ба таври худкор дар нуқтаи шикастани lg
(калон) фурӯ меафтанд.
<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>
Ин мисол синфҳои утилитаҳои замина ( bg-light
) ва фосила ( my-2
, my-lg-0
, me-sm-0
, ) -ро истифода мебарад.my-sm-0
Бренд
Он .navbar-brand
метавонад ба аксари элементҳо татбиқ карда шавад, аммо лангар беҳтар кор мекунад, зеро баъзе элементҳо метавонанд синфҳои утилита ё услубҳои фармоиширо талаб кунанд.
Матн
Матни худро дар дохили як элемент бо .navbar-brand
синф илова кунед.
<!-- 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>
Тасвир
Шумо метавонед матни дохили онро .navbar-brand
бо <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>
Тасвир ва матн
Шумо инчунин метавонед якчанд утилитаҳои иловагиро барои илова кардани тасвир ва матн дар як вақт истифода баред. Ба иловаи .d-inline-block
ва .align-text-top
дар <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>
Нав
Истинодҳои навигатсионии Navbar дар асоси .nav
имконоти мо бо синфи тағирдиҳандаи худ сохта мешаванд ва истифодаи синфҳои гузаришро барои ороиши дурусти мувофиқ талаб мекунанд. Навигатсия дар наворҳо инчунин афзоиш хоҳад ёфт, то ки фазои уфуқӣ то ҳадди имкон ишғол шавад , то мундариҷаи навбарии шумо ба таври бехатар мувофиқат кунад.
Барои нишон додани саҳифаи ҷорӣ .active
синфро илова кунед..nav-link
Лутфан қайд кунед, ки шумо инчунин бояд aria-current
атрибутро дар фаъол илова кунед .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>
Ва азбаски мо дарсҳоро барои навгониҳои худ истифода мебарем, шумо метавонед аз равиши рӯйхат комилан канорагирӣ кунед, агар хоҳед.
<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>
Шумо инчунин метавонед афтандаҳоро дар навори худ истифода баред. Менюҳои афтанда барои ҷойгиркунӣ унсури печонидашударо талаб мекунанд, аз ин рӯ боварӣ ҳосил кунед, ки унсурҳои алоҳида ва лонаро барои .nav-item
ва .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>
Шаклҳо
Дар дохили навор идоракунӣ ва ҷузъҳои гуногуни формаро ҷойгир кунед:
<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>
Унсурҳои кӯдаки фаврии .navbar
истифода тарҳбандии чандир доранд ва пешфарз ба justify-content: space-between
. Барои ислоҳ кардани ин рафтор, аз утилитаҳои иловагии фасеҳ истифода баред .
<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>
Гурӯҳҳои воридотӣ низ кор мекунанд. Агар нави панели шумо як шакли пурра ё асосан шакл бошад, шумо метавонед <form>
элементро ҳамчун контейнер истифода баред ва каме HTML-ро захира кунед.
<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>
Тугмаҳои гуногун ҳамчун як қисми ин шаклҳои навбар низ дастгирӣ карда мешаванд. Ин инчунин як ёдраскунандаи олӣ аст, ки утилитаҳои ҳамоҳангсозии амудиро барои мувофиқ кардани унсурҳои андозаашон гуногун истифода бурдан мумкин аст.
<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>
Матн
Навбарҳо метавонанд битҳои матнро бо ёрии .navbar-text
. Ин синф ҳамоҳангсозии амудӣ ва фосилаи уфуқӣ барои сатрҳои матнро танзим мекунад.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Агар лозим бошад, бо дигар ҷузъҳо ва утилитаҳо омехта кунед ва мувофиқ кунед.
<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>
Схемаи рангҳо
Ба шарофати омезиши дарсҳои мавзӯъсозӣ ва утилитаҳо мавзӯҳои навбарро ҳеҷ гоҳ осон набуд background-color
. .navbar-light
Барои истифода бо рангҳои пасзаминаи сабук ё .navbar-dark
рангҳои пасзаминаи торик интихоб кунед . Сипас, бо .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>
Контейнерҳо
Гарчанде ки ин талаб карда намешавад, шумо метавонед навбарро дар як пӯшед, .container
то онро дар як саҳифа ба марказ гузоред – гарчанде ки дар хотир доред, ки контейнери дохилӣ ҳанӯз лозим аст. Ё шумо метавонед як контейнерро дар дохили он илова кунед, .navbar
то мундариҷаи навбари болоии собит ё статикиро ба марказ гузоред .
<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>
Барои тағир додани то чӣ андоза васеъ будани мундариҷа дар лавҳаи шумо аз ҳама гуна контейнерҳои ҷавобгӯ истифода баред.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Ҷойгиркунӣ
Утилитҳои мавқеъи моро барои ҷойгир кардани навбарҳо дар мавқеъҳои ғайристатикӣ истифода баред. Аз собит то боло, собит ба поён ё часпида ба боло интихоб кунед (бо саҳифа то ба боло ҳаракат мекунад, сипас дар он ҷо мемонад). Навбарҳои собит -ро истифода мебаранд position: fixed
, ки маънои онро дорад, ки онҳо аз ҷараёни муқаррарии DOM кашида шудаанд ва метавонанд CSS-и фармоиширо талаб кунанд (масалан, padding-top
дар <body>
).
Инчунин қайд кунед, ки .sticky-top
истифода мебарад position: sticky
, ки дар ҳама браузерҳо пурра дастгирӣ намешавад .
<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>
Ҳаракат
Ба .navbar-nav-scroll
як .navbar-nav
(ё дигар зеркомпоненти навбар) илова кунед, то ҳаракати амудиро дар дохили мундариҷаи ивазшавандаи наворҳои пошхӯрда фаъол созед. Бо нобаёнӣ, ҳаракат дар 75vh
(ё 75% баландии намоишгоҳ) оғоз мешавад, аммо шумо метавонед онро бо амволи фармоишии маҳаллии CSS --bs-navbar-height
ё сабкҳои фармоишӣ бекор кунед. Дар намоишгоҳҳои калонтар, вақте ки навор васеъ карда мешавад, мундариҷа тавре пайдо мешавад, ки дар наворҳои пешфарз пайдо мешавад.
Лутфан таваҷҷӯҳ намоед, ки ин рафтор бо нуқсони эҳтимолии overflow
-ҳангоми танзим overflow-y: auto
(барои ҳаракат кардани мундариҷа дар ин ҷо лозим аст) overflow-x
муодили auto
, аст, ки баъзе мундариҷаи уфуқӣ бурида мешавад.
Дар ин ҷо мисоли навбар истифода мешавад , .navbar-nav-scroll
ки бо 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>
Рафторҳои ҷавобӣ
Навбарҳо метавонанд аз .navbar-toggler
, .navbar-collapse
, ва .navbar-expand{-sm|-md|-lg|-xl|-xxl}
синфҳо истифода баранд, то муайян кунанд, ки кай мундариҷаи онҳо дар паси тугма фурӯ меафтад. Дар якҷоягӣ бо утилитаҳои дигар, шумо метавонед ба осонӣ интихоб кунед, ки кай нишон додан ё пинҳон кардани унсурҳои мушаххасро интихоб кунед.
Барои наворҳое, ки ҳеҷ гоҳ вайрон намешаванд, .navbar-expand
синфро дар навор илова кунед. Барои наворҳое, ки ҳамеша хароб мешаванд, ягон .navbar-expand
синф илова накунед.
Тоглер
Гузаришҳои Навбар ба таври нобаёнӣ ба тарафи чап мувофиқ карда мешаванд, аммо агар онҳо ба як унсури бародар ба мисли a пайравӣ кунанд .navbar-brand
, онҳо ба таври худкор ба тарафи рости дур мувофиқ карда мешаванд. Баргардонидани аломати шумо ҷойгиршавии гузаришро тағир медиҳад. Дар зер намунаҳои услубҳои гуногуни гузариш оварда шудаанд.
Дар .navbar-brand
нуқтаи хурдтарин нуқта нишон дода нашудааст:
<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>
Бо номи бренд дар тарафи чап ва гузариш дар тарафи рост:
<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>
Бо гузариш дар чап ва номи бренд дар тарафи рост:
<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>
Мазмуни беруна
Баъзан шумо мехоҳед плагини пошхӯриро истифода баред, то як унсури контейнерро барои мундариҷае, ки сохторӣ берун аз .navbar
. Азбаски плагини мо дар мувофиқ id
ва data-bs-target
мувофиқ кор мекунад, ин ба осонӣ анҷом дода мешавад!
<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>
Вақте ки шумо ин корро мекунед, мо тавсия медиҳем, ки JavaScript-и иловагиро дохил кунед, то фокусро ба таври барномавӣ ба контейнер ҳангоми кушодани он интиқол диҳед. Дар акси ҳол, корбарони клавиатура ва корбарони технологияҳои ёрирасон дар ёфтани мундариҷаи нав ошкоршуда душворӣ мекашанд - алахусус агар контейнери кушодашуда пеш аз гузариш дар сохтори ҳуҷҷат ояд. Мо инчунин тавсия медиҳем, ки боварӣ ҳосил кунем, ки гузаранда дорои атрибутест aria-controls
, ки ба id
контейнери мундариҷа ишора мекунад. Дар назария, ин ба корбарони технологияи ёрирасон имкон медиҳад, ки мустақиман аз гузариш ба контейнере, ки он идора мекунад, ҷаҳида шаванд - аммо дастгирии ин ҳоло хеле ночиз аст.
Сасс
Тағйирёбандаҳо
$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;
Доира
Синфҳои тавсеа/барҳамдиҳии навбарои ҷавобгӯ (масалан, .navbar-expand-lg
) бо $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;
}
}
}
}
}