Bootstrap - Éléments de navigation

Bootstrap offre quelques options différentes pour le style des éléments de navigation. Tous ont le même balisage et la même classe de base, .nav. Bootstrap fournit également une classe d'aide, pour partager le marquage et les états. Modifiez les classes de modificateurs pour basculer entre chaque style.

Navigation tabulaire ou onglets :

Pour créer un menu de navigation par onglets -

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

Ajouter une classe .nav-tabs.

<p> Exemple d'onglets </p>

<ul class = "nav nav-tabs">

   <li class = "active"><a href = "#">Acceuil</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 Navigation :

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 montre ceci -

<p>Exemple de pillules de navigation</p>

<ul class = "nav nav-pills">

   <li class = "active"><a href = "#">Acceuil</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 montre ceci

<p> Pilules verticales :</p>

<ul class = "nav nav-pills nav-stacked">

   <li class = "active"><a href = "#">Acceuil</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 justifiés :

Vous pouvez créer des onglets ou des pilules de largeurs égales à partir de leur parent à des écrans plus larges que 768px en utilisant la classe .nav-justifié avec .nav, .nav-tabs ou .nav, .nav-pills respectivement. Sur les écrans plus petits, les liens de navigation sont empilés.

<p> Exemple d'éléments de navigation justifiés </p>

<ul class = "nav nav-pills nav-justified">

   <li class = "active"><a href = "#">Acceuil</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 = "#">Acceuim</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 chacune des classes .nav, si vous ajoutez la classe .disabled, il créera un lien gris qui désactive également l'état: hover comme illustré dans l'exemple suivant:

<p> Liens désactivés</p>

<ul class = "nav nav-pills">

   <li class = "active"><a href = "#">Acceuil</a></li>

   <li><a href = "#">SVN</a></li>

   <li class = "disabled"><a href = "#">iOS(Lien désactivé)</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 = "#">Acceuil</a></li>

   <li><a href = "#">SVN</a></li>

   <li><a href = "#">iOS</a></li>

   <li class = "disabled"><a href = "#">VB.Net(Lien désactivé)</a></li>

   <li><a href = "#">Java</a></li>

   <li><a href = "#">PHP</a></li>

</ul>   

Liste déroulante :

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

Onglets avec menus déroulants :

Pour ajouter des menus déroulants à l'onglet -

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

Ajoutez la classe .nav-tabs.

Ajoutez maintenant une liste non ordonnée avec une classe .dropdown-menu.

<p> Onglets avec menus déroulants :</p>

<ul class = "nav nav-tabs">

   <li class = "active"><a href = "#">Acceuil</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 = "#">Séparation lien</a></li>

      </ul>

   </li>

   <li><a href = "#">PHP</a></li>

</ul>

Le résultat de tous les éxemples 

<<<Précédent                           Début                      Suivant>>>