Bootstrap - Navbars: La Tua Porta d'Accesso alla Navigazione Web Professionale

Ciao là, futuri sviluppatori web! Oggi esploreremo uno dei componenti più importanti del design web moderno: la barra di navigazione (navbar). Come il tuo amico insegnante di informatica del quartiere, sono entusiasta di guidarti attraverso il meraviglioso mondo delle navbars di Bootstrap. Allora prenditi la tua bevanda preferita, mettiti comodo, e insieme intraprendiamo questa avventura di coding!

Bootstrap - Navbars

Come Funziona

Prima di iniziare a costruire le nostre navbars, capiremo cosa sono e come funzionano. Una navbar, abbreviazione di navigation bar, è come la mappa del tuo sito web. Aiuta gli utenti a trovare la loro strada nella tua creazione digitale. In Bootstrap, le navbars sono reattive e si chiudono automaticamente, il che significa che si adattano bellamente a diverse dimensioni di schermo. Non è fantastico?

Navbar di Base

Iniziamo con una navbar di base. Ecco un esempio semplice:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Spieghiamo un po':

Iniziamo con un elemento <nav> con le classi di Bootstrap.
La classe navbar-brand è per il nome del tuo sito o il logo.
Il navbar-toggler è per la visualizzazione mobile, creando il famoso menu "hamburger".
Dentro il div navbar-collapse, abbiamo i nostri elementi di navigazione in una lista non ordinata.

Navbar Verticale

Vuoi cambiare le cose? Proviamo una navbar verticale:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

La magia qui è nella classe flex-column. Trasforma la nostra navbar orizzontale in una snella navbar verticale. Non è fantastico?

Navbar Centrata

Per chi ama tutto allineato alla perfezione, ecco come centrare gli elementi della navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

La classe mx-auto è il nostro supereroe del centratura. Applica margini automatici su entrambi i lati, centrando il nostro contenuto.

Brand

Il tuo brand è la tua identità. Vediamo come farlo brillare:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Questo codice aggiunge un logo accanto al nome del tuo brand. Le classi d-inline-block e align-top assicurano che tutto sia allineato correttamente.

Testo

A volte, hai solo bisogno di del testo piano nella tua navbar:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Testo della navbar con un elemento inline
</span>
</nav>

La classe navbar-text stila il tuo testo per abbinarlo all'aspetto della navbar.

Immagini e Testo

Combiniamo immagini e testo per una navbar più dinamica:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Benvenuti sul nostro sito!
</span>
</nav>

Questo crea una navbar con sia un logo che un messaggio di benvenuto. Non ha un aspetto professionale?

Nav

Il componente nav è il cuore della nostra navbar. Esaminiamo un esempio più complesso:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabilitato</a>
</li>
</ul>
</div>
</nav>

Questo esempio include un link attivo, link regolari e un link disabilitato. La classe sr-only è per i lettori di schermo, migliorando l'accessibilità.

Navbar Senza Lista

Per un aspetto più pulito, puoi creare una navbar senza una lista:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabilitato</a>
</div>
</nav>

Questo raggiunge lo stesso risultato senza utilizzare i tag <ul> e <li>.

Navbar con Dropdown

Pronto per il livello successivo? Aggiungiamo una tendina alla nostra navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link della tendina
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Azione</a>
<a class="dropdown-item" href="#">Altra azione</a>
<a class="dropdown-item" href="#">Qualcosa di diverso qui</a>
</div>
</div>
</div>
</nav>

La classe dropdown-toggle crea l'effetto della tendina, mentre dropdown-menu e dropdown-item stilano il contenuto della tendina.

Moduli

Hai bisogno di una barra di ricerca? Nessun problema! Ecco come aggiungere un modulo alla tua navbar:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Cerca" aria-label="Cerca">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
</form>
</nav>

La classe form-inline tiene i nostri elementi di modulo in linea, perfetto per le navbars.

Schema dei Colori

Bootstrap offre vari schemi di colori. Ecco una navbar scura:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar Scura</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

Basta cambiare navbar-light in navbar-dark e bg-light in bg-dark. Semplice!

Contenitori

Per una migliore allineamento, puoi avvolgere il contenuto della tua navbar in un contenitore:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar Contenuta</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

La classe container centra il contenuto e fornisce una larghezza fissa reattiva.

Posizionamento

In Alto Fixato

Vuoi che la tua navbar rimanga in alto? Ecco come fare:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">In Alto Fixato</a>
</nav>

La classe fixed-top fa sì che la tua navbar rimanga in alto della pagina mentre gli utenti scorrono.

Comportamenti Reattivi

Le navbars di Bootstrap sono reattive per impostazione predefinita. Si chiudono su schermi più piccoli e si espandono su quelli più grandi. La chiave è nella classe navbar-expand-*:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Contenuto della Navbar -->
</nav>

Questa navbar si espanderà su schermi di medie dimensioni e superiori.

Toggler

Il pulsante di toggler è ciò che crea il menu "hamburger" sui dispositivi mobili:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Contenuto della Navbar -->
</div>
</nav>

Il pulsante navbar-toggler controlla la visibilità del contenuto della navbar sui piccoli schermi.

Contenuto Esterno

Puoi anche toggolare contenuto fuori dalla navbar:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Contenuto Collapse</h5>
<span class="text-muted">Toggleabile tramite il brand della navbar.</span>
</div>
</div>

Questo crea un toggler che controlla il contenuto fuori dalla navbar stessa.

Offcanvas

Ultimamente, esaminiamo una navbar offcanvas:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Contenuto Offcanvas -->
</div>
</div>
</div>
</nav>

Questo crea una barra laterale che si apre da un lato dello schermo, perfetta per la navigazione mobile.

Eccoci! Abbiamo viaggiato attraverso il territorio delle navbars di Bootstrap, dai componenti di base alle funzionalità avanzate. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare con questi esempi. Buon coding, e possa la tua navbar sempre guidare i tuoi utenti sulla retta via!

Metodo	Descrizione
`.navbar()`	Inizializza il componente della navbar
`.collapse('toggle')`	Togglia la visibilità della navbar collapse
`.collapse('show')`	Mostra la navbar collapse
`.collapse('hide')`	Nasconde la navbar collapse
`.offcanvas('toggle')`	Togglia la visibilità della navbar offcanvas
`.offcanvas('show')`	Mostra la navbar offcanvas
`.offcanvas('hide')`	Nasconde la navbar offcanvas

Credits: Image by storyset

Tutorial precedente:

Bootstrap - Modal

Prossimo tutorial:

Bootstrap - Nav e schede