Menu
La maggior parte delle pagine web hanno un qualche tipo di un menu.
In HTML, un menu viene spesso definito in una lista non ordinata <ul> (e stile in seguito), in questo modo:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Se si desidera creare un menu orizzontale della lista di cui sopra, aggiungere il .list-inline classe per <ul> :
<ul class="list-inline"> Prova tu stesso " Oppure è possibile visualizzare il menu di cui sopra con Bootstraps' Tabs and Pills (vedi sotto).
Nota: Vedere l'ultimo esempio in questa pagina per scoprire come rendere le schede e pillole toggleable / dinamico.
Tabs
Le schede vengono creati con <ul class="nav nav-tabs"> :
Suggerimento: contrassegnare anche la pagina corrente con <li class="active"> .
L'esempio seguente crea schede di navigazione:
Esempio
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Prova tu stesso " Schede con discesa Menu
Le schede possono anche contenere menu a discesa.
L'esempio seguente aggiunge un menu a discesa "Menu 1":
Esempio
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Prova tu stesso " Pills
Pillole sono creati con <ul class="nav nav-pills"> . Contrassegnare anche la pagina corrente con <li class="active"> :
Esempio
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Prova tu stesso " verticali Pills
Pills possono essere visualizzate anche in verticale. Basta aggiungere il .nav-stacked classe:
Esempio
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Prova tu stesso " Verticali Pills in una riga
Testo...
Testo...
Testo...
L'esempio seguente inserisce menu pillola verticale all'interno l'ultima colonna. Così, su un grande schermo il menu sarà visualizzato a destra. Ma su un piccolo schermo, il contenuto stesso regolerà automaticamente in un layout a colonna singola:
Esempio
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Prova tu stesso " Pills Con discesa Menu
Pills possono anche contenere menu a discesa.
L'esempio seguente aggiunge un menu a discesa "Menu 1":
Esempio
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Prova tu stesso " Centered Tabs and Pills
Per il centro / giustificare le schede e le pills , utilizzare il .nav-justified classe.
Si noti che sugli schermi che sono inferiori a 768px, le voci di elenco sono impilati (contenuto rimarrà centrato):
Esempio
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Prova tu stesso " Toggleable / Dynamic Tabs
CASA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua.
Per rendere il toggleable schede, aggiungere il data-toggle="tab" attributo per ogni link. Quindi aggiungere un .tab-pane classe con un ID univoco per ogni scheda e avvolgerli all'interno di un <div> elemento con classe .tab-content .
Se si desidera che le schede per dissolvenza dentro e fuori quando si fa clic su di essi, aggiungere il .fade classe .tab-pane :
Esempio
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Prova tu stesso " Toggleable / Dynamic Pills
Lo stesso codice vale per pills ; solo cambiare l'attributo data-toggle su data-toggle="pill" :
Esempio
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
Completare Bootstrap Navigazione di riferimento
Per un riferimento completo di tutte le classi di navigazione, vai alla nostra completa Bootstrap Navigazione di riferimento .
Per un riferimento completo di tutte le scheda Opzioni, metodi ed eventi, vai alla nostra Bootstrap JS linguetta di riferimento .