Latest web development tutorials

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

<P> Symbol Schließen Instanz <button type = "button" class = "close" aria-hidden = "true"> & Zeiten; </ Button> </ P>

Versuchen »

Die Ergebnisse sind wie folgt:

Schließen-Symbol

Einschaltungszeichen

Verwenden Sie caret die Funktion und die Richtung nach unten zu ziehen. Verwenden Sie <span> -Element mitKlasse caret diese Funktion zu erhalten.

Beispiele

<P> caret Instanz <span class = "Caret"> </ span> </ P>

Versuchen »

Die Ergebnisse sind wie folgt:

Einschaltungszeichen

Schnelle floating

Sie können jedeKlasse Pull-links Pull-rechtsoder nach links oder rechts schwebenden Elemente verwenden. Das folgende Beispiel veranschaulicht diesen Punkt.

Beispiele

<Div class = "Pull-left"> Schnell linke Floating </ div> <Div class = "Pull-right"> Recht schnell schwimmend </ div>

Versuchen »

Die Ergebnisse sind wie folgt:

Schnelle floating

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

<Div class = "Zeile"> <Div class = "center-Block" style = "width: 200px; Hintergrund -Farbe: #ccc;"> Dies ist das Zentrum-Block - Instanz </ div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Zentriert Inhaltsblock

float

So löschen Sie das Floating - Element verwenden.clearfix Klasse.

Beispiele

<Div class = "clearfix" style = "background: # D8D8D8; border: 1px solid # 000; padding: 10px;"> <Div class = "Pull-links" style = "background: # 58D3F7; "> Schnell linke Floating </ div> <Div class = "Pull-right" style = "background: # DA81F5; "> Recht schnell schwimmend </ div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

float

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

<Div class = "Zeile" style = "padding: 91px 100px 19px 50px;"> <Div class = "show" style = "left-margin: 10px ; width: 300px; background-color: #ccc;"> Dies ist ein Beispiel für die Show Klasse </ div> <Div class = "hidden" style = "width: 200px; Hintergrund -Farbe: #ccc;"> Dies ist ein Beispiel der Haut Klasse </ div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Ein- und Ausblenden Inhalt

Bildschirmlese

Sie können alle Elemente auf dem Gerät setzen durch eine versteckteKlasse .sr-nur mit, zusätzlich zu einem Screenreader.

Beispiele

<Div class = "Zeile" style = "padding: 91px 100px 19px 50px;"> <Form class = "form-inline" role = "Form"> <Div class = "form-Gruppe"> <Bezeichnung class = "sr-only" for = "E - Mail"> E - Mail - Adresse </ label> <Input type = "email" class = "Form-control" Platzhalter = "Geben Sie E - Mail"> </ Div> <Div class = "form-Gruppe"> <Bezeichnung class = "sr-only" for = "pass"> Passwort </ label> <Input type = "password" class = "Form-control" Platzhalter = "Passwort"> </ Div> </ Form> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Bildschirmlese

Hier sehen wir zwei Arten von Etiketten Eingangs - Tags mitKlasse sr-only, so das Etikett nur auf Bildschirm Leser sichtbar.