Text
In Bedeutung durch Text-Farben mit den Klassen weiter unten. Die Links werden verdunkeln auf schweben:
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .text-muted | Text gestylt mit Klasse "text-muted" | Versuch es |
| .text-primary | Text gestylt mit Klasse "text-primary" | Versuch es |
| .text-success | Text gestylt mit Klasse "text-success" | Versuch es |
| .text-info | Text gestylt mit Klasse "text-info" | Versuch es |
| .text-warning | Text gestylt mit Klasse "text-warning" | Versuch es |
| .text-danger | Text gestylt mit Klasse "text-danger" | Versuch es |
Hintergrund
Fügen Sie durch unten mit den Klassen Hintergrund-Farben bedeutet. Die Links werden wie Textklassen auf schweben verdunkeln:
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .bg-primary | Tabelle Zelle gestylt mit Klasse "bg-primary" | Versuch es |
| .bg-success | Tabelle Zelle ist mit Klasse - Stil "bg-success" | Versuch es |
| .bg-info | Tabelle Zelle ist mit Klasse gestylt "bg-info" | Versuch es |
| .bg-warning | Tabelle Zelle ist mit Klasse - Stil "bg-warning" | Versuch es |
| .bg-danger | Tabelle Zelle ist mit Klasse gestylt "bg-danger" | Versuch es |
Andere
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .pull-left | Schwimmer ein Element nach links | Versuch es |
| .pull-right | Schwimmer ein Element nach rechts | Versuch es |
| .center-block | Setzt ein Element display:block mit margin-right:auto und margin-left:auto | Versuch es |
| .clearfix | Löscht Schwimmer | Versuch es |
| .show | Zwingt ein Element gezeigt werden, | Versuch es |
| .hidden | Erzwingt ein Element versteckt werden | Versuch es |
| .sr-only | Blendet ein Element für alle Geräte außer Bildschirmlesegeräte | Versuch es |
| .sr-only-focusable | Kombinieren Sie mit .sr-nur das Element wieder zu zeigen, wenn es fokussiert wird (zB durch eine Tastatur-only-Benutzer) | Versuch es |
| .text-hide | Hilft Ersetzen eines Textinhalt des Elements mit einem Hintergrundbild | Versuch es |
| .close | Zeigt ein Schließen-Symbol | Versuch es |
| .caret | Zeigt Drop-Down-Funktionalität (umkehren wird automatisch in dropup Menüs) | Versuch es |
Responsive Dienstprogramme
Diese Klassen werden verwendet, um zu zeigen, und / oder verstecken Inhalt von Gerät über Medien-Anfragen.
Verwenden Sie eine oder eine Kombination der verfügbaren Klassen für Makeln Inhalte über viewport Grenzwerte:
| Klassen | Extra kleine Geräte Phones (<768px) | Kleine Geräte Tablets (≥768px) | Medium Geräte Desktops (≥992px) | Große Geräte Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Ab v3.2.0 , die .visible-*-* Klassen in drei Varianten kommen, eine für jeden CSS - display - Eigenschaftswert:
| Gruppe von Klassen | CSS-Anzeige |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
ZB muss für kleine ( sm ) Bildschirme, die zur Verfügung stehende .visible-*-* Klassen sind: .visible-sm-block , .visible-sm-inline und .visible-sm-inline-block .
Die Klassen .visible-xs , .visible-sm , .visible-md und .visible-lg als von v3.2.0 veraltet.
Beispiel
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>Ergebnis:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Versuch es selber "