Bootstrap - Éléments de navigation

Bootstrap fournit quelques options différentes pour styliser les éléments de navigation. Tous partagent le même balisage et la même classe de base,.nav. Bootstrap fournit également une classe d'assistance, pour partager le balisage et les états. Échangez les classes de modificateurs pour basculer entre chaque style.

Navigation tabulaire ou onglets

Pour créer un menu de navigation à onglets -

Commencez par une liste non ordonnée de base avec la classe de base de .nav
Ajouter une classe .nav-tabs.

L'exemple suivant illustre ceci -

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Navigation de pilules

Pilules de base

Pour transformer les onglets en pilules, suivez les mêmes étapes que ci-dessus, utilisez la classe .nav-pills au lieu de .nav-tabs.

L'exemple suivant illustre ceci -

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Pilules verticales

Vous pouvez empiler les pilules verticalement en utilisant la classe .nav-stacked avec les classes - .nav, .nav-pills.

L'exemple suivant illustre ceci -

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Nav justifié

Vous pouvez créer des onglets ou des pilules de largeur égale à celle de leur parent sur des écrans plus larges que 768 px en utilisant la classe .nav-justified de même que .nav, .nav-tabs ou .nav, .nav-pillsrespectivement. Sur les écrans plus petits, les liens de navigation sont empilés.

L'exemple suivant illustre ceci -

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Liens désactivés

Pour chacun des .nav classes, si vous ajoutez le .disabled classe, cela créera un lien gris qui désactive également le :hover état comme indiqué dans l'exemple suivant -

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Cette classe ne changera que l'apparence de <a>, pas sa fonctionnalité. Utilisez JavaScript personnalisé pour désactiver les liens ici.

Listes déroulantes

Les menus de navigation partagent une syntaxe similaire avec les menus déroulants. Par défaut, vous avez un élément de liste qui a une ancre fonctionnant en conjonction avec certains attributs de données pour déclencher une liste non ordonnée avec un.dropdown-menu classe.

Onglets avec listes déroulantes

Pour ajouter des listes déroulantes à l'onglet -

Commencez par une liste non ordonnée de base avec la classe de base de .nav
Ajouter la classe .nav-tabs.
Maintenant, ajoutez une liste non ordonnée avec un .dropdown-menu classe.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Pilules avec listes déroulantes

Pour faire la même chose avec les pilules, remplacez simplement le .nav-tabs classe avec .nav-pills comme indiqué dans l'exemple suivant.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>