Bootstrap - Badges Demo

Was ist eine Badge?

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir in die aufregende Welt der Bootstrap-Badges ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diese Reise zu führen, selbst wenn du noch nie einezeile Code geschrieben hast. Also, schnallt eure virtuellen Rucksäcke an und lassen wir gemeinsam diese Abenteuer antreten!

Eine Badge in Bootstrap ist wie ein digitaler Aufkleber, den du auf deine Webseite hinzufügen kannst. Es ist ein kleines, oft kreis- oder tablettenförmiges Element, das verwendet wird, um zusätzliche Informationen hervorzuheben oder anzuzeigen. Stell dir vor, es sind diese kleinen Benachrichtigungsbubbles, die du in deinen Phone-Apps siehst – sie sind auffällig und informativ!

Realitätsnahes Beispiel

Stell dir vor, du trägst eine Pfadfinderuniform. Die Abzeichen auf deinem Ärmel repräsentieren deine Leistungen, oder? Bootstrap-Badges funktionieren ähnlich in der digitalen Welt. Sie können Zahlen (wie ungelesene Nachrichten) anzeigen, Statusanzeigen (neu, Verkauf, etc.) oder einfach visuelles Interesse auf deiner Webseite hinzufügen.

Einstieg in Bootstrap Badges

Bevor wir in den Code einsteigen, lassen wir unsergebnis sicherstellen, dass wir Bootstrap eingerichtet haben. Keine Sorge; es ist einfacher als ein Zelt auf einem Campingausflug!

Bootstrap einrichten

Um Bootstrap zu verwenden, müssen wir seine CSS- und JavaScript-Dateien in unsere HTML einbinden. Hier ist, wie du das machst:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Badges Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Dein Inhalt kommt hier hin -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Das ist, als ob wir die Bühne für unsere Badge-Performance bereiten. Wir haben die CSS- und JavaScript-Dateien von Bootstrap verlinkt, die uns Zugang zu all den Bootstrap-Goodies geben, einschließlich Badges.

Grundlegende Badge-Nutzung

Nun, da wir alles eingerichtet haben, lassen uns unser erstes Badge erstellen!

Einfaches Badge-Beispiel

<h1>Willkommen auf meinem Blog <span class="badge bg-secondary">Neu</span></h1>

In diesem Beispiel haben wir eine Badge direkt neben unsere Überschrift gesetzt. Das span-Element mit den Klassen badge und bg-secondary erstellt eine einfache graue Badge mit dem Text "Neu".

Erklärung

<span>: Dies ist ein inline-Container, der verwendet wird, um einen Teil eines Textes zu markieren.
class="badge": Diese Bootstrap-Klasse verwandelt unser Span in eine Badge.
bg-secondary: Dies fügt unserer Badge eine graue Hintergrundfarbe hinzu.

Badge-Farben

Bootstrap bietet ein Regenbogen an Farben für deine Badges. Lassen wir uns sie erkunden!

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Erfolg</span>
<span class="badge bg-danger">Gefahr</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">Dunkel</span>

Jede dieser Badges hat eine andere Farbe, perfekt zum Übermitteln verschiedener Bedeutungen oder einfach, um deine Seite farbenfroher zu gestalten!

Farbbedeutungstabelle

Farbe	Typische Nutzung
Primary	Hauptaktionen oder Informationen
Secondary	Weniger wichtige Informationen
Erfolg	Positive Aktionen oder Nachrichten
Gefahr	Warnungen oder Fehlermeldungen
Warning	Warnhinweise
Info	Neutrale Informationsnachrichten
Light	Subtile Hintergründe oder weniger Betonung
Dunkel	Hoher Kontrast oder wichtige Informationen

Pill-Badges

Möchtest du deine Badges runder machen? Hier kommen Pill-Badges!

<span class="badge rounded-pill bg-primary">Pill Badge</span>

Durch Hinzufügen der Klasse rounded-pill verwandeln wir unsere reguläre Badge in eine tablettenförmige. Es ist, als ob wir unserer Badge ein Makeover verpassen!

Badges in Buttons

Badges können auch in Buttons verwendet werden, um einige ziemlich coole Effekte zu erzeugen. Lassen wir es ausprobieren:

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

Dies erstellt einen Button, der "Nachrichten" sagt und eine kleine Badge mit der Zahl 4 zeigt. Es ist perfekt zum Anzeigen von ungelesenen Nachrichtenanzahlen!

Positionierte Badges

Manchmal möchtest du deine Badge in Relation zu einem anderen Element positionieren. Bootstrap macht das mit positionierten Badges einfach:

<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>

Dies erstellt einen Button mit einer Badge, die oben rechts positioniert ist und leicht den Button überlappt. Es ist wie die Kirsche auf deinem Button-Sundae!

Zerlegung

position-relative: Macht den Button zu einem Positionierungs-Kontext für die Badge.
position-absolute: Positioniert die Badge absolut innerhalb des Buttons.
top-0 start-100: Positioniert die Badge oben rechts.
translate-middle: Versetzt die Badge für eine bessere visuelle Ausrichtung.
visually-hidden: Stellt Text für Screenreader zur Verfügung, ohne ihn visuell anzuzeigen.

Fazit

Und da habt ihr es, Leute! Wir sind durch die Landschaft der Bootstrap-Badges gereist, von einfachen farbigen Badges bis hin zu tablettenförmigen und positionierten Badges auf Buttons. Denkt daran, Badges sind wie das Gewürz in deinem Webdesignrezept – verwendet sie klug, um die richtige Menge an Geschmack auf eure Seiten zu geben!

Übung macht den Meister, also habt keine Angst, verschiedene Kombinationen auszuprobieren. Wer weiß? Vielleicht erschaffst du mit deiner kreativen Nutzung von Badges den nächsten großen Trend im Webdesign!

Frohes Coden und möge eure Badges immer hell sein und eure Tooltips immer informativ!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Modals-Demo

Nächstes Tutorial:

Bootstrap - Breadcrumbs-Demo