In questo tutorial imparerai come creare intestazioni di navigazione responsive statiche e a posizionamento fisso usando il componente Bootstrap navbar.
Creazione di una semplice navbar con Bootstrap
È possibile utilizzare il componente navbar di Bootstrap per creare intestazioni di navigazione responsive per il vostro sito o applicazione. Queste navbar responsive sono inizialmente collassate sui dispositivi che hanno viewport piccoli come i telefoni cellulari, ma si espandono quando l’utente clicca sul pulsante toggle. Tuttavia, sarà orizzontale come normale sui dispositivi medi e grandi come laptop o desktop.
È anche possibile creare diverse varianti della navbar come le navbar con menu a discesa e caselle di ricerca così come la navbar a posizionamento fisso con molto meno sforzo. L’esempio seguente vi mostrerà come creare una semplice navbar statica con link di navigazione.
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– L’output dell’esempio precedente sarà qualcosa di simile a questo:
Inoltre, invece del testo semplice, puoi anche mettere la tua immagine del logo all’interno della navbar. Tuttavia, è necessario impostare l’altezza del logo manualmente per adattarlo correttamente all’interno della navbar, come mostrato qui:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand"> <img src="images/logo.svg" height="28" alt="CoolBrand"> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– L’output dell’esempio di cui sopra sarà simile a questo:
Nota: Utilizzare le classi di utilità come .ml-auto.mr-auto.justify-content-between, ecc. per allineare i link di navigazione, i moduli, i pulsanti o il testo all’interno della navbar.
Aggiungimento di dropdown alla navbar
È anche possibile includere dropdown e box di ricerca all’interno delle navbar, come mostrato qui:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Inbox</a> <a href="#" class="dropdown-item">Sent</a> <a href="#" class="dropdown-item">Drafts</a> </div> </div> </div> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="navbar-nav"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– L’output dell’esempio precedente sarà simile a questo:
Tip: Per creare navbar che non sia fissa in alto o in basso, mettetela ovunque all’interno di un .container, che imposta la larghezza del vostro sito e del contenuto.
Guarda la sezione snippets per esempi di alcune navbars di Bootstrap splendidamente disegnate.
Posizione del modulo di ricerca all’interno della Navbar
Il modulo di ricerca è un componente molto comune delle navbars e lo hai visto spesso su vari siti web. Puoi mettere vari controlli e componenti di form all’interno di una navbar usando la classe .form-inline sull’elemento <form>, come mostrato nel seguente esempio:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">About</a> <a href="#" class="nav-item nav-link">Products</a> </div> <form class="form-inline ml-auto"> <input type="text" class="form-control mr-sm-2" placeholder="Search"> <button type="submit" class="btn btn-outline-light">Search</button> </form> </div></nav>– L’output dell’esempio precedente sarà qualcosa di simile a questo:
Modificare lo schema dei colori delle navbar
Puoi anche cambiare lo schema dei colori della navbar usando il .navbar-light per i colori di sfondo chiari, o .navbar-dark per i colori di sfondo scuro. Poi, personalizzatelo con le classi di utilità dei colori di sfondo, come .bg-dark.bg-primary, e così via.
In alternativa, si può anche applicare la proprietà CSS background-color sull’elemento .navbar per personalizzare il tema della navbar, come mostrato nel seguente esempio:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <!-- Navbar content --></nav><nav class="navbar navbar-dark bg-primary"> <!-- Navbar content --></nav><nav class="navbar navbar-light" style="background-color: #ddeeff;"> <!-- Navbar content --></nav>– L’output dell’esempio precedente sarà simile a questo:
Bootstrap Fixed Navbar
Bootstrap fornisce anche un meccanismo per creare navbar che è fissa nella parte superiore o inferiore del viewport e scorrerà con il contenuto della pagina.
Creazione della navbar fissa in alto
Applica la classe di utilità di posizione .fixed-top all’elemento .navbar per fissare la navbar in cima al viewport, in modo che non scorra con la pagina. Ecco un esempio:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <!-- Navbar content --></nav>Creazione della navbar fissa in basso
Similmente, aggiungete la classe .fixed-bottom sull’elemento .navbar per fissare la navbar nella parte inferiore del viewport, come mostrato nel seguente esempio:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom"> <!-- Navbar content --></nav>Creazione della Sticky Top Navbar
Puoi anche creare la sticky top navbar che scorre con la pagina fino a raggiungere la cima, poi rimane lì, semplicemente usando la classe .sticky-top sull’elemento .navbar, come questo:
Esempio
Prova questo codice ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <!-- Navbar content --></nav>Suggerimento: Mettete il contenuto fisso .navbar all’interno del .container o .container-fluid per un corretto padding e allineamento con il resto del contenuto.
Nota: Ricordati di aggiungere padding (almeno 70px) alla parte superiore o inferiore dell’elemento <body> per evitare che il contenuto vada sotto la navbar mentre si implementa la navbar fissa superiore o inferiore. Inoltre, assicurati di aggiungere il tuo foglio di stile personalizzato dopo il file CSS di Bootstrap, altrimenti le regole di stile nel tuo foglio di stile potrebbero essere sovrascritte da quello di Bootstrap.