Bootstrap Grid – Gestapelt bis horizontal
Beispiel für ein Bootstrap-Raster: Gestapelt bis horizontal
Wir werden ein grundlegendes Rastersystem erstellen, das auf extra kleinen Geräten gestapelt beginnt, bevor es auf größeren Geräten horizontal wird.
Das folgende Beispiel zeigt ein einfaches zweispaltiges Layout „gestapelt-zu-horizontal“, was bedeutet, dass es zu einer 50 %/50 %-Aufteilung auf allen Bildschirmen führt, mit Ausnahme von extra kleinen Bildschirmen, die automatisch gestapelt werden (100 %).
Beispiel: Gestapelt bis horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tipp: Die Zahlen in den .col-sm-*Klassen geben an, wie viele Spalten das div umfassen soll (von 12). Also .col-sm-1über 1 Spalte, .col-sm-4über 4 Spalten,
.col-sm-6über 6 Spalten usw.
Hinweis: Achten Sie darauf, dass die Summe immer 12 ergibt!
Tipp: Sie können jedes Layout mit fester Breite in ein Layout mit voller Breite.container umwandeln, indem Sie die Klasse ändern in .container-fluid:
Beispiel: Flüssigkeitsbehälter
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>