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-VerhaltenDurchgehend horizontalZuerst minimiert, über Umbruchpunkten horizontal
Container-BreiteKeine (auto)750px970px1170px
Klassen-Präfix.col-xs-.col-sm-.col-md-.col-lg-
Spaltenanzahl12
Spaltenbreiteauto~62px~81px~97px
Abstandsbreite30px (15px auf jeder Seite einer Spalte)
Verschachtelbarja
Abrückungja
Spaltenumordnungja

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

[row]
[col class="col-sm-3"]Die erste Spalte hat eine Breite von 25%[/col]
[col class="col-sm-3"]Die zweite Spalte hat ebenfalls eine Breite von 25%[/col]
[col class="col-sm-6"]Die dritte Spalte hat eine Breite von 50%[/col]
[/row]

WICHTIG: Um die Auflistung der einzelnen col-Tags gehört immer ein

-Shortcode

Attribute

NameInhaltBedeutung
classcol-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-3Mit 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,71 / 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 *

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel