Bootstrap Responsive Dienstprogramme
Bootstrap bietet einige Hilfsklassen, um die Entwicklung für mobile Geräte freundlich schneller zu erreichen. Diese Abfragen können kombinieren große, kleine und mittlere Anlagen durch die Medien, um den Inhalt des Gerätes zu erkennen, zu zeigen und zu verstecken.
Mit Hilfe dieser Werkzeuge müssen vorsichtig sein, eine völlig verschiedene Versionen der gleichen Stelle zu vermeiden, zu schaffen.Responsive Dienstprogramm ist derzeit nur in den Blöcken und TabellenschaltzurVerfügung.
| Ultra-kleine Bildschirm Telefon (<768px) | Kleiner Bildschirm Tablet (≥768px) | Medium Bildschirm Desktop (≥992px) | Der große Bildschirm Desktop (≥1200px) | |
|---|---|---|---|---|
| .visible-XS- * | sichtbar | verstecken | verstecken | verstecken |
| .visible-SM- * | verstecken | sichtbar | verstecken | verstecken |
| .visible-MD- * | verstecken | verstecken | sichtbar | verstecken |
| .visible-lg- * | verstecken | verstecken | verstecken | sichtbar |
| .hidden-xs | verstecken | sichtbar | sichtbar | sichtbar |
| .hidden-sm | sichtbar | verstecken | sichtbar | sichtbar |
| .hidden-md | sichtbar | sichtbar | verstecken | sichtbar |
| .hidden-lg | sichtbar | sichtbar | sichtbar | verstecken |
Von v3.2.0 Release, geformt wie .visible - * - * Klassengröße für jeden Bildschirm hat drei Varianten, die jeweils für einen anderen CSS-Eigenschaft display Liste ist wie folgt:
| Cluster | CSS-Anzeige |
|---|---|
| .visible - * - blockieren | display: block; |
| .visible - * - inline | display: inline; |
| .visible - * - inline-block | display: inline-block; |
Daher ist die ultra-kleinen Bildschirm (xs), zum Beispiel, verfügbar .visible - * - * Klassen sind: .visible-xs-Block, .visible-xs-inline und .visible-xs-inline-block.
.visible-xs, .visible-sm, .visible-md und .visible-lg-Klassen gibt es auch. Aber von Anfang an v3.2.0 Version wird nicht mehr empfohlen. In besonderen Fällen <table> Elemente nach außen bezogen, sie .Visible - * - Block gleich.
Kategorie Print
Die folgende Tabelle listet die Kategorie Print. Verwenden Sie diese Druckinhalt zu wechseln.
| Klasse | Browser | Drucker |
|---|---|---|
| .visible-print-Block .visible-print-inline .visible-print-inline-block | verstecken | sichtbar |
| .hidden-print | sichtbar | verstecken |
Beispiele
Das folgende Beispiel zeigt oben Hilfsklasse Verwendung aufgeführt. Passen Sie die Größe des Browser-Fensters, oder laden Instanzen auf verschiedenen Geräten, Test reaktions Utility-Klasse.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Häkchen (✔) zeigt an, dass das Element im aktuellen Ansichtsfenster sichtbar ist.