Navbar
Dokumentacija in primeri za Bootstrapovo zmogljivo, odzivno navigacijsko glavo, navbar. Vključuje podporo za blagovno znamko, navigacijo in drugo, vključno s podporo za naš vtičnik za strnitev.
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.
Preberite primer in seznam podprtih podkomponent.
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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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" href="#">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
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.0/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.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</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" href="#">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">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="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
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>
Po potrebi uskladite vsebino svojih vgrajenih obrazcev s pripomočki.
<nav class="navbar navbar-light bg-light justify-content-between">
<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>
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>
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.
Čeprav to ni obvezno, lahko vrstico za krmarjenje zavijete v , .container
da jo postavite na sredino strani, ali jo dodate znotraj, da sredinsko postavite samo vsebino 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>
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>
Navbars lahko uporabljajo razrede .navbar-toggler
, .navbar-collapse
, in .navbar-expand{-sm|-md|-lg|-xl}
za spreminjanje, ko se njihova vsebina strne 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.
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 najnižji 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" href="#">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" href="#">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" href="#">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>
Včasih želite uporabiti vtičnik za strnitev, da sprožite skrito vsebino drugje na strani. Ker naš vtičnik deluje na id
in se data-target
ujema, je to preprosto!
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<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>