menus
La plupart des pages Web ont une sorte de menu.
En HTML, un menu est souvent défini dans une liste non ordonnée <ul> (et de style après), comme ceci:
<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> Si vous voulez créer un menu horizontal de la liste ci - dessus, ajoutez le .list-inline classe <ul> :
Ou vous pouvez afficher le menu ci - dessus avec les Bootstraps' Tabs and Pills les Bootstraps' Tabs and Pills (voir ci - dessous).
Note: Voir le dernier exemple de cette page pour savoir comment faire des onglets et des pilules toggleable / dynamique.
Tabs
Les onglets sont créés avec <ul class="nav nav-tabs"> :
Astuce: marquer également la page en cours avec <li class="active"> .
L'exemple suivant crée des onglets de navigation:
Exemple
<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>
Essayez - le vous - même » Tabs Avec Menu déroulant
Les onglets peuvent également contenir des menus déroulants.
L'exemple suivant ajoute un menu déroulant "Menu 1":
Exemple
<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>
Essayez - le vous - même » Pills
Les pilules sont créés avec <ul class="nav nav-pills"> . Marquez également la page en cours avec <li class="active"> :
Exemple
<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> Essayez - le vous - même » Vertical Pills
Les Pills peuvent également être affichées verticalement. Il suffit d' ajouter le .nav-stacked classe:
Exemple
<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>
Essayez - le vous - même » Vertical Pills in a Row
Texte...
Texte...
Texte...
L'exemple suivant place le menu vertical de la pilule dans la dernière colonne. Ainsi, sur un grand écran le menu sera affiché à droite. Mais sur un petit écran, le contenu va se régler automatiquement en une seule colonne:
Exemple
<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> Essayez - le vous - même » Pills Avec Menu déroulant
Les Pills peuvent également contenir des menus déroulants.
L'exemple suivant ajoute un menu déroulant "Menu 1":
Exemple
<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>
Essayez - le vous - même » Centré Tabs and Pills
Pour centre / justifier les onglets et les pills , utilisez le .nav-justified classe.
Notez que sur les écrans plus petits que 768px, les éléments de liste sont empilés (contenu restera centré):
Exemple
<!-- 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>
Essayez - le vous - même » Toggleable / Dynamic Tabs
DOMICILE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua.
Pour rendre le toggleable d'onglets, ajoutez le data-toggle="tab" attribut à chaque lien. Ensuite , ajoutez un .tab-pane classe avec un identifiant unique pour chaque onglet et les envelopper dans un <div> élément avec la classe .tab-content .
Si vous voulez que les onglets se fanent dans et hors lorsque vous cliquez sur eux, ajoutez la .fade classe à .tab-pane :
Exemple
<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>
Essayez - le vous - même » Toggleable / Dynamic Pills
Le même code applique aux pills ; seulement changer l'attribut data-bascule pour les data-toggle="pill" :
Exemple
<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>
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Remplissez Bootstrap Navigation Référence
Pour une référence complète de toutes les classes de navigation, allez à notre entière Bootstrap Navigation Référence .
Pour une référence complète de tous onglet Options, méthodes et événements, rendez - vous à notre Bootstrap JS Tab Référence .