Inhaltsverzeichnis

Die Anleitung zu Bootstrap Breadcrumb

View more Tutorials:

1- Breadcrumb

Breadcrumb ist ein horizontales Navigationsmenü, das dem Benutzer sich die Stelle der momentanen Seite, die sie gerade zugreifen, vorstellen.  Breadcrumb wird normalerweise in die  website mit der größen Anzahl der Seiten und der inhaltlich Hierarchie verwendet. Z.B die Website für die Anleitung and Nachschlagen,...
Unter ist das die Illustrator einer  website mit der Verwendung von  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 stellt ein System des Tags und Attributes zur Unterstützung des Geräten wie  Screen Reader für die Blinde vor. Und  Bootstrap schlagt Ihnen, es zu verwenden um den Standards einer modernen Webseite entspricht.
Der Tag  <nav> ist ein der Tags, die die Geräten wie  Screen Reader unterstützt, wenn diese Geräte den Tag  <nav> erkennen, verstehen sie, dass das ein Navigationraum ist. Sie können diese anderen Tags wie  <div>, <span> anstatt vom   <nav> verwenden, aber sie brauchen das Attribut  role="navigation" ​​​​​​​mehr.
Das ist eine einfache Kode damit Sie ein  Breadcrumb erstellen, Achtung: Ihre Kode ist nicht freundlich mit den Geräten wie  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>
Und das ist eine Kode zur Erstellung eines  Breadcrumb und freundlich mit den Geräten wie  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

Nach dem Default verwendet  Bootstrap das Zeichen  / um die  breadcrumb-item zu trennen. Un Sie können es mit einem anderen Ding ersetzen.
.breadcrumb-item + .breadcrumb-item::before         {
   font-family: 'fontAwesome';
   content: "\f101" !important;
}
"Base64 SVG Icon" verwenden:
.breadcrumb-item + .breadcrumb-item::before {
   content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) !important;
}
Image Icon verwenden:
.breadcrumb-item + .breadcrumb-item::before         {
    content: url(../images/right-arrow-16.png) !important;
}

View more Tutorials: