rudless.

Breadcrumb Bootstrap

1. Objectifs

• Connaitre la Breadcrumb Bootstrap
• Etre capable d’utiliser les Breadcrumb Bootstrap

2. Présentation

• Pour les visiteurs du site. La question est toujours: "Où suis-je?" Le but du chemin de navigation est de permettre un chemin à travers la hiérarchie de navigation.Ce composant s’appelle en anglais "breadcrumb" ou fil d’Ariane en français
• De cette façon, non seulement les utilisateurs peuvent connaître l’emplacement actuel, mais aussi revenir aux pages de sous-catégorie ou de catégorie principale.
• Les breadcrumb Bootstrap sont utilisées pour indiquer l’emplacement de la page en cours dans une hiérarchie de navigation qui ajoute automatiquement des séparateurs via CSS.

3. Utilisation

• En règle générale, on utilise les balises HTML <nav>, <ol> et <li> pour créer des Breadcrumb.
• Dans la balise <ol>, spécifiez la classe .breadcrumb alors que dans les balises <li>, utilisez la classe .breadcrumb-item.



• La classe aria-label="breadcrumb": fournit une étiquette décrivant le type de navigation fourni dans l’élément nav.
• La classe aria-current="page": représente la page en cours dans la liste.

4. Exemple

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Acceuil</a></li>
    <li class="breadcrumb-item"><a href="#">Cours</a></li>
    <li class="breadcrumb-item"><a href="#">Développement Web</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>

• Ce qui nous donne:



5. Les styles de Breadcrumbs

• En utilisant les classes contextuelles d’arrière-plan et de texte intégrées à Bootstrap 4, on peut colorer le Breadcrumb, le texte, etc.
• Dans l’exemple suivant on utilise diverses classes pour le style de Breadcrumb soit pour les textes ou l’arrière plan

<div class="container"> 
    <h3 class="text-primary">Exemple de Breadcrumbs</h3>                 
    <nav aria-label="breadcrumb">                 
        <ol class="breadcrumb bg-dark ">                 
        <li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li>                 
        <li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li>                             
        <li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>                 
        </ol>                 
    </nav>             
    <nav aria-label="breadcrumb">                 
        <ol class="breadcrumb bg-warning ">                 
        <li class="breadcrumb-item "><a href="#" class="text-success">Accueil</a></li>                 
        <li class="breadcrumb-item"><a href="#" class="text-success">Cours</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-success">Développement Web</a></li>                                
        <li class="breadcrumb-item text-success active" aria-current="page">Bootstrap</li>                 
        </ol>                 
    </nav>                 
    <nav aria-label="breadcrumb">                 
        <ol class="breadcrumb bg-info ">                 
        <li class="breadcrumb-item "><a href="#" class="text-dark">Accueil</a></li>                 
        <li class="breadcrumb-item"><a href="#" class="text-dark">Cours</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-dark">Développement Web</a></li>                                
        <li class="breadcrumb-item text-dark active" aria-current="page">Bootstrap</li>                 
        </ol>                 
    </nav>              
    <nav aria-label="breadcrumb">                 
        <ol class="breadcrumb bg-danger ">                 
        <li class="breadcrumb-item "><a href="#" class="text-warning">Accueil</a></li>                 
        <li class="breadcrumb-item"><a href="#" class="text-warning">Cours</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-warning">Développement Web</a></li>                
        <li class="breadcrumb-item text-warning active" aria-current="page">Bootstrap</li>                 
        </ol>                 
    </nav>                 
</div>

• Ce qui nous donne:



6. Changer le séparateur par défaut de Breadcrumb

• Par défaut les Breadcrumbs utilisent une barre oblique pour séparer les éléments de ce dernier.
• Les barres obliques peuvent être changés en changeant $breadcrumb-divider.
• L’exemple suivant montre comment changer la barre oblique par un point en ajoutant une classe CSS pour colorer et tracer ce point

<nav aria-label="breadcrumb">                 
   <ol class="breadcrumb breadcrumb-dot bg-dark ">                 
        <li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li>                 
        <li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li>                             
        <li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>                 
    </ol>                 
 </nav> 

Le CSS

<style>
      .breadcrumb-dot 
      .breadcrumb-item+
      .breadcrumb-item::before {
    content: "•";
    color: #ffffff;
}
</style>

• Ce qui nous donne:



7. Changer la police par défaut de Breadcrumb

• On peut changer la police par défaut des Breadcrumbs, on le mettant dans des éléments div et on ajoute les classes de mise en forme

<div class="font-up-bold text-uppercase">
  <nav aria-label="breadcrumb">                 
    <ol class="breadcrumb breadcrumb-dot bg-dark ">                 
    <li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li>                 
    <li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li>                             
    <li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>                 
    </ol>                 
  </nav> 
</div>

• Ce qui nous donne:



8. Utiliser des icônes dans les Breadcrumbs

<div class="font-up-bold text-uppercase">
<nav aria-label="breadcrumb">                 
    <ol class="breadcrumb breadcrumb-dot bg-dark ">                 
    <li class="breadcrumb-item "><a href="#" class="text-light">
        <span class="fa fa-home mr-2" aria-hidden="true"></span>Accueil</a></li>                 
    <li class="breadcrumb-item "><a href="#" class="text-light">
            <span class="fa fa-book mr-2"  aria-hidden="true"></span>Cours</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-light">
            <span class="fa fa-window-restore mr-2"  aria-hidden="true"></span>Développement Web</a></li>                             
    <li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>                 
    </ol>                 
</nav> 
</div>

• Ce qui nous donne: