Sommaire

La navigation par onglets justifiée COMPOSANTS DE NAVIGATION ET DE PAGINATION:Navigation par onglets justifiée

La classe .nav-justified permet de justifier horizontalement les éléments de navigation, onglet ou bouton, dans la largeur de l’élément parent.

Dans cet exemple l’élément parent de la liste <ul>, la boîte <div class="boite2"> a une largeur de 400 pixels, les trois onglets sont justifiés sur ces 400 pixels.

Le code HTML :

<div class="boite2"> 
   <ul class="nav nav-tabs nav-justified"> 
      <li class="active"><a href="#">Accueil</a></li> 
      <li><a href="#">Projet</a></li> 
      <li><a href="#">Equipe</a></li> 
   </ul> 
</div>

L’affichage :

images/C12-004.png

Les sélecteurs CSS où la classe .nav-justified est utilisée :

@media (min-width: 768px) 
   .nav-tabs.nav-justified > li { 
      display: table-cell; 
      width: 1%; 
} 
.nav-tabs.nav-justified > li { 
   float: none; 
} 
.nav-tabs.nav-justified > .active > a { 
   border-bottom-color: #fff; 
} 
.nav-tabs.nav-justified > li > a { 
   margin-right: 0; 
   border-bottom: 1px solid #ddd; 
} 
.nav-tabs.nav-justified > li > ...