Sommaire

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

Sur exactement le même principe, vous pouvez afficher vos liens sous la forme de bouton, avec la classe .nav-pills.

Voilà le code HTML utilisé :

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

Ci-dessous l’affichage résultant :

images/C12-002.png

Les sélecteurs CSS où intervient la classe .nav-pills :

.nav-pills > li { 
   float: left; 
} 
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus { 
   color: #fff; 
   background-color: #428bca; 
} 
.nav-pills > li > a { 
   border-radius: 5px; 
}

Utilisez le fichier Bootstrap-06-COMP-Nav-Pag/01-Navigation-tab.html afin de consulter cet exemple.