Navbar
Dokumentacija in primeri za Bootstrapovo zmogljivo, odzivno navigacijsko glavo, navbar. Vključuje podporo za blagovno znamko, navigacijo, vtičnik za strnitev in drugo.
Kako deluje
Preden začnete uporabljati navbar, morate vedeti naslednje:
- Vrstice za krmarjenje zahtevajo ovoj
.navbar
za.navbar-expand{-sm|-md|-lg|-xl}
odzivno strnjenje in razrede barvne sheme . - Vrstice za krmarjenje in njihova vsebina so privzeto tekoče. Uporabite neobvezne posode , da omejite njihovo vodoravno širino.
- Uporabite naše pomožne razrede za razmik in upogibanje za nadzor razmika in poravnave v vrsticah za krmarjenje.
- Vrstice za krmarjenje so privzeto odzivne, vendar jih lahko preprosto spremenite, da to spremenite. Odzivnost je odvisna od našega vtičnika Collapse JavaScript.
- Vrstice za krmarjenje so med tiskanjem privzeto skrite. Prisilite njihovo tiskanje z dodajanjem
.d-print
v.navbar
. Oglejte si razred uporabnosti zaslona . - Zagotovite dostopnost z uporabo
<nav>
elementa ali, če uporabljate bolj splošen element, kot je<div>
, dodajterole="navigation"
v vsako vrstico za krmarjenje, da jo izrecno identificirate kot območje mejnika za uporabnike podpornih tehnologij.
prefers-reduced-motion
medijske poizvedbe. Oglejte si razdelek o
zmanjšanem gibanju v naši dokumentaciji o dostopnosti .
Podprta vsebina
Navbars ima vgrajeno podporo za peščico podkomponent. Po potrebi izberite med naslednjim:
.navbar-brand
za ime vašega podjetja, izdelka ali projekta..navbar-nav
za enostavno navigacijo v polni višini (vključno s podporo za spustne menije)..navbar-toggler
za uporabo z našim vtičnikom za strnitev in drugimi načini preklopa navigacije ..form-inline
za kakršne koli kontrole obrazca in dejanja..navbar-text
za dodajanje navpično centriranih nizov besedila..collapse.navbar-collapse
za združevanje in skrivanje vsebin navbara z nadrejeno prelomno točko.
Tukaj je primer vseh podkomponent, vključenih v odzivno svetlobno navigacijsko vrstico, ki se samodejno zruši na lg
(veliki) prelomni točki.
<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>
Ta primer uporablja razrede pripomočkov za barvo ( bg-light
) in razmik ( my-2
, my-lg-0
, mr-sm-0
, ).my-sm-0
Znamka
Lahko se .navbar-brand
uporabi za večino elementov, vendar sidro deluje najbolje, saj lahko nekateri elementi zahtevajo uporabne razrede ali sloge po meri.
<!-- 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>
Dodajanje slik .navbar-brand
bo verjetno vedno zahtevalo prilagojene sloge ali pripomočke za ustrezno velikost. Tukaj je nekaj primerov za prikaz.
<!-- 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
Navigacijske povezave Navbar gradijo na naših .nav
možnostih z lastnim modifikatorskim razredom in zahtevajo uporabo preklopnih razredov za pravilno odzivno oblikovanje. Navigacija v vrsticah za krmarjenje se bo prav tako povečala, da bo zavzela čim več vodoravnega prostora, da bo vsebina vrstice za krmarjenje varno poravnana.
Aktivna stanja—z—ki .active
označujejo trenutno stran, se lahko uporabijo neposredno za .nav-link
s ali njihove neposredne starše .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>
In ker za naše krmarjenje uporabljamo razrede, se lahko pristopu, ki temelji na seznamu, popolnoma izognete, če želite.
<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>
Uporabite lahko tudi spustne menije v vrstici za krmarjenje. Spustni meniji zahtevajo ovojni element za pozicioniranje, zato uporabite ločene in ugnezdene elemente za .nav-item
in .nav-link
, kot je prikazano spodaj.
<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>
Obrazci
Postavite različne kontrolnike obrazca in komponente v navbar z .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>
Neposredni podrejeni elementi .navbar
uporabljajo postavitev flex in bodo privzeto nastavljeni na justify-content: space-between
. Po potrebi uporabite dodatne pripomočke flex , da prilagodite to vedenje.
<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>
Delujejo tudi vnosne skupine:
<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>
Različni gumbi so podprti tudi kot del teh obrazcev navbara. To je tudi odličen opomnik, da lahko pripomočke za navpično poravnavo uporabite za poravnavo elementov različnih velikosti.
<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>
Besedilo
Navbars lahko vsebuje koščke besedila s pomočjo .navbar-text
. Ta razred prilagodi navpično poravnavo in vodoravni razmik za nize besedila.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Po potrebi mešajte in kombinirajte z drugimi komponentami in pripomočki.
<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>
Barvne sheme
Tematiziranje navbarske vrstice še nikoli ni bilo lažje zahvaljujoč kombinaciji razredov in background-color
pripomočkov za temiranje. Izberite .navbar-light
za uporabo s svetlimi barvami ozadja ali .navbar-dark
za temne barve ozadja. Nato prilagodite s .bg-*
pripomočki.
<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>
Zabojniki
Čeprav to ni obvezno, lahko vrstico za krmarjenje zavijete v , .container
da jo postavite na sredino strani. Lahko pa dodate vsebnik v .navbar
samo središče vsebine fiksne ali statične zgornje vrstice za krmarjenje .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Ko je vsebnik znotraj vaše vrstice za krmarjenje, se njegovo vodoravno oblazinjenje odstrani na prelomnih točkah, nižjih od vašega podanega .navbar-expand{-sm|-md|-lg|-xl}
razreda. To zagotavlja, da ne podvajamo po nepotrebnem oblazinjenja spodnjih vidnih oken, ko je vaša vrstica za krmarjenje strnjena.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Umestitev
Uporabite naše pripomočke za določanje položaja , da postavite vrstice za krmarjenje v nestatične položaje. Izbirate lahko med pritrjenim na vrhu, pritrjenim na dnu ali prilepljenim na vrh (pomika se s stranjo, dokler ne doseže vrha, nato tam ostane). Fiksne vrstice za krmarjenje uporabljajo position: fixed
, kar pomeni, da so potegnjene iz običajnega toka DOM in lahko zahtevajo CSS po meri (npr. padding-top
na <body>
), da preprečijo prekrivanje z drugimi elementi.
Upoštevajte tudi, da .sticky-top
uporablja position: sticky
, ki ni v celoti podprt v vseh brskalnikih .
<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>
Drsenje
Dodajte .navbar-nav-scroll
( .navbar-collapse
ali drugi podkomponenti vrstice za krmarjenje), da omogočite navpično drsenje znotraj preklopne vsebine strnjene vrstice za krmarjenje. Privzeto se pomikanje začne na 75vh
(ali 75 % višine vidnega polja), vendar lahko to preglasite z vgrajenimi slogi ali slogi po meri. Pri večjih pogledih, ko je vrstica za krmarjenje razširjena, bo vsebina prikazana kot v privzeti vrstici za krmarjenje.
Upoštevajte, da ima to vedenje potencialno pomanjkljivost overflow
—ko je nastavitev overflow-y: auto
(zahtevana za pomikanje po vsebini tukaj), overflow-x
je enakovredna auto
, kar bo obrezalo nekaj vodoravne vsebine.
Tukaj je primer vrstice za krmarjenje, ki uporablja .navbar-nav-scroll
z style="max-height: 100px;"
, z nekaj dodatnimi pripomočki za rob za optimalen razmik.
<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>
Odzivno vedenje
Vrstice za krmarjenje lahko uporabljajo razrede .navbar-toggler
, .navbar-collapse
, in .navbar-expand{-sm|-md|-lg|-xl}
za določanje, kdaj se njihova vsebina skrči za gumbom. V kombinaciji z drugimi pripomočki lahko preprosto izberete, kdaj želite prikazati ali skriti posamezne elemente.
Za vrstice za krmarjenje, ki se nikoli ne strnejo, dodajte .navbar-expand
razred v vrstico za krmarjenje. Za vrstice za krmarjenje, ki se vedno strnejo, ne dodajte nobenega .navbar-expand
razreda.
Preklopnik
Preklopniki Navbar so privzeto poravnani levo, a če sledijo sorodnemu elementu, kot je .navbar-brand
, bodo samodejno poravnani skrajno desno. Če razveljavite svojo oznako, boste obrnili postavitev preklopnika. Spodaj so primeri različnih stilov preklopa.
Brez .navbar-brand
prikaza na najmanjši prelomni točki:
<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>
Z imenom blagovne znamke, prikazanim na levi, in preklopnikom na desni:
<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>
S preklopnikom na levi in imenom blagovne znamke na desni:
<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>
Zunanja vsebina
Včasih želite uporabiti vtičnik za strnitev, da sprožite element vsebnika za vsebino, ki je strukturno zunaj .navbar
. Ker naš vtičnik deluje na id
in se data-target
ujema, je to preprosto!
<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>
Ko to storite, priporočamo, da vključite dodaten JavaScript, da programsko premaknete fokus na vsebnik, ko se odpre. V nasprotnem primeru bodo uporabniki tipkovnice in uporabniki podpornih tehnologij verjetno težko našli novo razkrito vsebino – še posebej, če je vsebnik, ki je bil odprt, pred preklopnikom v strukturi dokumenta. Priporočamo tudi, da se prepričate, da ima preklopnik aria-controls
atribut, ki kaže na id
vsebnika vsebine. Teoretično to omogoča uporabnikom podporne tehnologije, da skočijo neposredno s preklopnika na vsebnik, ki ga nadzoruje, vendar je podpora za to trenutno precej neenakomerna.