La Navbar di Bootstrap è un componente di navigazione che permette di creare un menu di navigazione con un’ interfaccia responsive. Supporta elementi come link, pulsanti, dropdown e form. Può essere personalizzata con le classi di Bootstrap per cambiare l’aspetto e il comportamento. Analizziamone meglio, dunque, gli elementi:
- Link: Un elemento di navigazione che, quando cliccato, porta l’utente a un’altra pagina o a un’altra sezione della pagina corrente.
- Pulsanti: Elementi cliccabili usati per triggerare un’azione o un evento.
- Dropdown: Un menu a discesa che visualizza un elenco di opzioni quando viene cliccato.
- Form: Un elemento che permette all’utente di inserire dati che verranno inviati al server per l’elaborazione.
Bootstrap framework ti consente di impiegare delle classi per cambiare l’aspetto e il comportamento della Navbar.
Ad esempio, la classe “navbar-light” viene usata quando lo sfondo è chiaro (light) e, quindi, il colore del testo sarà scuro, mentre la classe “navbar-fixed-top” può essere usata per fissare la Navbar all’inizio della pagina. Ci sono molte altre classi disponibili in Bootstrap che possono essere impiegate per personalizzare la Navbar, così come bootstrap mette a disposizione dei bootstrap navbar template da utilizzare per una base già pronta all’uso.
Può esserti utile vedere subito un esempio di barra di navigazione con il tag nav.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Esempio di 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">
<a class="nav-link" href="#">Vantaggi e peculiarità</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Struttura di base</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Le classi di Bootstrap</a>
</li>
</ul>
</div>
</nav>
Inserendo questo codice Html all’interno della sezione body del nostro codice di base, abiliterai una barra di navigazione con tre categorie.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
/>
</head>
<body>
<div class="container">Primi passi con Bootstrap CDN</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"
></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Esempio di 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">
<a class="nav-link" href="#">Vantaggi e peculiarità</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Struttura di base</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Le classi di Bootstrap</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Se lo esegui, avrai il risultato che segue.
Non ti resta che provare!
