Bootstrap - Spinners
Willkommen, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der Bootstrap-Spinners ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hole dir dein Lieblingsgetränk, setze dich bequem hin und lasst uns durch diesen Tutorial drehen!
Wie es funktioniert
Spinners in Bootstrap werden verwendet, um einen Ladezustand in deinen Webanwendungen anzuzeigen. Sie sind wie diese kleinen drehenden Kreise, die du siehst, wenn eine Website Inhalte lädt. Diese nützlichen Komponenten verbessern das Benutzererlebnis, indem sie eine visuelle Rückmeldung bieten, dass im Hintergrund etwas passiert.
Bootstrap-Spinners werden mit HTML, CSS und einem Schuss JavaScript-Zauber erstellt. Sie verwenden benutzerdefiniertes CSS, um die Drehanimation zu erstellen, ensuring ein reibungsloses und konsistentes Aussehen across verschiedenen Browsern und Geräten.
Rand-Spinner
Lassen wir mit dem am einfachstenen Spinner beginnen: dem Rand-Spinner. Dies ist der Standard-Spinner-Stil in Bootstrap.
<div class="spinner-border" role="status">
<span class="visually-hidden">Laden...</span>
</div>In diesem Beispiel haben wir ein div-Element mit zwei Klassen: spinner-border und role="status". Die spinner-border-Klasse applies die Drehanimation, während role="status" Hilfssysteme dazu bringen, zu verstehen, dass dies ein Statusindikator ist.
Innerhalb des div haben wir ein span mit der Klasse visually-hidden.Dieser Text ist auf dem Bildschirm nicht sichtbar, kann aber von Hilfssystemen gelesen werden, was die Zugänglichkeit für Benutzer mit Sehbehinderungen verbessert.
Farben
Genau wie ein Chamäleon, das seine Farben ändert, können unsere Spinners sich an verschiedene Themen anpassen! Bootstrap ermöglicht es dir, die Farbe deiner Spinners mit Textfarben-Utilities anzupassen.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Laden...</span>
</div>Jeder Spinner in diesem Beispiel hat eine zusätzliche Klasse wie text-primary, text-secondary, etc. Diese Klassen ändern die Farbe des Spinners, um dem Bootstrap-Farbschema zu entsprechen.
Wachsender Spinner
Wenn Rand-Spinners nicht dein杯茶 sind, bietet Bootstrap eine andere Geschmacksrichtung an: den wachsenden Spinner. Dieser Spinner wächst und schrumpft anstelle von Drehen.
<div class="spinner-grow" role="status">
<span class="visually-hidden">Laden...</span>
</div>Die Struktur ist ähnlich wie bei dem Rand-Spinner, aber wir verwenden die Klasse spinner-grow anstelle von spinner-border.
Ausrichtung
Die Ausrichtung von Spinners ist so einfach wie Pie mit Bootstrap's Flexbox-Utilities. Sehen wir uns einige Beispiele an:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Laden...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Laden...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>In dem ersten Beispiel verwenden wir justify-content-center, um den Spinner horizontal zuzentrieren. In dem zweiten Beispiel platzieren wir den Spinner vertikal ausgerichtet mit etwas Text, indem wir align-items-center verwenden.
Randabstand
Brauchst du etwas Platz um deinen Spinner? Bootstrap's Randabstand-Utilities kommen zur Rettung!
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Laden...</span>
</div>Die m-5-Klasse fügt einen Rand von Größe 5 (was typischerweise 3rem ist) um alle Seiten des Spinners hinzu.
Platzierung
Spinners können in verschiedene andere Elemente eingefügt werden. Hier ist, wie du einen Spinner in eine Schaltfläche platzieren kannst:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Laden...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Laden...
</button>In diesen Beispielen platzieren wir den Spinner innerhalb einer Schaltfläche und verwenden spinner-border-sm, um ihn kleiner zu machen.
Flex
Flexbox-Utilities können dir helfen, komplexere Layouts mit Spinners zu erstellen:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Laden...</span>
</div>
</div>Dies zentriert den Spinner horizontal in seinem Behälter.
Schweben
Für die Zeiten, wenn du deinen Spinner schweben lassen möchtest, sind Bootstrap's Schweb utilities hier, um zu helfen:
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Laden...</span>
</div>
</div>Die float-end-Klasse lässt den Spinner nach rechts in seinem Behälter schweben.
Textausrichtung
Textausrichtungs-Utilities können auch mit Spinners verwendet werden:
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Laden...</span>
</div>
</div>Dies zentriert den Spinner in seinem Behälter mit Textausrichtung.
Größe
Manchmal spielt die Größe eine Rolle! Du kannst die Größe deiner Spinners mit Bootstrap's Größenklassen anpassen:
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Laden...</span>
</div>Verwende spinner-border-sm oder spinner-grow-sm für kleinere Spinners. Für benutzerdefinierte Größen kannst du inline-Stile verwenden, um spezifische Abmessungen festzulegen.
Schaltflächen
Last but not least, schauen wir uns an, wie man Spinners in Schaltflächen verwendet:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Laden...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Laden...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Laden...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Laden...
</button>Diese Beispiele zeigen, wie man sowohl Rand- als auch wachsende Spinners in Schaltflächen einbindet, mit und ohne begleitenden Text.
Und das war's, Leute! Du bist jetzt ein Bootstrap-Spinner-Experte. Denke daran, Übung macht den Meister, also habe keine Angst, diese Komponenten in deinen Projekten auszuprobieren. Frohes Coden und möge deine Webseiten immer im Stil drehen!
Credits: Image by storyset