Table des matières

Le Tutoriel de Bootstrap Breadcrumb

View more Tutorials:

1- Breadcrumb

Breadcrumb est un menu de navigation (navigation menu) horizontale. Il perment aux utilisateurs d'imaginer l'emplacement de la page en cours à laquelle ils accèdent. Breadcrumb est généralement utilisé dans les website avec un grand nombre de pages avec le contenu hiérarchi, tels que plateforme de partage et de recherche, ...
Ci-dessous, l'illustration d'un  website utilisant  Breadcrumb :

Example:

first-breadcrumb-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Breadcrumb</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4>Bootstrap Breadcrumb</h4>

         <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Tutorials</li>
         </ul>

         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item active" aria-current="page">Frontend</li>
         </ul>

         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item"><a href="#">Frontend</a></li>
            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
         </ul>

      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
HTML5 est utilisé dans un système des étiquettes et des attributs qui soutient les appreils tels que  Screen Reader (Lectures d'écran des non-voyants). Et  Bootstrap vous recommande de l'utiliser afin de répondre aux normes d'un  website modern.
L'étiquette  <nav> est une des étiquettes soutenant les équipements tels que  Screen Reader. Lorsque ces appareils détecte l'étiquette  <nav> et comprend que ceci est la zone de navigation (navigation area). Vous pouvez utiliser d'autres étiquettes telles que  <div>, <span> à la place de  <nav>, mais il est obligatoire d'obtenir l'attribut  role="navigation".
Voici un code simple pour vous afin de créer un  Breadcrumb. Remarque : ce code n'est pas sympa avec l'équipement tel que  Screen Reader :
<ul class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
   <li class="breadcrumb-item"><a href="#">Frontend</a></li>
   <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ul>
Et voici un code qui crée un  Breadcrumb et il est sympa avec des appareils tels que  Screen Reader :
<!-- nav -->

<nav aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</nav>

<!-- div -->
<div role= "navigation" aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</div>

2- Breadcrumb Separator

Par défaut,  Bootstrap utilise  / mark to pour séparer breadcrumb-item. Et vous pouvez le remplacer par autre chose.
.breadcrumb-item + .breadcrumb-item::before         {
   font-family: 'fontAwesome';
   content: "\f101" !important;
}
Utilisez  "Base64 SVG Icon" :
.breadcrumb-item + .breadcrumb-item::before {
   content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) !important;
}
Utilisez  Image Icon :
.breadcrumb-item + .breadcrumb-item::before         {
    content: url(../images/right-arrow-16.png) !important;
}

View more Tutorials: