Im Folgenden haben wir einige Beispiele für Grund gesammelt Bootstrap Rasterlayouts.
Drei gleiche Spalten
Das folgende Beispiel zeigt, wie ein drei gleich breite Spalten bei Tabletten beginnen und zu großen Desktops Skalierung zu erhalten. Bei den Mobiltelefonen, wird automatisch stapeln die Spalten:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> Versuch es selber " Drei Ungleiche Spalten
Das folgende Beispiel zeigt, wie ein drei verschiedenen Breiten Säulen bei Tabletten beginnen und zu großen Desktops Skalierung zu erhalten:
Beispiel
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> Versuch es selber " Zwei Ungleiche Spalten
Das folgende Beispiel zeigt, wie zwei Start verschiedenen Breiten Säulen bei Tabletten zu erhalten und die Skalierung auf große Desktops:
Beispiel
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Versuch es selber " Zwei Säulen mit zwei ineinander geschachtelten Spalten
Das folgende Beispiel zeigt, wie zwei Säulen bei Tabletten beginnen zu erhalten und zu großen Desktop-Skalierung mit zwei weiteren Säulen (gleiche Breite) innerhalb der größeren Säule (bei Mobiltelefonen, diese Spalten und deren verschachtelte Spalten stapelt):
Beispiel
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> Versuch es selber " Mixed: Mobile und Desktop
Das Bootstrap Grid - System verfügt über vier Klassen: xs (Handys), sm (Tabletten), md (Desktops) und lg (größere Desktops). Die Klassen können kombiniert werden, dynamischer und flexibler Layouts zu erstellen.
Tipp: Jede Klasse skaliert, so dass , wenn Sie die gleichen Breiten für einstellen wollen xs und sm , müssen Sie nur angeben xs .
Beispiel
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> Versuch es selber " Tipp: Das Rasterspalten Denken Sie daran , sollten für eine Zeile zu zwölf addieren. Mehr als das, werden Spalten , egal die Stack - viewport .
Mixed: Mobile, Tablet und Desktop
Beispiel
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> Versuch es selber " klar Floats
Klare Schwimmer (mit der .clearfix Klasse) an bestimmten Haltepunkten seltsame Verpackung mit unebenen Inhalte zu verhindern:
Beispiel
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> Versuch es selber " Gegenläufige Spalten
Verschieben Sie Spalten nach rechts mit .col-md-offset-* Klassen. Diese Klassen erhöhen den linken Rand einer Spalte von * Spalten:
Beispiel
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Versuch es selber " Push- und Pull - Spalte ändern Bestell
Ändern Sie die Reihenfolge der Rasterspalten mit .col-md-push-* - .col-md-pull-* .col-md-push-* und .col-md-pull-* Klassen:
Beispiel
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> Versuch es selber "