Come creare/progettare una barra navalmente in bootstrap 5
In Bootstrap 5, la barra NAV viene utilizzata per collegare e collegare tutte le pagine Web relative a un sito Web e un utente può spostarsi facilmente tra le pagine. La barra di navigazione è un componente molto importante di un sito Web che contiene un logo del marchio, i nomi delle pagine e i loro collegamenti e una casella di ricerca in base ai requisiti dell'utente.
Questo articolo ti dà una conoscenza dettagliata su
- Creazione di una barra di navigazione
- Navbar con menu a discesa
- Navbar con forma in linea
- Navbar pieghevole
- Cambiando i colori della barra navari
Come creare una barra navigare
Per creare un uso di navigazione, .Navbar classe e per allineare il menu in una riga utilizzo .Navbar-Expand-XXL/LG/MD/SM. Per scegliere tra l'uso dell'umore leggero o scuro .Navbar-Light/Dark e per dare uno sfondo a un uso di navigazione .BG-Light.
Codice:
Bootstrap 5 Navbar
Ecco come crei una barra navalmente in bootstrap 5.
Navbar con menu a discesa
Per creare una barra di navigazione con menu a discesa usi .classe a discesa con .Classe nav-Item in
Codice
Ecco come viene creata una barra di navigazione con un menu a discesa.
Navbar con forma in linea
Per creare una barra di navigazione con forma in linea, utilizzare Tag con la classe .in linea e avvolgerlo attorno a un Tag con la classe .forma di controllo e aggiungere un pulsante usando un Tag con la classe .Btn, Btn-Success, subito dopo il Tag di chiusura.
Ecco come crei una barra navalmente con forma in linea.
Navbar pieghevole
Per creare una barra di navigazione pieghevole, usa un file con il .crollo E .Navbar-Collapse classi. Dai un univoco id = "" al div e poi avvolgi il div attorno al tuo E
tag. Per abilitare Navbar colpitobile, creare un tag sopra .crollo div con il .Navbar-Toggler classe e anche dare data-bs-target = "crollo" E data-bs-target = "#id". All'interno di questo tag creare un Tag con la classe .Navbar-Toggler-icon Per creare un pulsante icona a tre righe.
Ecco come crei una navigatura pieghevole.
Cambia il colore della barra navano
Per cambiare il colore del navbar, utilizzare le classi seguenti
- BG-Light
- BG-PRIMARY
- BG-SUCCESS
- BG-Warning
- BG-Info
- BG-Danger
o utilizzare in linea etichetta con colore di sfondo; attributo.
Conclusione
Per creare un uso di navigazione, .Navbar, .Navbar-Expand-XXL/LG/MD/SM, .Navbar-Light/Dark, BG-Light/Primary/Success/Avviso/Classe di pericolo con etichetta. Per il logo o il nome del marchio Aggiungi Tag con la classe .Navbar-brand all'interno tag, per menu Aggiungi Tag con la classe .navbar-nav all'interno Inoltre, per gli elenchi di menu Aggiungi Tag con la classe .Nav-Item all'interno
etichetta
e per l'aggiunta di collegamenti della pagina agli elementi NAV utilizzare, Tag con la classe .Nav-link all'interno