Navigacijos juosta
„Bootstrap“ galingos, reaguojančios naršymo antraštės – naršymo juostos – dokumentacija ir pavyzdžiai. Apima prekės ženklo kūrimo, naršymo ir kt. palaikymą, įskaitant sutraukimo papildinio palaikymą.
Kaip tai veikia
Štai ką reikia žinoti prieš pradėdami naudoti naršymo juostą:
- Navigacijos juostoms reikalingas įvyniojimas
.navbar
, kad būtų galima greitai sutraukti.navbar-expand{-sm|-md|-lg|-xl|-xxl}
ir spalvų schemą . - Naršymo juostos ir jų turinys pagal numatytuosius nustatymus yra sklandūs. Pakeiskite konteinerį , kad įvairiais būdais apribotumėte jų horizontalų plotį.
- Norėdami valdyti tarpą ir lygiavimą naršymo juostose, naudokite mūsų tarpų ir lankstumo naudingumo klases.
- Naršymo juostos pagal numatytuosius nustatymus reaguoja, tačiau galite lengvai jas pakeisti, kad tai pakeistumėte. Reagavimo elgsena priklauso nuo mūsų Collapse JavaScript papildinio.
- Užtikrinkite prieinamumą naudodami
<nav>
elementą arba, jei naudojate bendresnį elementą, pvz.,<div>
, pridėkite arole="navigation"
prie kiekvienos naršymo juostos, kad aiškiai identifikuotumėte ją kaip orientyrą pagalbinių technologijų naudotojams. - Nurodykite esamą elementą naudodami
aria-current="page"
dabartiniam puslapiui arbaaria-current="true"
dabartiniam rinkinio elementui.
prefers-reduced-motion
medijos užklausos. Žr
. mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .
Palaikomas turinys
Navigacijos juostose yra įmontuotas kelių papildomų komponentų palaikymas. Jei reikia, pasirinkite iš šių:
.navbar-brand
jūsų įmonės, produkto ar projekto pavadinimo..navbar-nav
viso aukščio ir lengvo svorio navigacijai (įskaitant išskleidžiamųjų meniu palaikymą)..navbar-toggler
skirtas naudoti su mūsų sutraukimo papildiniu ir kitais naršymo perjungimo veiksmais.- Lankstumo ir tarpų naudojimo priemonės bet kokiems formos valdikliams ir veiksmams.
.navbar-text
vertikaliai centruotoms teksto eilutėms pridėti..collapse.navbar-collapse
grupuoti ir paslėpti naršymo juostos turinį pagal pirminį lūžio tašką.- Pridėkite pasirenkamą
.navbar-scroll
, kad nustatytumėtemax-height
ir slinktumėte išplėstos naršymo juostos turinį .
Pateikiame visų antrinių komponentų, įtrauktų į jautrią šviesos temos naršymo juostą, kuri automatiškai susitraukia ties lg
(didelė) pertraukos taške, pavyzdys.
<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>
Šiame pavyzdyje naudojamos fono ( bg-light
) ir tarpų ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) naudingumo klasės.
Prekės ženklas
Galima .navbar-brand
pritaikyti daugeliui elementų, tačiau geriausiai veikia inkaras, nes kai kuriems elementams gali prireikti naudingumo klasių arba pasirinktinių stilių.
Tekstas
Pridėkite tekstą elemente su .navbar-brand
klase.
<!-- 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>
Vaizdas
Galite pakeisti .navbar-brand
tekstą <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>
Vaizdas ir tekstas
Taip pat galite naudoti keletą papildomų paslaugų, kad vienu metu pridėtumėte vaizdą ir tekstą. Atkreipkite dėmesį į pridėjimą .d-inline-block
ir .align-text-top
ant <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
Naršymo juostos naršymo nuorodos remiasi mūsų .nav
parinktimis su savo modifikavimo klase ir reikalauja naudoti perjungimo klases , kad būtų tinkamai reaguojama. Naršymas naršymo juostose taip pat padidės, kad užimtų kuo daugiau horizontalios vietos, kad naršymo juostos turinys būtų saugiai suderintas.
Pridėkite .active
klasę, .nav-link
kad nurodytumėte dabartinį puslapį.
Atkreipkite dėmesį, kad atributą taip pat turėtumėte pridėti aria-current
prie aktyvaus .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>
Ir kadangi savo navigacijoje naudojame klases, galite visiškai išvengti sąrašu pagrįsto metodo, jei norite.
<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>
Taip pat naršymo juostoje galite naudoti išskleidžiamuosius meniu. Išskleidžiamajame meniu reikalingas apvyniojimo elementas, kad būtų galima nustatyti padėtį, todėl būtinai naudokite atskirus ir įdėtus elementus, skirtus .nav-item
ir .nav-link
kaip parodyta toliau.
<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>
Formos
Naršymo juostoje įdėkite įvairius formos valdiklius ir komponentus:
<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>
Neatidėliotini antriniai .navbar
naudojimo lankstaus išdėstymo elementai ir pagal numatytuosius nustatymus bus justify-content: space-between
. Jei reikia, naudokite papildomas lanksčias priemones , kad sureguliuotumėte šį elgesį.
<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>
Taip pat veikia įvesties grupės. Jei naršymo juosta yra visa forma arba dažniausiai forma, galite naudoti <form>
elementą kaip konteinerį ir išsaugoti šiek tiek 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>
Įvairūs mygtukai taip pat palaikomi kaip šių naršymo juostos formų dalis. Tai taip pat puikus priminimas, kad vertikalaus lygiavimo priemonės gali būti naudojamos skirtingų dydžių elementams sulygiuoti.
<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>
Tekstas
Naršymo juostose gali būti teksto fragmentų naudojant .navbar-text
. Ši klasė koreguoja vertikalų lygiavimą ir horizontalų tarpą teksto eilutėms.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Jei reikia, sumaišykite ir suderinkite su kitais komponentais ir komunalinėmis priemonėmis.
<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>
Spalvų schemos
Sukurti naršymo juostos temas dar niekada nebuvo taip paprasta dėl teminių klasių ir background-color
paslaugų derinio. Pasirinkite iš .navbar-light
šviesių fono spalvų arba .navbar-dark
tamsių fono spalvų. Tada tinkinkite naudodami .bg-*
komunalines paslaugas.
<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>
Konteineriai
Nors tai nebūtina, naršymo juostą galite apvynioti a, .container
kad ji būtų centre, tačiau atminkite, kad vidinis konteineris vis tiek reikalingas. Arba galite pridėti talpyklą viduje, .navbar
kad centre būtų tik fiksuotos arba statinės viršutinės naršymo juostos turinys .
<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>
Naudokite bet kurį iš interaktyvių konteinerių, kad pakeistumėte naršymo juostos turinio pateikimo platumą.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Įdėjimas
Naudokite mūsų padėties įrankius , kad nustatytumėte naršymo juostas į nestatinę padėtį. Pasirinkite iš fiksuoto į viršų, pritvirtintą prie apačios arba priklijuotą prie viršaus (slenka su puslapiu, kol pasiekia viršų, tada ten lieka). Fiksuotose naršymo juostose naudojama position: fixed
, tai reiškia, kad jos paimamos iš įprasto DOM srauto ir gali prireikti tinkinto CSS (pvz., padding-top
) <body>
, kad būtų išvengta persidengimo su kitais elementais.
Taip pat atminkite, kad .sticky-top
naudoja position: sticky
, kuri nėra visiškai palaikoma visose naršyklėse .
<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>
Slinkimas
Pridėkite .navbar-nav-scroll
prie .navbar-nav
(ar kito naršymo juostos antrinio komponento), kad įgalintumėte vertikalų slinkimą perjungiamame sutrauktos naršymo juostos turinyje. Pagal numatytuosius nustatymus slinkimas pradedamas esant 75vh
(arba 75 % peržiūros srities aukščio), tačiau galite tai nepaisyti naudodami vietinę CSS tinkintą ypatybę --bs-navbar-height
arba pasirinktinius stilius. Didesnėse peržiūros srityse, kai naršymo juosta išskleista, turinys bus rodomas taip, kaip ir numatytojoje naršymo juostoje.
Atkreipkite dėmesį, kad toks elgesys turi galimą trūkumą – overflow
kai nustatymas overflow-y: auto
(būtinas norint slinkti čia) overflow-x
yra lygiavertis auto
, kuris apkarpys tam tikrą horizontalų turinį.
Štai pavyzdys, kaip naršymo juosta naudojama .navbar-nav-scroll
su style="--bs-scroll-height: 100px;"
, su kai kuriomis papildomomis paraštės programomis, kad būtų optimalus tarpas.
<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>
Atsakingas elgesys
Naršymo juostos gali naudoti .navbar-toggler
, .navbar-collapse
ir .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klases, kad nustatytų, kada jų turinys susitraukia už mygtuko. Kartu su kitomis programomis galite lengvai pasirinkti, kada rodyti arba slėpti tam tikrus elementus.
Jei naršymo juostos niekada nesutraukia, pridėkite .navbar-expand
klasę naršymo juostoje. Prie naršymo juostų, kurios visada sutraukiamos, nepridėkite jokios .navbar-expand
klasės.
Perjungiklis
Naršymo juostos perjungikliai pagal numatytuosius nustatymus yra sulygiuoti kairėje, bet jei jie seka brolio elementą, pvz. .navbar-brand
, , jie bus automatiškai sulygiuoti į dešinę. Jei pakeisite žymėjimą, perjungiklio vieta bus pakeista. Žemiau pateikiami skirtingų perjungimo stilių pavyzdžiai.
Nerodoma .navbar-brand
mažiausioje pertraukos taške:
<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>
Kairėje rodomas prekės pavadinimas, o dešinėje – perjungiklis:
<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>
Su perjungikliu kairėje ir prekės pavadinimu dešinėje:
<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>
Išorinis turinys
Kartais norite naudoti sutraukimo papildinį, kad suaktyvintumėte sudėtinio rodinio elementą turiniui, kuris struktūriškai yra už .navbar
. Kadangi mūsų papildinys veikia id
ir data-bs-target
atitinka, tai padaryti nesunku!
<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>
Kai tai padarysite, rekomenduojame įtraukti papildomą „JavaScript“, kad būtų programiškai perkeltas dėmesys į konteinerį, kai jis atidaromas. Priešingu atveju klaviatūros ir pagalbinių technologijų naudotojams greičiausiai bus sunku rasti naujai atskleistą turinį – ypač jei atidarytas konteineris yra prieš perjungiklį dokumento struktūroje. Taip pat rekomenduojame įsitikinti, kad perjungiklis turi aria-controls
atributą, nukreipiantį į id
turinio sudėtinio rodinio atributą. Teoriškai tai leidžia pagalbinių technologijų naudotojams pereiti tiesiai iš perjungiklio į jo valdomą talpyklą, tačiau šiuo metu tai yra gana nevienoda.
Sass
Kintamieji
$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;
Kilpa
Interaktyvios naršymo juostos išplėtimo / sutraukimo klasės (pvz., .navbar-expand-lg
) sujungiamos su $breakpoints
žemėlapiu ir generuojamos naudojant kilpą 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;
}
}
}
}
}