Bootstrap | Barra di navigazione
La barra di navigazione di un sito Web è costituito da diversi menu collegati a diverse sezioni del sito Web. Più specificamente, la barra di navigazione è un'intestazione di pagina solitamente posizionata nella parte superiore del sito Web. Usando il framework Bootstrap, possiamo creare una barra di navigazione con grande facilità. Bootstrap offre anche diverse classi con stili predefiniti per regolare la barra di navigazione.
Questo articolo ti guiderà sulla barra di navigazione Bootstrap illustrando gli argomenti seguenti:
- Come creare una semplice barra di navigazione bootstrap?
- Come aggiungere un menu a discesa alla barra di navigazione?
- Come aggiungere icone alla barra di navigazione?
- Come allineare i menu di navigazione?
- Come creare una barra di navigazione oscura?
- Come correggere la posizione della barra di navigazione?
- Come far crollare una barra di navigazione?
Come creare una semplice barra di navigazione bootstrap?
Per creare una semplice barra di navigazione utilizzando il framework bootstrap, seguire i passaggi seguenti:
- Innanzitutto, aggiungi il “Tag con il ".Navbar" E ".Navbar-Default" classi.
- Aggiungere un "Tag con la classe "Container-Fluid"Per aggiungere contenuti alla barra di navigazione.
- Per includere un logo, creare un "" e assegnarlo una classe "Navbar-Header".
- All'interno di questo elemento div, aggiungi un ""Tag per rendere il logo cliccabile e impostare una classe"Navbar-brand"Ad esso.
- Successivamente, crea un elenco di menu utilizzando il
- Tag con il "nav" E "navbar-nav" classi.
- Dentro il
- tag, includi il
- Tag per specificare gli elementi. Posizionare i nomi delle pagine usando il tag per renderli cliccabili:
Di seguito è riportata la descrizione delle importanti classi bootstrap utilizzate nello snippet di codice sopra:
- "Navbar"La classe ha stili predefiniti per creare una barra di navigazione standard.
- "Navbar-Default"Viene utilizzato per creare una barra di navigazione predefinita.
- "Navbar-Expand-LG"La classe è regolata per fornire le classi di schemi di colore e creare un crollo reattivo.
- "Container-Fluid"Fornisce un contenitore a larghezza intera.
- "Navbar-Header", Una classe architettonica, ha assegnato l'area in pixel a sinistra della barra navic, che consente al logo di riempire l'intero spazio. Fornisce inoltre la reattività alla classe di marchio Navbar con un logo ed evita di sovrapporre il menu con il logo.
- "Navbar-brand"Posiziona l'immagine o il testo del logo nella parte superiore della barra di navigazione.
Produzione
Come aggiungere un menu a discesa alla barra di navigazione?
È possibile aggiungere un menu a discesa alla barra di navigazione utilizzando il "cadere in picchiata" classe.
Seguire i passaggi per vedere come regolare un menu a discesa nella barra di navigazione:
- Aggiungere
- Elemento nell'elenco in cui si desidera aggiungere un menu a discesa e assegnarlo una classe "cadere in picchiata".
- Per rendere cliccabile il menu, allocare il nome del menu all'interno del tag. Assegnala una classe "dropdown-toggle"E attributi"Data-Toggle" E "Href"Per aggiungere un collegamento ad esso. Quindi, per aggiungere un simbolo di cura, menzionare un "ASSEGNATO" classe.
- Per elencare le voci di menu, specificare il
- Tag con il "menu a discesa" classe.
- All'interno di questo
- elemento, menziona gli elementi dell'elenco utilizzando il
- elementi. Ognuno di essi detiene il tag per impostare collegamenti ad esso:
Menu a discesa
class = "caret">Nel codice sopra:
- "cadere in picchiata"La classe indica il menu a discesa.
- "dropdown-toggle"Aiuta a creare un menu a discesa interattivo facendo clic sul menu attivo.
- "ASSEGNATO"Crea l'icona della freccia.
- "Data-Toggle"L'attributo viene utilizzato per visualizzare una sezione a nascondino su clic.
Produzione
Come aggiungere icone alla barra di navigazione?
Esistono varie icone di glifi in bootstrap che possono essere utilizzate gratuitamente. Più specificamente, abbiamo bisogno di un elemento in linea, come ","Per incorporare le icone nella barra di navigazione.
Per fare ciò, imposta l'attributo di classe dell'elemento come "Glyphicon", Aggiungi uno spazio e poi menziona il"Glyphicon-Name"Come nome della classe:
Produzione
Come allineare i menu di navigazione?
Bootstrap offre diverse classi per impostare l'allineamento dei menu di navigazione. Ad esempio, il “.Navbar-Right"La classe regola l'allineamento del menu a destra.
Esempio
Dai un'occhiata all'esempio seguente che mostra come regolare i due elementi dell'elenco da allineare a destra:
Produzione
Come creare una barra di navigazione oscura?
IL "Navbar-inverso"La classe viene utilizzata per convertire il colore della barra di navigazione in buio come segue:
Produzione
Come correggere la posizione della barra di navigazione?
Molte utility di posizione bootstrap possono essere assegnate per impostare la posizione della barra di navigazione. Ad esempio, il “.Navbar-Fissed-Top"Correggi la barra di navigazione nella parte superiore della pagina:
Produzione
Come far crollare una barra di navigazione?
Come sappiamo, l'obiettivo principale del framework Bootstrap è la reattività. Quindi, per impostare la barra di navigazione su piccole dimensioni dello schermo, aggiungiamo un pulsante per espandere la barra di navigazione su Click.
Per progettare un pulsante di hamburger, aggiungi tre icone bar nell'elemento. IL "icona bar"La classe visualizza l'icona della barra. Quindi, imposta l'attributo "Data-Toggle" con il "crollo" valore. IL "target dati"Attributo è assegnato il"#mynavbar"Indicando l'ID del Div:
Qui:
- "Navbar-Toggle"Estende gli elementi.
- "Data-Toggle"Con il valore"crollo"Determina l'elemento collapdibile nascosto o visibile su click.
- "target dati"L'attributo seleziona il selettore CSS a cui viene applicata l'operazione di collasso. IL "#mynavbar"È l'ID dell'elemento Div.
Quindi, avvolgere le voci del menu di navigazione in un elemento Div con ID "Mynavbar":
Nel frammento di codice sopra:
- "crollo"Indica il contenuto che mostra o si nasconde.
- "Navbar-Collapse"Significa le voci del menu di navigazione nella vista mobile.
L'output di seguito è indicato che la barra di navigazione viene crollata in un pulsante:
Su piccoli schermi, come su dispositivo mobile, la barra di navigazione viene visualizzata e visibile quando si fa clic sul pulsante:
Questo è tutto! Hai imparato a creare la barra di navigazione bootstrap usando classi diverse.
Conclusione
Per creare una barra di navigazione bootstrap, prima, utilizza l'HTML
- E
- Tag per fare un elenco di menu insieme alle classi bootstrap. Inoltre, vengono utilizzate diverse classi bootstrap per creare una barra di navigazione reattiva per il nostro sito Web, come ".Navbar",".navbar-expand-xl | lg | md | SM",".marchio nav", e molti altri. Questo articolo ha spiegato come creare una barra di navigazione bootstrap con funzionalità diverse.