Bootstrap Responsive Utilities

Bootstrap bietet einige Hilfsklassen für eine schnellere mobilfreundliche Entwicklung. Diese können in Kombination mit Media Queries verwendet werden, um Inhalte für große, kleine und mittlere Geräte ein- und auszublenden.

Verwenden Sie diese Werkzeuge mit Vorsicht und vermeiden Sie es, völlig unterschiedliche Versionen derselben Website zu erstellen.Responsive-Hilfsprogramme gelten derzeit nur für Block- und Tabellenumschaltungen.

Extrakleine Bildschirme
Telefone (<768px)		 Kleine Bildschirme
Tablets (≥768px)		 Mittlere Bildschirme
Desktops (≥992px)		 Große Bildschirme
Desktops (≥1200px)
.visible-xs-* Visible Ausgeblendet Ausgeblendet Ausgeblendet
.visible-sm-* Ausgeblendet Visible Ausgeblendet Ausgeblendet
.visible-md-* Ausgeblendet Ausgeblendet Visible Ausgeblendet
.visible-lg-* Ausgeblendet Ausgeblendet Ausgeblendet Visible
.hidden-xs Ausgeblendet Visible Visible Visible
.hidden-sm Visible Ausgeblendet Visible Visible
.hidden-md Visible Visible Ausgeblendet Visible
.hidden-lg Visible Visible Visible Ausgeblendet

Ab Version v3.2.0 haben Klassen wie .visible-*-* drei Varianten für jede Bildschirmgröße, die jeweils auf eine andere CSS-Anzeigeeigenschaft abzielen, wie unten aufgeführt:

Klassengruppe CSS-Anzeige
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

Am Beispiel von extrakleinen Bildschirmen (xs) sind die verfügbaren .visible-*-*-Klassen daher: .visible-xs-block, .visible-xs-inline und .visible-xs-inline-block.

Die Klassen .visible-xs, .visible-sm, .visible-md und .visible-lg existieren ebenfalls. Sie werden jedoch ab v3.2.0 nicht mehr empfohlen. Bis auf den Sonderfall von <table>-bezogenen Elementen sind sie weitgehend identisch mit .visible-*-block.

Druckklassen

Die folgende Tabelle listet die Druckklassen auf. Verwenden Sie diese, um Inhalte zum Drucken umzuschalten.

class Browser Drucker
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		Visible
.hidden-print Visible

Beispiel

Das folgende Beispiel demonstriert die Verwendung der oben aufgeführten Hilfsklassen. Ändern Sie die Größe des Browserfensters oder laden Sie das Beispiel auf verschiedenen Geräten, um die Klassen für responsive Hilfsmittel zu testen.

Beispiel

<div class="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">Extra small</span> <span class="visible-xs">✔ Visible on extra small devices</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">Small</span> <span class="visible-sm">✔ Visible on small devices</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">Medium</span> <span class="visible-md">✔ Visible on medium devices</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">Large</span> <span class="visible-lg">✔ Visible on large devices</span> </div> </div> </div>

Selbst ausprobieren »

Das Ergebnis wird unten angezeigt:

响应式实用工具

Checkmark (✔)Indicates that the element is visible in the current viewport.

Weitere Erweiterungen