NAVBAR
Una navigation bar è un’intestazione di navigazione posizionata normalmente nella parte superiore della pagina:
Con Bootstrap, una barra di navigazione può estendersi o comprimersi, a seconda delle dimensioni dello schermo. Viene creata una barra di navigazione standard con la classe .navbar, seguita da una classe di compressione responsive: .navbar-expand-xxl|xl|lg|md|sm (impila la barra di navigazione verticalmente su schermi xxlarge, extra large, large, medium o small ). Per aggiungere collegamenti all’interno della barra di navigazione, utilizzare un elemento <ul> (o un <div>) con class=”navbar-nav“. Quindi aggiungi elementi <li> con una classe .nav-item seguita da un elemento <a> con una classe .nav-link:
ESEMPIO DI CODICE NAVBAR BASIC
VERTICAL NAVBAR
Rimuovi la classe .navbar-expand-* per creare una barra di navigazione che sarà sempre verticale:
<!– A grey vertical navbar –>
<nav class=”navbar bg-light“>
…
</nav>
CENTRARE UNA NAVBAR
Aggiungi la classe .justify-content-center per centrare la barra di navigazione:
<nav class=”navbar navbar-expand-sm bg-light justify-content-center“>
…
</nav>
COLORI DELLA NAVBAR
Utilizzare una delle classi .bg-color per modificare il colore di sfondo della barra di navigazione (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg -dark e .bg-light). Suggerimento: aggiungi un colore di testo bianco a tutti i collegamenti nella barra di navigazione con la classe .navbar-dark oppure usa la classe .navbar-light per aggiungere un colore di testo nero.
ESEMPIO DI CODICE
BRAND / LOGO
Quando si utilizza la classe .navbar-brand con le immagini, Bootstrap 5 modellerà automaticamente l’immagine per adattarla verticalmente alla barra di navigazione.
ESEMPIO DI CODICE
NAVBAR TEXT
Usa la classe .navbar-text per allineare in verticale tutti gli elementi all’interno della barra di navigazione che non sono collegamenti (garantisce il padding corretto e il colore del testo).
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark“>
<div class=”container-fluid“>
<span class=”navbar-text“>Navbar text</span>
</div>
</nav>
Molto spesso, soprattutto su schermi di piccole dimensioni, si desidera nascondere i collegamenti di navigazione e sostituirli con un pulsante che dovrebbe rivelarli quando viene cliccato. Per creare una barra di navigazione comprimibile, usa un pulsante con class=”navbar-toggler“, data-bs-toggle=”collapse” e data-bs-target=”#thetarget”. Quindi avvolgi il contenuto della barra di navigazione (link, ecc.) all’interno di un elemento <div> con class=”collapse navbar-collapse“, seguito da un id che corrisponde al data-bs-target del pulsante: “thetarget“.
NAVBAR CON DROP-DOWN
ESEMPIO DI CODICE
NAVBAR FORM E BUTTON
CODICE
FIXED NAVIGATION BAR
La barra di navigazione può anche essere fissata nella parte superiore o inferiore della pagina. Una barra di navigazione fissa rimane visibile in una posizione fissa (in alto o in basso) indipendentemente dallo scorrimento della pagina. La classe .fixed-top rende la barra di navigazione fissa in alto:
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-top“>
…
</nav>
Usa la classe .fixed-bottom per fare in modo che la barra di navigazione rimanga in fondo alla pagina:
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom“>
…
</nav>
Usa la classe .sticky-top per fissare la barra di navigazione/rimanere nella parte superiore della pagina quando la scorri oltre. Nota: questa classe non funziona in IE11 e precedenti (la tratterà come position:relative).
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark sticky-top“>
…
</nav>
Scrivi un commento