Bootstrap-Breadcrumbs

A Semmelbrösel ist eine Navigationsfunktion, die den Navigationspfad des Benutzers in einer Website oder Webanwendung anzeigt. Breadcrumbs erscheinen normalerweise horizontal oben auf einer Webseite. Wir verwenden die Breadcrumb-Navigation für große Websites mit hierarchisch angeordneten Seiten.

Eine Website unterteilt die Website in Links von Kategorien und Unterkategorien, sodass wichtige Informationskategorien in sequentieller Reihenfolge verknüpft werden können. Dem Benutzer wird die Breadcrumb-Navigation angezeigt, sodass er leicht genau erkennen kann, wo sich diese Webseite innerhalb der Website befindet. Breadcrumbs bieten Links zu jeder vorherigen Seite, durch die man navigieren kann, um zur aktuellen Seite zu gelangen.

Mithilfe der Klasse können wir Breadcrumbs erstellen .Breadcrumb mit einer ungeordneten Liste in Bootstrap.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Das folgende Beispiel zeigt die Technik, die zum Implementieren der Breadcrumbs in Bootstrap verwendet wird. Wenn Sie Fragen zu Bootstrap-Breadcrumbs haben, schreiben Sie diese bitte in den Kommentarbereich.

Beispiel für Bootstrap-Breadcrumbs

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Breakcrumbs Example</h2>
<ul class="breadcrumb">
	 <li><a href="#">Home</a></li>
	 <li><a href="#">About Us</a></li>
	 <li class="active">Services</a></li>
	 <li><a href="#">Contact Us</a></li>
	 <li><a href="#">Sign In</a></li>
</ul>
</div>
</body>
</html>

Das obige Skript verwendet die Klasse .Breadcrumb zum Erstellen von Breadcrumbs in einer Website oder Webanwendung. Nach der Ausführung des Skripts wird vor dem Inhalt automatisch ein Trennzeichen hinzugefügt. Trennzeichen werden automatisch in CSS hinzugefügt :Vor Und Inhalt.

  • Führen Sie die Bootstrap Breadcrumbs-Demo aus

Beispiel für Bootstrap-Breadcrumbs

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen