Documentație și exemple pentru antetul de navigare puternic și receptiv al Bootstrap, bara de navigare. Include suport pentru branding, navigare și multe altele, inclusiv suport pentru pluginul nostru restrâns.
Cum functioneaza
Iată ce trebuie să știți înainte de a începe să utilizați bara de navigare:
Barele de navigare necesită o împachetare .navbarcu .navbar-expand{-sm|-md|-lg|-xl}pentru restrângerea receptivă și clase de schemă de culori .
Barele de navigare și conținutul lor sunt fluide în mod implicit. Utilizați containere opționale pentru a limita lățimea orizontală.
Utilizați clasele noastre de utilitate de spațiere și flexibilitate pentru a controla spațierea și alinierea în barele de navigare.
Barele de navigare sunt receptive în mod implicit, dar le puteți modifica cu ușurință pentru a schimba asta. Comportamentul receptiv depinde de pluginul nostru restrâns JavaScript.
Barele de navigare sunt ascunse în mod implicit la imprimare. Forțați-le să fie tipărite prin adăugarea .d-printla .navbar. Vedeți clasa de utilitate de afișare .
Asigurați accesibilitatea utilizând un <nav>element sau, dacă utilizați un element mai generic, cum ar fi un <div>, adăugați o role="navigation"la fiecare bară de navigare pentru a o identifica în mod explicit ca regiune de reper pentru utilizatorii tehnologiilor de asistență.
Citiți mai departe pentru un exemplu și o listă de subcomponente acceptate.
Conținut acceptat
Navbar-urile vin cu suport încorporat pentru o mână de subcomponente. Alegeți dintre următoarele după cum este necesar:
.navbar-brandpentru numele companiei, produsului sau proiectului dvs.
.navbar-navpentru o navigare la înălțime completă și ușoară (inclusiv suport pentru meniuri derulante).
.navbar-togglerpentru utilizare cu pluginul nostru de restrângere și alte comportamente de comutare a navigației .
.form-inlinepentru orice controale și acțiuni de formular.
.navbar-textpentru adăugarea șirurilor de text centrate vertical.
.collapse.navbar-collapsepentru gruparea și ascunderea conținutului barei de navigare după un punct de întrerupere părinte.
Iată un exemplu de toate subcomponentele incluse într-o bară de navigare receptivă cu tematică luminoasă, care se prăbușește automat la punctul de lgîntrerupere (mare).
Acest exemplu folosește clase de utilitate color ( bg-light) și spațiere ( my-2, my-lg-0, mr-sm-0, ).my-sm-0
Marca
.navbar-brandPoate fi aplicat la majoritatea elementelor, dar o ancoră funcționează cel mai bine, deoarece unele elemente ar putea necesita clase de utilitate sau stiluri personalizate .
Adăugarea de imagini la .navbar-brandva necesita întotdeauna stiluri personalizate sau utilități pentru a dimensiona corect. Iată câteva exemple de demonstrat.
Nav
Legăturile de navigare din bara de navigare se bazează pe .navopțiunile noastre cu propria lor clasă modificatoare și necesită utilizarea claselor de comutare pentru un stil responsiv adecvat. Navigarea în barele de navigare va crește, de asemenea, pentru a ocupa cât mai mult spațiu orizontal posibil pentru a menține conținutul barei de navigare aliniat în siguranță.
Stările active—cu .active—pentru a indica pagina curentă pot fi aplicate direct la .nav-links sau la părinții lor imediati .nav-item.
Și pentru că folosim clase pentru navigarea noastră, puteți evita în întregime abordarea bazată pe liste dacă doriți.
Puteți utiliza, de asemenea, meniuri derulante în bara de navigare. Meniurile drop-down necesită un element de împachetare pentru poziționare, așa că asigurați-vă că utilizați elemente separate și imbricate pentru .nav-itemși .nav-linkașa cum se arată mai jos.
Forme
Plasați diferite controale de formular și componente într-o bară de navigare cu .form-inline.
Elementele de copii imediate în .navbarutilizarea aspectului flexibil și vor fi implicit justify-content: space-between. Utilizați utilitare flexibile suplimentare după cum este necesar pentru a ajusta acest comportament.
Grupurile de intrare funcționează, de asemenea:
Diverse butoane sunt acceptate și ca parte a acestor forme de bară de navigare. Acesta este, de asemenea, o reamintire grozavă că utilitățile de aliniere verticală pot fi folosite pentru a alinia elemente de diferite dimensiuni.
Text
Barele de navigare pot conține fragmente de text cu ajutorul .navbar-text. Această clasă ajustează alinierea verticală și spațierea orizontală pentru șirurile de text.
Se amestecă și se potrivește cu alte componente și utilități, după cum este necesar.
Scheme de culori
Tematica barei de navigare nu a fost niciodată mai ușoară datorită combinației de clase de tematică și background-colorutilități. Alegeți dintre .navbar-lightpentru utilizarea cu culori de fundal deschise sau .navbar-darkpentru culori de fundal închise. Apoi, personalizați cu .bg-*utilități.
Containere
Deși nu este obligatoriu, puteți împacheta o bară de navigare într-o .containerpentru a o centra pe o pagină sau puteți adăuga una în interior pentru a centra numai conținutul unei bare de navigare superioare fixe sau statice .
Când containerul se află în bara de navigare, umplutura orizontală a acestuia este eliminată la punctele de întrerupere mai mici decât .navbar-expand{-sm|-md|-lg|-xl}clasa specificată. Acest lucru asigură că nu dublăm umplutura în mod inutil pe ferestrele de vizualizare inferioare atunci când bara de navigare este restrânsă.
Plasarea
Utilizați utilitățile noastre de poziție pentru a plasa barele de navigare în poziții non-statice. Alegeți dintre fix în sus, fix în jos sau lipit în partea de sus (se derulează cu pagina până ajunge în sus, apoi rămâne acolo). Barele de navigare fixe folosesc position: fixed, ceea ce înseamnă că sunt extrase din fluxul normal al DOM și pot necesita CSS personalizat (de exemplu, padding-toppe <body>) pentru a preveni suprapunerea cu alte elemente.
Barele de navigare pot utiliza .navbar-toggler, .navbar-collapseși .navbar-expand{-sm|-md|-lg|-xl}clasele pentru a se schimba atunci când conținutul lor se prăbușește în spatele unui buton. În combinație cu alte utilități, puteți alege cu ușurință când să afișați sau să ascundeți anumite elemente.
Pentru barele de navigare care nu se restrâng niciodată, adăugați .navbar-expandclasa în bara de navigare. Pentru barele de navigare care se prăbușesc întotdeauna, nu adăugați nicio .navbar-expandclasă.
Comutator
Comutatoarele din bara de navigare sunt aliniate la stânga în mod implicit, dar dacă urmează un element frate, cum ar fi un .navbar-brand, vor fi aliniate automat la extrema dreaptă. Inversarea marcajului va inversa plasarea comutatorului. Mai jos sunt exemple de diferite stiluri de comutare.
Fără .navbar-brandafișare în cel mai mic punct de întrerupere:
Cu un nume de marcă afișat în stânga și comutator în dreapta:
Cu un comutator în stânga și numele mărcii în dreapta:
Conținut extern
Uneori doriți să utilizați pluginul de restrângere pentru a declanșa conținut ascuns în altă parte a paginii. Deoarece pluginul nostru funcționează pe idși data-targetpotrivire, asta se face cu ușurință!