barre di navigazione
Una barra di navigazione è un'intestazione di navigazione che è posto nella parte superiore della pagina:
Con Bootstrap , una barra di navigazione può estendere o ridurre, a seconda delle dimensioni dello schermo.
Una barra di navigazione standard viene creato con <nav class="navbar navbar-default"> .
L'esempio seguente mostra come aggiungere una barra di navigazione in cima alla pagina:
Esempio
<body>
<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>
...
Prova tu stesso " Tutti gli esempi in questa pagina mostrerà una barra di navigazione che occupa troppo spazio su schermi di piccole dimensioni (tuttavia, la barra di navigazione sarà in una sola riga su schermi di grandi dimensioni - perché Bootstrap è reattivo). Questo problema (con i piccoli schermi) sarà risolto nell'ultimo esempio in questa pagina.
Inverted barra di navigazione
Se non vi piace lo stile della barra di navigazione di default, Bootstrap fornisce un'alternativa, barra di navigazione nera:
Basta cambiare il .navbar-default classe 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>
Prova tu stesso " Risolto barra di navigazione
La barra di navigazione può anche essere fissato in alto o in basso della pagina.
Una barra di navigazione fisso rimane visibile in una posizione fissa (superiore o inferiore) indipendente dalla pagina di scorrimento.
Il .navbar-fixed-top class rende la barra di navigazione fisso 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> Prova tu stesso " Il .navbar-fixed-bottom di classe rende il soggiorno barra di navigazione 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> Prova tu stesso " Barra di navigazione Con discesa
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> Prova tu stesso " Allineato a destra Barra di navigazione
Il .navbar-right classe viene utilizzata per allineare a destra i pulsanti della barra di navigazione.
Nel seguente esempio inseriamo un pulsante "Sign Up" e un pulsante "Login" a destra nella barra di navigazione. Abbiamo anche aggiungere 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>
<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>
</nav> Prova tu stesso " Collasso La barra di navigazione
La barra di navigazione occupa troppo spazio su un piccolo schermo.
Dobbiamo nascondere la barra di navigazione; e mostra solo quando è necessario.
Nel seguente esempio la barra di navigazione è sostituito da un pulsante nell'angolo in alto a destra. Solo quando il pulsante viene premuto, 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> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»