Grid (Dokumentation » Shortcodes)

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