Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Breadcrumb: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Webentwickler! Heute tauchen wir in die Welt der Bootstrap-Breadcrumbs ein. Keine Sorge, wenn du noch nie von Breadcrumbs gehört hast - bis zum Ende dieses Tutorials wirst du sie wie ein Profi erstellen! Lassen wir gemeinsam diese aufregende Reise antreten.

Bootstrap - Breadcrumb

Was sind Breadcrumbs?

Bevor wir uns dem Code widmen, lassen wir uns zunächst darauf einstimmen, was Breadcrumbs sind. Stell dir vor, du erkundest einen riesigen Wald (was das Internet manchmal auch fühlen kann). Wärst du nicht froh, eine Spur von Breadcrumbs zu haben, die dir helfen, deinen Weg zurückzufinden? Genau das tun Breadcrumbs im Webdesign!

Breadcrumbs sind eineNavigationshilfe, die den Benutzern ihre aktuelle Position innerhalb der Hierarchie einer Webseite zeigt. Sie werden typischerweise als Reihe von Links oben auf einer Seite angezeigt und ermöglichen es den Benutzern, leicht zu höheren Ebeneseiten zurückzukehren.

Warum Bootstrap Breadcrumbs verwenden?

Bootstrap, unser freundlicher Nachbar-CSS-Framework, macht das Erstellen von Breadcrumbs zum Kinderspiel. Es bietet vorgefertigte Komponenten, die wir leicht in unsere Webseiten integrieren können. Also, anstatt das Rad neu zu erfinden, können wir die fertigen Breadcrumbs von Bootstrap verwenden und sie nach Herzenslust anpassen!

Nun, rollen wir die Ärmel hoch und beginnen mit dem Coden!

Grundlegende Breadcrumbs

Schritt 1: Bootstrap einrichten

Zuerst müssen wir Bootstrap in unsere HTML-Datei einfügen. Füge die folgenden Zeilen in den <head>-Bereich deiner HTML-Datei ein:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Dies verknüpft die Bootstrap-CSS- und JavaScript-Dateien mit unserem Dokument.

Schritt 2: Ein grundlegendes Breadcrumb erstellen

Nun erstellen wir unser erstes Breadcrumb! Hier ist die grundlegende Struktur:

<nav aria-label="breadcrumb">
<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" aria-current="page">Daten</li>
</ol>
</nav>

Lassen wir das auseinanderbrechen:

  1. Wir umgeben unser Breadcrumb mit einem <nav>-Element mit aria-label="breadcrumb". Dies verbessert die Zugänglichkeit für Screenreader.
  2. Das <ol>-Element mit der Klasse breadcrumb erstellt den Breadcrumb-Container.
  3. Jedes <li>-Element repräsentiert eine Ebene in der Breadcrumb-Hierarchie.
  4. Die breadcrumb-item-Klasse stylt jedes Element.
  5. Das letzte Element hat eine active-Klasse und aria-current="page", um die aktuelle Seite anzuzeigen.

Wenn du dies in deinem Browser anzeigst, siehst du eine schicke Breadcrumb-Spur: Startseite > Bibliothek > Daten

Schritt 3: Links hinzufügen

Um unsere Breadcrumbs funktional zu machen, müssen wir richtige Links hinzufügen. Lassen wir den Code anpassen:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Startseite</a></li>
<li class="breadcrumb-item"><a href="library.html">Bibliothek</a></li>
<li class="breadcrumb-item active" aria-current="page">Daten</li>
</ol>
</nav>

Jetzt führt ein Klick auf "Startseite" zu index.html und "Bibliothek" zu library.html. Die aktuelle Seite ("Daten") hat keinen Link, da wir bereits dort sind.

Trennzeichen

Standardmäßig verwendet Bootstrap ein Schrägstrich (/) als Trennzeichen zwischen Breadcrumb-Elementen. Aber was ist, wenn wir kreativ werden und etwas anderes verwenden möchten? Lassen wir uns ansehen, wie wir unsere Trennzeichen anpassen können!

benutzerdefinierte Trennzeichen mit CSS

Wir können das Trennzeichen mit CSS ändern. Hier ist, wie man es macht:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<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" aria-current="page">Daten</li>
</ol>
</nav>

In diesem Beispiel haben wir das Trennzeichen in ein ">"-Symbol geändert, indem wir die --bs-breadcrumb-divider CSS-Variablen verwenden.

Verwendung von Symbolen als Trennzeichen

Möchtest du noch eleganter werden? Lassen wir ein Symbol als Trennzeichen verwenden! Wir verwenden Font Awesome-Symbole für dieses Beispiel:

<!-- Font Awesome in deinem HTML-Head einfügen -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- Dein Breadcrumb-HTML -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Startseite</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">Bibliothek</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
Daten
</li>
</ol>
</nav>

Hier haben wir das --bs-breadcrumb-divider auf einen leeren String gesetzt und manuell Font Awesome-Pfeil-Symbole zwischen unsere Breadcrumb-Elemente eingefügt.

Best Practices für Breadcrumbs

Nun, da du weißt, wie man Breadcrumbs erstellt und anpasst, lassen wir uns über einige Best Practices unterhalten:

  1. Halte es einfach: Füge nicht jede einzelne Seite in deine Breadcrumb-Spur ein. Halte dich an Hauptkategorien.
  2. Verwende klare Bezeichnungen: Stelle sicher, dass deine Breadcrumb-Bezeichnungen prägnant und beschreibend sind.
  3. Verwende Breadcrumbs nicht auf Ein-Level-Websites: Sie sind am nützlichsten für Websites mit einer klaren Hierarchie.
  4. Platziere sie oben: Breadcrumbs werden typischerweise oben auf der Seite platziert, unter der Hauptnavigation.

Schlussfolgerung

Glückwunsch! Du hast gerade gelernt, wie man Bootstrap-Breadcrumbs erstellt und anpasst. Vom grundlegenden Einsatz bis hin zu schicken Trennzeichen bist du nun gerüstet, um deine Benutzer durch deine Webseite zu lotsen.

Denke daran, dass Breadcrumbs wie Wegweiser in deinem digitalen Wald sind. Sie helfen den Benutzern zu verstehen, wo sie sind und wie sie zurück zu ihrem Ausgangspunkt finden. Verwende sie weise, und deine Benutzer werden dir danken, dass du ihre Reise durch deine Webseite zum Kinderspiel gemacht hast!

Weiter üben, weiter erkunden und vor allem: weiter Spaß haben bei der Webentwicklung. Bis zum nächsten Mal, happy coding!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap - Abzeichen
Nächstes Tutorial:
Bootstrap - Schaltflächen