Das Gridsystem hatten wir bereits oben kurz angesprochen. Es wird hier noch einmal ausführlich erklärt. Es gibt auch eine deutsche Übersetzung der Bootstrap-Seite unter http://holdirbootstrap.de/css/#grid.
Bei Fragen kannst du natürlich gerne unser Supportforum nutzen und bei Bedarf werden wir diesen Punkt ebenfalls erweitern.
Innerhalb einer Seite oder eines Beitrags kannst du dieses Gridsystem über einen Shortcode nutzen um eventuell zwei Textbereiche nebeneinander darzustellen.
Gridoptionen
Bevor wir mit dem eigentlichen Shortcode anfangen, hier noch mal eine kleiner Erklärung des Gridsystems.
Extra-kleine Geräte Smartphones (<768px) |
Kleine Geräte Tablets (≥768px) |
Mittlere Geräte Desktop-PCs (≥992px) |
Große Geräte Desktop-PCs (≥1200px) |
|
---|---|---|---|---|
Raster-Verhalten | Durchgehend horizontal | Zuerst minimiert, über Umbruchpunkten horizontal | ||
Container-Breite | Keine (auto) | 750px | 970px | 1170px |
Klassen-Präfix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
Spaltenanzahl | 12 | |||
Spaltenbreite | auto | ~62px | ~81px | ~97px |
Abstandsbreite | 30px (15px auf jeder Seite einer Spalte) | |||
Verschachtelbar | ja | |||
Abrückung | ja | |||
Spaltenumordnung | ja |
Hinweis: In unserem Beispiel arbeiten wir mit dem prefix “col-sm-3”. Natürlich muss dieser Wert je nach gewünschter Größe angepasst werden.
Code
[pastacode lang=“php“ manual=“%26%2391%3Brow%5D%0A%26%2391%3Bcol%20class%3D%22col-sm-3%22%5DDie%20erste%20Spalte%20hat%20eine%20Breite%20von%2025%25%26%2391%3B%2Fcol%5D%0A%26%2391%3Bcol%20class%3D%22col-sm-3%22%5DDie%20zweite%20Spalte%20hat%20ebenfalls%20eine%20Breite%20von%2025%25%26%2391%3B%2Fcol%5D%0A%26%2391%3Bcol%20class%3D%22col-sm-6%22%5DDie%20dritte%20Spalte%20hat%20eine%20Breite%20von%2050%25%26%2391%3B%2Fcol%5D%0A%26%2391%3B%2Frow%5D“ message=““ highlight=““ provider=“manual“/]
WICHTIG: Um die Auflistung der einzelnen col-Tags gehört immer ein
-ShortcodeAttribute
Name | Inhalt | Bedeutung |
class | col-sm-3 | Über diesen Wert lässt sich die Breite des Containers definieren. |
col-sm-offset-3 | Über das Prefix offset können Abstände definiert werden. Mit col-sm-offset-3 fängt dieser Container z.B. erst nach der 3. Spalte an. | |
col-sm-push-3 | Mit Hilfe von push und pull können Spalten nach links/rechts gerückt bzw. umgeordnet werden. Somit kann man zum Beispie die Sidebar am Desktop links zeigen und am Smartphone dennoch nach dem Content (also quasi rechts) laden. | |
col-sm-pull-3 |
Jegliche Klassen können komplett individuell gemischt werden.
War dieser Artikel hilfreich?
Keine Kommentare vorhanden