Sommaire

La navigation par onglets-boutons verticaux COMPOSANTS DE NAVIGATION ET DE PAGINATION:Navigation par onglets-boutons verticaux

Dans l’exemple précédent, les boutons sont placés les uns à côté des autres. Nous pouvons les afficher les uns sous les autres.

La classe .nav-stacked permet de placer les boutons verticalement.

Comme les boutons de la liste <ul> occupe 100 % de la largeur disponible de l’élément parent, pour éviter d’avoir des boutons très/trop larges, nous plaçons la liste <ul> dans une boîte <div class="boite1"> ayant une largeur fixe (width: 200px;).

Voici le code :

<div class="boite1"> 
   <ul class="nav nav-pills nav-stacked"> 
      <li class="active"><a href="#">Accueil</a></li> 
      <li><a href="#">Projet</a></li> 
      <li><a href="#">Equipe</a></li> 
   </ul> 
</div>

Voici l’affichage :

images/C12-003.png

Le sélecteur CSS où la classe .nav-stacked est utilisée :

.nav-stacked > li { 
   float: none; 
}

Consultez le fichier Bootstrap-06-COMP-Nav-Pag/01-Navigation-tab.html pour visualiser cet exemple.