Bootstrap Zusatzklasse
In diesem Kapitel werden einige der Bootstrap in handliche Helfer Klassen kommen könnte.
Text
Die folgenden verschiedenen Klassen zeigen verschiedene Textfarben. Wenn der Text ein Link mit der Maus über den Text bewegen wird gedimmt:
Kategorie | Beschreibung | Beispiele |
---|---|---|
.text-gedämpften | Textstil "text-stumm geschaltet" Kategorie | versuchen |
.text-Primär | Textstil "text-primary" Kategorie | versuchen |
.text-Erfolg | Textstil "text-Erfolg" Kategorie | versuchen |
.text-info | Textstil "text-info" Kategorie | versuchen |
.text-Warnung | Textstil "text-Warnung" Kategorie | versuchen |
.text-Gefahr | Textstil "text-Gefahr" Kategorie | versuchen |
Hintergrund
Die folgenden verschiedenen Klassen zeigt verschiedene Hintergrundfarben. Wenn der Text ein Link mit der Maus über den Text bewegen wird gedimmt:
Kategorie | Beschreibung | Beispiele |
---|---|---|
.bg-Primär | Tabelle Zelle die "bg-primäre" Kategorie mit | versuchen |
.bg-Erfolg | Tabelle Zelle die "bg-Erfolg" Kategorie mit | versuchen |
.bg-info | Tabelle Zelle die "bg-info" Kategorie mit | versuchen |
.bg-Warnung | Tabelle Zelle die "bg-Warnung" Kategorie mit | versuchen |
.bg-Gefahr | Tabelle Zelle die "bg-Gefahr" Kategorie mit | versuchen |
andere
Kategorie | Beschreibung | Beispiele |
---|---|---|
.pull-links | Elemente schweben nach links | versuchen |
.pull-Recht | Elemente schweben nach rechts | versuchen |
.center-Block | Element gesetzt Anzeige: Block und zentriert | versuchen |
.clearfix | float | versuchen |
.show | Pflichtelemente werden angezeigt | versuchen |
.hidden | Pflichtelement Versteck | versuchen |
.sr-only | Neben dem Bildschirmleseprogramm, das versteckte Element auf anderen Geräten | versuchen |
.sr-only-fokussierbarem | In Verbindung mit .sr-only-Klasse angezeigt, wenn das Element den Fokus (zB: Benutzer-Tastatur-Bedienung) bekommt | versuchen |
.text-hide | Die Textseitenelemente enthalten Hintergrund ersetzen | versuchen |
.close | Anzeige Aus-Taste | versuchen |
.caret | Display-Drop-Down-Menü | versuchen |
Weitere Beispiele
Schließen-Symbol
Verwenden Sie gemeinsame Schließen-Symbol des Modal-Box und das Warnfeld zu schließen. Verwenden SieKlasse schließen schließen Symbol zu erhalten.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Einschaltungszeichen
Verwenden Sie caret die Funktion und die Richtung nach unten zu ziehen. Verwenden Sie <span> -Element mitKlasse caret diese Funktion zu erhalten.
Die Ergebnisse sind wie folgt:
Schnelle floating
Sie können jedeKlasse Pull-links Pull-rechtsoder nach links oder rechts schwebenden Elemente verwenden. Das folgende Beispiel veranschaulicht diesen Punkt.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Um die Komponenten der Navigationsleiste auszurichten, verwenden Sie.navbar-links oder .navbar-rechtsstatt. Siehe die Navigationsleiste Bootstrap .
zentriert Inhalt
VerwendenKlasse Mitte-Block - Elemente zu zentrieren.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
float
So löschen Sie das Floating - Element verwenden.clearfix Klasse.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Ein- und Ausblenden Inhalt
Sie können das Element zwingen ein- oder ausblenden (einschließlich Screen - Reader) durch die Verwendung vonKlasse .show und .hiddenkommen.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Bildschirmlese
Sie können alle Elemente auf dem Gerät setzen durch eine versteckteKlasse .sr-nur mit, zusätzlich zu einem Screenreader.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Hier sehen wir zwei Arten von Etiketten Eingangs - Tags mitKlasse sr-only, so das Etikett nur auf Bildschirm Leser sichtbar.