Bootstrap Hilfsklassen

In diesem Kapitel werden einige nützliche Hilfsklassen in Bootstrap besprochen.

Text

Die folgenden verschiedenen Klassen zeigen unterschiedliche Textfarben. Wenn es sich bei dem Text um einen Link handelt, wird er beim Hovern dunkler.

Klasse	Beschreibung	Beispiel
.text-muted	Der Textstil der Klasse "text-muted"	Ausprobieren
.text-primary	Der Textstil der Klasse "text-primary"	Ausprobieren
.text-success	Der Textstil der Klasse "text-success"	Ausprobieren
.text-info	Der Textstil der Klasse "text-info"	Ausprobieren
.text-warning	Der Textstil der Klasse "text-warning"	Ausprobieren
.text-danger	Der Textstil der Klasse "text-danger"	Ausprobieren

Hintergrund

Die folgenden verschiedenen Klassen zeigen unterschiedliche Hintergrundfarben. Wenn es sich bei dem Text um einen Link handelt, wird er beim Hovern dunkler.

Klasse	Beschreibung	Beispiel
.bg-primary	Tabellenzellen verwenden die Klasse "bg-primary"	Ausprobieren
.bg-success	Tabellenzellen verwenden die Klasse "bg-success"	Ausprobieren
.bg-info	Tabellenzellen verwenden die Klasse "bg-info"	Ausprobieren
.bg-warning	Tabellenzellen verwenden die Klasse "bg-warning"	Ausprobieren
.bg-danger	Tabellenzellen verwenden die Klasse "bg-danger"	Ausprobieren

Sonstiges

Klasse	Beschreibung	Beispiel
.pull-left	Ein Element nach links floaten	Ausprobieren
.pull-right	Ein Element nach rechts floaten	Ausprobieren
.center-block	Element auf display:block setzen und zentrieren	Ausprobieren
.clearfix	Floats aufheben (Clearfix)	Ausprobieren
.show	Element erzwingend anzeigen	Ausprobieren
.hidden	Element erzwingend ausblenden	Ausprobieren
.sr-only	Elemente auf allen Geräten außer für Screenreader ausblenden	Ausprobieren
.sr-only-focusable	Wird in Kombination mit der Klasse .sr-only verwendet; wird angezeigt, wenn das Element den Fokus erhält (z. B. für reine Tastaturnutzer)	Ausprobieren
.text-hide	Den im Seitenelement enthaltenen Textinhalt durch ein Hintergrundbild ersetzen	Ausprobieren
.close	Schließen-Schaltfläche anzeigen	Ausprobieren
.caret	Dropdown-Funktionalität anzeigen	Ausprobieren

---

Weitere Beispiele

Schließen-Symbol

Verwenden Sie das allgemeine Schließen-Symbol, um modale Fenster und Warnmeldungen zu schließen. Verwenden Sie die Klasseclose, um das Schließen-Symbol zu erhalten.

Das Ergebnis ist wie folgt:

aria-hidden="true"Dies dient hauptsächlich dazu, Menschen mit Behinderungen (wie Blinden) die Nutzung von Screenreadern zu erleichtern (die den Inhalt automatisch vorlesen). Wenn das Gerät Inhalte mit diesem Attribut wiedergibt, werden diese übersprungen, um Verwirrung für Menschen mit Behinderungen zu vermeiden!

Caret

Verwenden Sie das Caret-Symbol, um Dropdown-Funktionalität und -Richtung anzuzeigen. Verwenden Sie ein <span>-Element mit der Klassecaret, um diese Funktionalität zu erhalten.

Das Ergebnis ist wie folgt:

Schnelle Floats

Sie können die Klassepull-leftoderpull-rightverwenden, um ein Element nach links oder rechts zu floaten. Das folgende Beispiel veranschaulicht dies.

Das Ergebnis ist wie folgt:

Um Komponenten in der Navigationsleiste auszurichten, verwenden Sie stattdessen.navbar-leftoder.navbar-right. SieheBootstrap Navbar。

Inhalt zentrieren

Verwenden Sie die Klassecenter-block, um Elemente zu zentrieren.

Das Ergebnis ist wie folgt:

Floats aufheben

Um Floats eines Elements aufzuheben, verwenden Sie die Klasse.clearfix .

Das Ergebnis ist wie folgt:

Inhalt ein- und ausblenden

Sie können die Klassen.showund.hiddenverwenden, um ein Element zu erzwingen, dass es angezeigt oder ausgeblendet wird (einschließlich für Screenreader).

Das Ergebnis ist wie folgt:

Screenreader

Sie können die Klasse.sr-onlyverwenden, um ein Element auf allen Geräten außer Screenreadern auszublenden.

Das Ergebnis ist wie folgt:

Hier sehen wir, dass die label-Tags für die beiden Eingabefelder beide die Klassesr-onlyhaben, sodass die Beschriftungen nur für Screenreader sichtbar sind.

Weitere Erweiterungen