Bootstrap - Abzeichen: Flair zu Ihren Web-Elementen hinzufügen

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir ein in die aufregende Welt der Bootstrap-Abzeichen. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie auf dieser Reise Schritt für Schritt zu führen. Also holen Sie sich Ihr lieblingsGetränk, machen Sie es sich gemütlich und lassen Sie uns gemeinsam dieses Abenteuer beginnen!

Was sind Bootstrap-Abzeichen?

Abzeichen sind kleine.Counter- und Beschriftungselemente, die zusätzliche Informationen zu Ihren Web-Elementen hinzufügen können. Sie sind wie winzige digitale Aufkleber, die Ihre Website informativer und visuell ansprechender machen können. Stellen Sie sich vor, Sie erstellen eine Social-Media-Plattform und möchten anzeigen, wie viele ungelesene Nachrichten ein Benutzer hat - hier kommen Abzeichen ins Spiel!

Grundlegendes Abzeichenbeispiel

Lassen Sie uns mit einem einfachen Beispiel beginnen:

<h1>Willkommen bei MySpace 2.0 <span class="badge bg-secondary">Neu</span></h1>

In diesem Beispiel haben wir ein Abzeichen neben unsere Überschrift hinzugefügt. Das span-Element mit den Klassen badge und bg-secondary erstellt ein kleines, graues Abzeichen, das "Neu" sagt. Es ist wie ein "Neu!"-Aufkleber auf einem Produkt im Geschäft - es zieht die Aufmerksamkeit auf sich!

Abzeichen in Aktion

Abzeichen mit Buttons

Abzeichen können verwendet werden, um zusätzliche Informationen zu Buttons bereitzustellen. Hier ist ein Beispiel:

<button type="button" class="btn btn-primary">
Benachrichtigungen <span class="badge bg-secondary">4</span>
</button>

Dieser Code erstellt einen Button, der "Benachrichtigungen" sagt und ein kleines Abzeichen zeigt, das die Zahl 4 anzeigt. Es ist perfekt, um anzuzeigen, wie viele ungelesene Benachrichtigungen ein Benutzer hat!

Abzeichen für Benachrichtigungen

Wenn wir von Benachrichtigungen sprechen, sehen wir uns an, wie wir Abzeichen verwenden können, um ein Benachrichtigungssymbol zu erstellen:

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">ungelesene Nachrichten</span>
</span>
</i>

Dieser Code erstellt eine Glocken-Symbol mit einem roten Abzeichen, das "99+" anzeigt. Das visually-hidden-span ist für Screen-Reader gedacht, macht unsere Website zugänglicher.

Positionierung von Abzeichen

Abzeichen können auf verschiedene Weisen positioniert werden. Lassen Sie uns einige Beispiele anschauen:

<button type="button" class="btn btn-primary position-relative">
Posteingang
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">ungelesene Nachrichten</span>
</span>
</button>

Dieser Code positioniert ein Abzeichen in der oberen rechten Ecke eines Buttons. Es ist wie ein Klebezettel an der Ecke eines Buches!

Abzeichen als Indikatoren

Abzeichen können auch als Indikatoren verwendet werden:

<button type="button" class="btn btn-primary position-relative">
Profil
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">Neue Alerts</span>
</span>
</button>

Dies erstellt einen kleinen roten Punkt-Indikator auf einem Button - perfekt, um anzuzeigen, dass etwas Neues vorliegt, ohne eine Zahl anzugeben.

Anpassung der Abzeichenfarben

Bootstrap bietet eine Vielzahl von Hintergrundfarben für Abzeichen. Hier ist eine Tabelle der verfügbaren Klassen:

Klasse	Beschreibung
bg-primary	Blaues Abzeichen
bg-secondary	Graues Abzeichen
bg-success	Grünes Abzeichen
bg-danger	Rotes Abzeichen
bg-warning	Gelbes Abzeichen
bg-info	Hellblaues Abzeichen
bg-light	Weißes Abzeichen
bg-dark	Schwarzes Abzeichen

Sie können diese Klassen wie folgt verwenden:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Pill-Abzeichen

Wenn Sie möchten, dass Ihre Abzeichen abgerundete Enden haben, können Sie die Klasse rounded-pill verwenden:

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>

Diese Pillenform-Abzeichen sind großartig für Tags oder Etiketten!

Alles zusammenfügen

Nun, da wir all diese Konzepte behandelt haben, lassen Sie uns ein komplexeres Beispiel erstellen, das mehrere Abzeichentypen integriert:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Startseite
<span class="badge bg-primary rounded-pill">Neu</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Nachrichten
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">ungelesene Nachrichten</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Benachrichtigungen
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">Neue Alerts</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

Dieser Code erstellt eine Navigationsleiste mit drei Elementen: Startseite (mit einem "Neu"-Abzeichen), Nachrichten (mit einem Zähler-Abzeichen) und Benachrichtigungen (mit einem Indikator-Abzeichen). Es ist wie die Bedienkonsole eines Raumschiffs - jedes Abzeichen gibt dem Benutzer wichtige Informationen auf einen Blick!

Und da haben Sie es, Leute! Wir haben die Welt der Bootstrap-Abzeichen erkundet, von einfachen Etiketten bis hin zu komplexen Benachrichtigungen. Erinnern Sie sich daran, dass wie bei jedem Werkzeug in der Webentwicklung der Schlüssel die maßvolle Verwendung ist. Abzeichen sind großartig, um Aufmerksamkeit zu erregen, aber zu viele können Ihre Website unordentlich aussehen lassen.

Als wir uns verabschieden, erinnere ich mich an einen Schüler, der einmal sagte: "Abzeichen sind wie die Streusel auf einem Cupcake - sie machen alles mehr Spaß!" Und ich kann das nur bestätigen. Also gehen Sie los, experimentieren Sie und fügen Sie Ihrer Website einige badge-tastische Akzente hinzu!

Credits: Image by storyset