Sommaire

Le fil d’Ariane COMPOSANTS DE NAVIGATION ET DE PAGINATION:Fil d’Ariane

Très utilisé dans les sites bien structurés, le fil d’Ariane (breadcrumbs en anglais) permet de visualiser le chemin parcouru par les visiteurs dans le site Web. Bootstrap nous propose un fil d’Ariane mis en forme.

Voici le code utilisé :

<div class="container"> 
   <div class="row"> 
   <ol class="breadcrumb"> 
        <li><a href="#">Accueil</a></li> 
        <li><a href="#">Projets</a></li> 
        <li><a href="#">Sites Web</a></li> 
        <li class="active">Dernières créations</li> 
      </ol> 
   </div> 
</div>

L’affichage résultant :

images/C12-021.png

Chaque page visitée est placée dans un lien <a>, dans un élément <li> de la liste <ol>. La page active, c’est-à-dire la page ouverte par le visiteur n’a pas de lien <a>, mais son élément <li> possède la classe .active.

Voici les sélecteurs qui interviennent dans cette mise en forme :

.breadcrumb { 
   padding: 8px 15px; 
   margin-bottom: 20px; 
   list-style: none; 
   background-color: #f5f5f5; 
   border-radius: ...