Bootstrap4 Grund教程

Bootstrap4 Formular Bootstrap4 Navigationsleiste

Bootstrap4 Brotkrümelnavigation (Breadcrumb)

Die Brotkrümelnavigation ist ein Navigationsplan, der dem Benutzer die Position der aktuellen Seite auf der Website oder in der Anwendung anzeigt. Die Brotkrümelnavigation kann die Zugänglichkeit von Websites mit vielen Seiten oder komplexen Navigationshierarchien erheblich verbessern.

Die Brotkrümelnavigation ist eine Anzeige, die auf der Hierarchieinformation der Website basiert. Nehmen wir ein Blog als Beispiel, die Brotkrümelnavigation kann das Veröffentlichungsdatum, die Kategorie oder das Label anzeigen. Sie stellen die Position der aktuellen Seite in der Navigationshierarchie dar und sind eine Navigationshilfe im Benutzerinterface.

Die Brotkrümelnavigation in Bootstrap ist eine einfache mit .breadcrumb class der nichtgeordneten Liste. Der Trennzeichen wird durch CSS (bootstrap.min.css) mit ::before und content hinzugefügt. Die folgenden Klassen werden automatisch hinzugefügt:

.breadcrumb-item　+　.breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: "#6c757d;
　　content: "/";
}

Mit der Klasse .breadcrumb auf der geordneten Liste können Sie mit Bootstrap eine statische Brotkrümelnavigation erstellen, wie im folgenden Bootstrap4 Brotkrümelnavigationbeispiel

Beispiel

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">Startseite</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Startseite</a></li>
　　<li class="breadcrumb-item active">Bibliothek</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Startseite</a></li>
　　<li class="breadcrumb-item"><a href="#">Bibliothek</a></li>
　　<li class="breadcrumb-item active">Daten</li>
</ol>
</body>
</html>

Testen Sie es heraus ‹/›

Wir können dies auch nicht als Liste verwenden:

Bootstrap4 Brotkrümelnavigationbeispiel

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="breadcrumb">
　　<a　class="breadcrumb-item"　href="#">Start</a>
　　<a　class="breadcrumb-item"　href="#">Bibliothek</a>
　　<a　class="breadcrumb-item"　href="#">Daten</a>
　　<span　class="breadcrumb-item　active">Bootstrap</span>
</nav>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Bootstrap4 Formular Bootstrap4 Navigationsleiste