Quindi, questo articolo ti dà una conoscenza dettagliata su
Quindi, oggi discuteremo di diversi menu NAV (menu di navigazione) che un utente può utilizzare in base al suo requisito per creare un design reattivo.
Come creare un nav di base?
Il nav di base seguente viene creato utilizzando .nav classe con
Ma in Bootstrap 5 possiamo usare NAV come tag HTML
Possiamo anche cambiare l'allineamento orizzontale o verticale del contenuto di navigazione secondo il requisito di progettazione.
Allineamento orizzontale
Inizio
Per allineare il contenuto di navigazione in orizzontale all'inizio, utilizzare la classe "Justify-Content-Start":
Centro
Per allineare il contenuto di navigazione in orizzontale al centro, utilizzare la classe "Justify-Content-Center":
FINE
Per allineare il contenuto di navigazione in orizzontale alla fine, utilizzare la classe "Justify-Content-End":
Allineamento verticale
Per allineare il contenuto di navigazione in verticale, utilizzare la classe "Flex-Column":
Ecco come un menu di navigazione è allineato verticalmente.
Stili dei menu bootstrap
I menu bootstrap sono classificati in due categorie di stile:
Schede
Per convertire il menu NAV in schede Basta aggiungere il .Nav Nav-tabs classe per il tuo
Schede usando
Ecco come le schede usando
Schede usando etichetta
Ecco come le schede usando Vengono creati tag.
Pillole
Per convertire il menu NAV in pillole basta aggiungere il .Nav Nav-Pills classe per il tuo
Pillole usando
Ecco come l'uso di pillole
Pillole usando etichetta
Ecco come l'uso di pillole
Schede con menu a discesa utilizzando
Per creare schede con menu a discesa utilizzando tag, usa .cadere in picchiata classe con .Nav-Item legare e avvolgerlo attorno a un tag di ancoraggio che contiene .Nav-link, .dropdown-toggle lezioni insieme a data-bs-toggle = "discesa" attributo. Successivamente avvolgi questo tag di ancoraggio
tag che contengono .menu a discesa classe, avvolta intorno tag che contengono tag di ancoraggio con il .Dropdown-Item classe che porta alle voci di menu a discesa.
Ecco come le schede con il menu a discesa utilizzando
Schede con menu a discesa utilizzando etichetta
Per creare schede con menu a discesa utilizzando
tag, usa .cadere in picchiata classe con .Nav-Item legare e avvolgerlo attorno a un tag di ancoraggio che contiene .Nav-link, .dropdown-toggle lezioni insieme a data-bs-toggle = "discesa" attributo. Successivamente avvolgi questo tag di ancoraggio
tag che contengono .menu a discesa classe, avvolta intorno tag che contengono tag di ancoraggio con il .Dropdown-Item classe che porta alle voci di menu a discesa.
Ecco come le schede con menu a discesa usando
Pillole con menu a discesa usando
Per creare pillole con menu a discesa utilizzando tag, usa .cadere in picchiata classe con .Nav-Item legare e avvolgerlo attorno a un tag di ancoraggio che contiene .Nav-link, .dropdown-toggle lezioni insieme a data-bs-toggle = "discesa" attributo. Successivamente avvolgi questo tag di ancoraggio
tag che contengono .menu a discesa classe, avvolta intorno tag che contengono tag di ancoraggio con il .Dropdown-Item classe che porta alle voci di menu a discesa.
Ecco come le pillole con un menu a discesa usando
Pillole con menu a discesa usando etichetta
Per creare pillole con menu a discesa utilizzando tag, usa .cadere in picchiata classe con .Nav-Item legare e avvolgerlo attorno a un tag di ancoraggio che contiene .Nav-link, .dropdown-toggle lezioni insieme a data-bs-toggle = "discesa" attributo. Successivamente avvolgi questo tag di ancoraggio
tag che contengono .menu a discesa classe, avvolta intorno tag che contengono tag di ancoraggio con il .Dropdown-Item classe che porta alle voci di menu a discesa.
Ecco come le pillole con un menu a discesa usando
Pillole verticali
Per creare pillole verticali, aggiungi solo una lezione .Flex-Column con .Nav-Pills classe.
Riempi e giustifica le schede e il menu delle pillole
.Nav Fill La classe viene utilizzata per riempire gli spazi in modo ingiustificato .NAV GUSTIFICATO La classe viene utilizzata per riempire gli spazi in modo giustificato.
Schede con .Nav Fill
Per riempire gli spazi scoperti di un contenitore basta aggiungere .Nav Fill classe con .Nav Nav-tabs. Ma il .Nav Fill La classe ha riempito solo gli spazi ma non li ha giustificati.
Ecco come le schede con .Nav Fill sono creati.
Schede con .NAV GUSTIFICATO
.NAV GUSTIFICATO La classe non solo riempie gli spazi ideali, ma lo distribuisce anche equamente tra tutti gli articoli NAV.
Ecco come le schede con .NAV GUSTIFICATO sono creati.
Pillole con .Nav Fill
Per riempire gli spazi scoperti di un contenitore basta aggiungere un .Nav Fill classe con .Nav Nav-Pills. Ma il .Nav Fill La classe ha riempito solo gli spazi ma non li ha giustificati.
Ecco come le pillole con .Nav Fill sono creati.
Pillole con .NAV GUSTIFICATO
.NAV GUSTIFICATO La classe non solo riempie gli spazi ideali, ma lo distribuisce anche equamente tra tutti gli articoli NAV.
Ecco come le pillole con .NAV GUSTIFICATO sono creati.
Conclusione
I menu NAV sono creati utilizzando