Skip to main content

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

-Shortcode

Attribute

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?

1 Star2 Stars3 Stars4 Stars5 Stars
2,33 / 5

Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*