Navigbar
Dokumentācija un piemēri Bootstrap jaudīgajai, atsaucīgajai navigācijas galvenei, navigācijas joslai. Ietver atbalstu zīmola veidošanai, navigācijai un citam, tostarp atbalstam mūsu sabrukšanas spraudnim.
Kā tas strādā
Lūk, kas jums jāzina pirms darba sākšanas ar navigācijas joslu:
- Navigācijas joslām ir nepieciešams iesaiņojums
.navbar
ar.navbar-expand{-sm|-md|-lg|-xl|-xxl}
, lai pielāgotu sabrukšanas un krāsu shēmu klases. - Navigācijas joslas un to saturs pēc noklusējuma ir mainīgi. Mainiet konteineru , lai dažādos veidos ierobežotu to horizontālo platumu.
- Izmantojiet mūsu atstarpes un elastīgās lietderības klases, lai kontrolētu atstarpi un līdzinājumu navigācijas joslās.
- Navigācijas joslas pēc noklusējuma ir atsaucīgas, taču varat tās viegli modificēt, lai to mainītu. Reakcijas darbība ir atkarīga no mūsu Collapse JavaScript spraudņa.
- Nodrošiniet pieejamību, izmantojot
<nav>
elementu, vai, ja izmantojat vispārīgāku elementu, piemēram,<div>
, pievienojietrole="navigation"
katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem. - Norādiet pašreizējo vienumu, izmantojot
aria-current="page"
pašreizējo lapu vaiaria-current="true"
pašreizējo komplekta vienumu.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Atbalstīts saturs
Navigbars ir aprīkots ar iebūvētu atbalstu nedaudzām apakškomponentiem. Ja nepieciešams, izvēlieties kādu no šīm iespējām:
.navbar-brand
jūsu uzņēmuma, produkta vai projekta nosaukumam..navbar-nav
pilna augstuma un vieglai navigācijai (ieskaitot atbalstu nolaižamajām izvēlnēm)..navbar-toggler
izmantošanai ar mūsu sakļautības spraudni un citām navigācijas pārslēgšanas darbībām.- Elastības un atstarpju utilītas jebkuras formas vadīklām un darbībām.
.navbar-text
vertikāli centrētu teksta virkņu pievienošanai..collapse.navbar-collapse
navigācijas joslas satura grupēšanai un slēpšanai pēc vecāka pārtraukuma punkta.- Pievienojiet neobligātu
.navbar-scroll
, lai iestatītumax-height
un ritinātu izvērsto navigācijas joslas saturu .
Šis ir visu apakškomponentu piemērs, kas iekļauts adaptīvā gaismas tematikas navigācijas joslā, kas automātiski sakļaujas lg
(lielajā) pārtraukuma punktā.
<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>
Šajā piemērā tiek izmantotas fona ( bg-light
) un atstarpes ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) lietderības klases.
Zīmols
.navbar-brand
Var lietot lielākajai daļai elementu, taču vislabāk darbojas enkurs, jo dažiem elementiem var būt nepieciešamas utilīta klases vai pielāgoti stili .
Teksts
Pievienojiet tekstu elementam kopā ar .navbar-brand
klasi.
<!-- 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>
Attēls
Jūs varat aizstāt tekstu iekšpusē .navbar-brand
ar <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>
Attēls un teksts
Varat arī izmantot dažas papildu utilītas, lai vienlaikus pievienotu attēlu un tekstu. Ņemiet vērā pievienošanu .d-inline-block
un .align-text-top
uz <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
Navigācijas joslas navigācijas saites ir balstītas uz mūsu .nav
opcijām ar savām modifikācijas klasēm, un tām ir jāizmanto pārslēgšanas klases , lai nodrošinātu pareizu atsaucību. Navigācija navigācijas joslās arī palielināsies, lai aizņemtu pēc iespējas vairāk horizontālās vietas, lai jūsu navigācijas joslas saturs būtu droši saskaņots.
Pievienojiet .active
klasi, .nav-link
lai norādītu pašreizējo lapu.
Lūdzu, ņemiet vērā, ka atribūts jāpievieno arī aria-current
aktīvajam .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>
Un, tā kā mēs izmantojam klases mūsu navigācijas sistēmām, jūs varat pilnībā izvairīties no uz sarakstu balstītas pieejas, ja vēlaties.
<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>
Varat arī izmantot nolaižamās izvēlnes navigācijas joslā. Nolaižamajām izvēlnēm pozicionēšanai ir nepieciešams iesaiņojuma elements, tāpēc noteikti izmantojiet atsevišķus un ligzdotus elementus, .nav-item
kā .nav-link
parādīts tālāk.
<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>
Veidlapas
Ievietojiet dažādas veidlapas vadīklas un komponentus navigācijas joslā:
<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>
Tūlītējie pakārtotie elementi, kas tiek .navbar
izmantoti elastīgā izkārtojumā, un pēc noklusējuma tiks izmantoti justify-content: space-between
. Ja nepieciešams, izmantojiet papildu elastīgās utilītas , lai pielāgotu šo darbību.
<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>
Darbojas arī ievades grupas. Ja navigācijas josla ir visa veidlapa vai galvenokārt veidlapa, varat izmantot šo <form>
elementu kā konteineru un saglabāt daļu 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>
Šajās navigācijas joslas formās tiek atbalstītas arī dažādas pogas. Tas ir arī lielisks atgādinājums, ka vertikālās izlīdzināšanas utilītas var izmantot dažādu izmēru elementu līdzināšanai.
<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>
Teksts
Navigācijas joslās var būt teksta fragmenti, izmantojot .navbar-text
. Šī klase pielāgo teksta virkņu vertikālo līdzinājumu un horizontālo atstarpi.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Ja nepieciešams, sajauciet un saskaņojiet ar citiem komponentiem un utilītprogrammām.
<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>
Krāsu shēmas
Navigācijas joslas tēmu veidošana nekad nav bijusi vienkāršāka, pateicoties tematisko klašu un background-color
utilītu kombinācijai. Izvēlieties kādu no .navbar-light
lietošanai ar gaišām fona krāsām vai .navbar-dark
tumšām fona krāsām. Pēc tam pielāgojiet, izmantojot .bg-*
utilītas.
<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>
Konteineri
Lai gan tas nav nepieciešams, varat ietīt navigācijas joslu, .container
lai to centrētu lapā, taču ņemiet vērā, ka iekšējais konteiners joprojām ir nepieciešams. Vai arī varat pievienot konteineru iekšpusē, .navbar
lai centrētu tikai fiksētas vai statiskas augšējās navigācijas joslas saturu .
<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>
Izmantojiet jebkuru no adaptīvajiem konteineriem, lai mainītu navigācijas joslas satura attēlojuma platumu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Izvietojums
Izmantojiet mūsu pozīciju utilītas , lai novietotu navigācijas joslas nestatiskās pozīcijās. Izvēlieties fiksētu uz augšu, fiksētu uz leju vai pielīmētu augšpusē (ritina ar lapu, līdz tā sasniedz augšdaļu, pēc tam paliek tur). Fiksētās navigācijas joslas izmanto position: fixed
, kas nozīmē, ka tās tiek izņemtas no parastās DOM plūsmas, un tām var būt nepieciešams pielāgots CSS (piemēram, padding-top
uz <body>
), lai novērstu pārklāšanos ar citiem elementiem.
Ņemiet vērā arī to, ka .sticky-top
lietojumi position: sticky
, kas netiek pilnībā atbalstīti katrā pārlūkprogrammā .
<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>
Ritināšana
Pievienojiet .navbar-nav-scroll
kādam .navbar-nav
(vai citam navigācijas joslas apakškomponentam), lai iespējotu vertikālo ritināšanu sakļautās navigācijas joslas pārslēdzamajā saturā. Pēc noklusējuma ritināšana tiek aktivizēta 75vh
(vai 75% no skata loga augstuma), taču jūs varat to ignorēt, izmantojot vietējo CSS pielāgoto rekvizītu --bs-navbar-height
vai pielāgotos stilus. Lielākos skatu laukos, kad navigācijas josla ir izvērsta, saturs tiks parādīts tāpat kā noklusējuma navigācijas joslā.
Lūdzu, ņemiet vērā, ka šādai darbībai ir potenciāls trūkums: overflow
iestatījums overflow-y: auto
(šeit ir nepieciešams, lai ritinātu saturu) overflow-x
ir līdzvērtīgs auto
, kas apgriež daļu horizontālā satura.
Šeit ir piemērs navigācijas joslai, kurā tiek izmantots , .navbar-nav-scroll
ar style="--bs-scroll-height: 100px;"
dažām papildu piemales utilītprogrammām optimālai atstarpei.
<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>
Atsaucīga uzvedība
Navigācijas joslas var izmantot .navbar-toggler
, .navbar-collapse
un .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klases, lai noteiktu, kad to saturs sakļaujas aiz pogas. Kombinācijā ar citām utilītprogrammām varat viegli izvēlēties, kad rādīt vai slēpt konkrētus elementus.
Navigācijas joslām, kas nekad nesakļaujas, pievienojiet .navbar-expand
klasi navigācijas joslā. Navigācijas joslām, kas vienmēr sakļaujas, nepievienojiet nevienu .navbar-expand
klasi.
Pārslēdzējs
Navigācijas joslas pārslēgi pēc noklusējuma ir līdzināti pa kreisi, taču, ja tie seko kādam brālim, piemēram .navbar-brand
, , tie tiks automātiski līdzināti pa labi. Mainot marķējumu, tiks mainīts pārslēgšanas slēdža izvietojums. Tālāk ir sniegti dažādu pārslēgšanas stilu piemēri.
Netiek .navbar-brand
rādīts mazākajā pārtraukuma punktā:
<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>
Kreisajā pusē ir redzams zīmola nosaukums un labajā pusē ir pārslēdzējs:
<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>
Ar pārslēdzēju kreisajā pusē un zīmola nosaukumu labajā pusē:
<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>
Ārējais saturs
Dažkārt vēlaties izmantot sakukšanas spraudni, lai aktivizētu konteinera elementu saturam, kas strukturāli atrodas ārpus .navbar
. Tā kā mūsu spraudnis darbojas uz id
un data-bs-target
atbilst, tas ir viegli izdarāms!
<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>
Kad to darāt, ieteicams iekļaut papildu JavaScript, lai programmatiski pārvietotu fokusu uz konteineru, kad tas tiek atvērts. Pretējā gadījumā tastatūras lietotājiem un palīgtehnoloģiju lietotājiem, visticamāk, būs grūti atrast tikko atklāto saturu, jo īpaši, ja atvērtais konteiners atrodas pirms pārslēdzēja dokumenta struktūrā. Ieteicams arī pārliecināties, vai pārslēdzējam ir aria-controls
atribūts, kas norāda uz id
satura konteinera atribūtu. Teorētiski tas ļauj palīgtehnoloģiju lietotājiem pāriet tieši no pārslēga uz konteineru, ko tas kontrolē, taču pašlaik atbalsts tam ir diezgan neviendabīgs.
Sass
Mainīgie lielumi
$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;
Cilpa
Adaptīvās navigācijas joslas izvēršanas/saukšanas klases (piem., .navbar-expand-lg
) tiek apvienotas ar $breakpoints
karti un ģenerētas, izmantojot cilpu 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;
}
}
}
}
}