Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap-Seitennummerierung Bootstrap-Navigationsleiste

Bootstrap-Brotkrümelnavigation

Brotkrümelnavigation (Breadcrumbs) ist eine Anzeige, die auf der Hierarchieinformation der Website basiert. Zum Beispiel, in einem Blog kann die Brotkrümelnavigation das Veröffentlichungsdatum, die Kategorie oder den Tag anzeigen. Sie stellen die Position der aktuellen Seite in der Navigationshierarchie dar.

Brotkrümelnavigation (Breadcrumbs) in Bootstrap ist eine einfache Anzeige, die auf der Hierarchieinformation der Website basiert. .breadcrumb Die Klasse der nicht aufgezählten Liste. Der Trennzeichen wird automatisch durch die Klasse hinzugefügt, die in der unten gezeigten Datei bootstrap.min.css definiert ist:

.breadcrumb > li　+　li:before {
　　　　color: #CCCCCC;
　　　　content: "/　";
　　　　padding: 0　5px;
}

Nachstehende Beispiele demonstrate die Brotkrümelnavigation:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Brotkrümelnavigation</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">2012</a></li>
	<li class="active">Dezember</li>
</ul>
</body>
</html>

Testen Sie heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Seitennummerierung Bootstrap-Navigationsleiste