Barra di navigazione Bootstrap
Barre di navigazione
Una barra di navigazione è un'intestazione di navigazione posizionata 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 <nav class="navbar navbar-default">.
L'esempio seguente mostra come aggiungere una barra di navigazione nella parte superiore della pagina:
Esempio
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Nota: tutti gli esempi in questa pagina mostreranno una barra di navigazione che occupa troppo spazio su schermi piccoli (tuttavia, la barra di navigazione sarà su una singola riga su schermi grandi, perché Bootstrap è reattivo). Questo problema (con i piccoli schermi) verrà risolto nell'ultimo esempio in questa pagina.
Barra di navigazione invertita
Se non ti piace lo stile della barra di navigazione predefinita, Bootstrap fornisce una barra di navigazione nera alternativa:
Basta cambiare la .navbar-defaultclasse in .navbar-inverse:
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Barra di navigazione con menu a discesa
Le barre di navigazione possono anche contenere menu a discesa.
L'esempio seguente aggiunge un menu a discesa per il pulsante "Pagina 1":
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Barra di navigazione allineata a destra
La .navbar-rightclasse viene utilizzata per allineare a destra i pulsanti della barra di navigazione.
Nell'esempio seguente inseriamo un pulsante "Registrati" e un pulsante "Accedi" a destra nella barra di navigazione. Aggiungiamo anche un glyphicon su ciascuno dei due nuovi pulsanti:
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Pulsanti della barra di navigazione
Per aggiungere pulsanti all'interno della barra di navigazione, aggiungi la .navbar-btnclasse su un pulsante Bootstrap:
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Moduli della barra di navigazione
Per aggiungere elementi del modulo all'interno della barra di navigazione, aggiungi la .navbar-formclasse a un elemento del modulo e aggiungi uno o più input. Nota che abbiamo aggiunto una .form-groupclasse al contenitore div che contiene l'input. Questo aggiunge un riempimento adeguato se hai più di un input (imparerai di più su questo nel capitolo Moduli).
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Puoi anche utilizzare le classi .input-groupe .input-group-addonper allegare un'icona o un testo della guida accanto al campo di input. Imparerai di più su queste classi nel capitolo Input di Bootstrap.
Esempio
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Testo della barra di navigazione
Usa la .navbar-textclasse per allineare in verticale tutti gli elementi all'interno della barra di navigazione che non sono collegamenti (garantisce il riempimento corretto e il colore del testo).
Esempio
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Barra di navigazione fissa
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 .navbar-fixed-topclasse rende fissa la barra di navigazione in alto:
Esempio
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
La .navbar-fixed-bottomclasse fa in modo che la barra di navigazione rimanga in basso:
Esempio
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Comprimere la barra di navigazione
La barra di navigazione occupa spesso troppo spazio su uno schermo piccolo.
Dovremmo nascondere la barra di navigazione; e mostralo solo quando è necessario.
Nell'esempio seguente la barra di navigazione è sostituita da un pulsante nell'angolo in alto a destra. Solo quando viene cliccato il pulsante, verrà visualizzata la barra di navigazione:
Esempio
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>