Onglets et pilules Bootstrap
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 stylé par la suite), 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 souhaitez créer un menu horizontal de la liste ci-dessus, ajoutez la
.list-inlineclasse à <ul>:
<ul class="list-inline">
Ou vous pouvez afficher le menu ci-dessus avec les onglets et les pilules de Bootstraps (voir ci-dessous).
Remarque : Consultez le dernier exemple sur cette page pour savoir comment rendre les onglets et les pilules basculables/dynamiques.
Onglets
Les onglets sont créés avec <ul class="nav nav-tabs">:
Astuce : marquez également la page actuelle 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>
Onglets 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>
Pilules
Les pilules sont créées 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>
Pilules verticales
Les pilules peuvent également être affichées verticalement. Ajoutez simplement la .nav-stackedclasse:
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>
Pilules verticales d'affilée
Texte...
Texte...
Texte...
L'exemple suivant place le menu déroulant vertical à l'intérieur de la dernière colonne. Ainsi, sur un grand écran, le menu sera affiché à droite. Mais sur un petit écran, le contenu s'ajustera automatiquement dans une mise en page à 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>
Pilules avec menu déroulant
Les pilules 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>
Onglets et pilules centrés
Pour centrer/justifier les onglets et les pilules, utilisez la .nav-justifiedclasse.
Notez que sur les écrans inférieurs à 768 pixels, les éléments de la liste sont empilés (le 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>
Onglets basculables / dynamiques
DOMICILE
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
Pour rendre les onglets basculables, ajoutez l' data-toggle="tab"attribut à chaque lien. Ajoutez ensuite une .tab-paneclasse avec un ID unique pour chaque onglet et encapsulez-les dans un
<div>élément avec class .tab-content.
Si vous souhaitez que les onglets apparaissent et disparaissent lorsque vous cliquez dessus, ajoutez la
.fadeclasse à.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>
Pilules basculantes / dynamiques
Le même code s'applique aux pilules; changez seulement l'attribut data-toggle en 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>
Référence complète de navigation Bootstrap
Pour une référence complète de toutes les classes de navigation, consultez notre référence complète de navigation Bootstrap .
Pour une référence complète de toutes les options, méthodes et événements des onglets, accédez à notre Bootstrap JS Tab Reference .