Sommaire

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

Bootstrap nous propose une navigation par onglets à utiliser dans une simple liste <ul> ayant deux classes dédiées : .nav et .nav-tabs. Chaque onglet est un élément <li> qui contient un lien <a> vers la cible que vous souhaitez. Si vous souhaitez avoir un des onglets actifs par défaut, attribuez la classe .active à son élément <li>.

Voici un exemple simple de code HTML :

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

La largeur de la liste <ul> occupe 100 % de la place disponible de son élément parent, la boîte <div class="row"> dans ces exemples.

Voici l’affichage obtenu :

images/C12-001.png

Voici les propriétés CSS de la classe .nav :

.nav:after { 
   clear: both 
} 
.nav:before, .nav:after { 
   display: table; 
   content: " " 
} 
.nav { 
   padding-left: 0; 
   margin-bottom: 0; 
   list-style: none 
}

Voici les propriétés CSS de la classe .nav-tabs :

.nav-tabs { 
   border-bottom: 1px solid #ddd; 
}

Voici les propriétés des sélecteurs ...