Das Erstellen von Breadcrumbs ist für die Navigation durch Inhalte in einer logischen Hierarchie unerlässlich. Bootstrap 5 bietet mit seinen Elementen „ol“ und „li“ eine einfache Möglichkeit, dies zu erreichen. Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen von Bootstrap 5-Breadcrumbs:

Schritt 1:Erstellen Sie die Grundstruktur

Beginnen Sie mit der Erstellung einer geordneten Liste (`

`)-Element. Jedes Element in dieser Liste stellt einen Breadcrumb-Link dar.

```html

„

Schritt 2:Breadcrumb-Links hinzufügen

Innerhalb des `

`-Element, fügen Sie ` hinzu
1. `-Elemente für jeden Breadcrumb-Link. Verwenden Sie das Attribut „class“, um jedem „“ die Klasse „breadcrumb-item“ zuzuweisen
2. `-Element.

   Fügen Sie für das letzte Breadcrumb-Element die zusätzliche Klasse „aktiv“ hinzu.

   ```html

   1. Startseite
   2. Bibliothek
   3. Daten

   „

   Schritt 3:Linkattribute hinzufügen

   Wenn Ihre Breadcrumb-Links auf andere Seiten umleiten sollen, können Sie die erforderlichen HTML-Attribute zu den Anker-Tags (``) innerhalb des ` hinzufügen

3. `-Elemente. Um beispielsweise auf die „Home“-Seite zu verlinken, können Sie das „href“-Attribut hinzufügen und die URL des Links angeben.

   ```html

4. Startseite

„

Schritt 4:Passen Sie die Semmelbrösel an

Bootstrap bietet einige Modifikatorklassen, mit denen Sie das Erscheinungsbild Ihrer Breadcrumbs anpassen können. Sie können die folgenden Klassen verwenden, um Ihre Breadcrumbs weiter zu verbessern:

* „.breadcrumb-arrows“:Fügt Pfeile zwischen Breadcrumb-Elementen hinzu

* `.breadcrumb-dots`:Fügt Punkte zwischen Breadcrumb-Elementen hinzu

* `.breadcrumb-slash`:Fügt Schrägstriche zwischen Breadcrumb-Elementen hinzu

* `.breadcrumb-dashed`:Fügt dem aktiven Breadcrumb-Element eine gestrichelte Unterstreichung hinzu

Schritt 5:Zeigen Sie die Semmelbrösel an

Platzieren Sie Ihr `

`-Element mit den Breadcrumb-Links an der gewünschten Stelle auf Ihrer Seite. Bootstrap gestaltet die Breadcrumbs automatisch entsprechend Ihrer Anpassung.

Beispielausgabe

Hier ist ein Beispiel dafür, wie Ihre Bootstrap 5-Breadcrumbs aussehen könnten:

```html

1. Startseite
2. Bibliothek
3. Daten

„

Wenn Sie diese Schritte befolgen, können Sie ganz einfach Bootstrap 5-Breadcrumbs erstellen und anpassen, um das Benutzererlebnis zu verbessern und eine klare Navigation für Ihre Website oder Webanwendung bereitzustellen.