twitter-bootstrap-3
Rastersystem

Bootstrap-Rastersystem

Bootstrap verwendet ein Grid-System mit Zeilen und Spalten

Im Rastersystem erstellen Sie mithilfe einer Zeilenklasse eine horizontale Box mit insgesamt 12 Spalten der Größe 1, die sich vertikal für verschiedene Bildschirmgrößen eignen. Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten zusammenfassen, um breitere Spalten zu erstellen.

Beispiel: Wenn Sie eine Zeile mit 3 Spalten erstellen möchten, haben Sie ein div mit class = "row" (dh eine horizontale Box) und 3 Spalten (class = col.xs.xx) mit jeweils Größe 3, Größe 2, Größe 7 (3 + 2 + 7 = 12) für xs = besonders kleine Bildschirmgröße

Titel

Lorem Ipsum

Grid-Klassen

Das Bootstrap-Gridsystem verfügt über vier Klassen für das responsive Design wie folgt:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

Wie benutzt man?

Für das grundlegende Beispiel 4 Spalten

<div class="row">
  <div class="col-sm-4">Your Div Content</div>
  <div class="col-sm-4">Your Div Content</div>
  <div class="col-sm-4">Your Div Content</div>
</div>

Beispiel 4 Spalten