Das Prinzip von Bootstrap Layouts ist schnell erklärt. Haben Sie das Prinzip einmal verstanden, ermöglicht es Ihnen Inhalte sauber, mobilgerätefähig zu strukturieren.

Das sogenannte "Grid" oder zu deutsch "Gestaltungsraster" teilt das Layout in 12 (gedachte) Spalten ein. Sie bestimmen nun über CSS Klassen wie viele Spalten in einer Zeile angezeigt werden und ab welcher Gerätegröße dies passieren soll.

Spaltenklassen sind folgendermaßen aufgebaut: z.B.: "col-md-6". Wobei:

• "col" die Kurzform von englisch "Column" zu deutsch "Spalte" darstellt
• der zweite Teil - im Beispiel "md" - die Gerätegröße kennzeichnet ab der diese Breite gelten soll
  • "xs" = Greift bereits auf sehr kleinen Smartphones
  • "sm" = Greift z.B. auf größeren Smartphones (sog. "Phablets")
  • "md" = Greift z.B. auf Tablets
  • "lg" = Greift z.B. auf Desktop Computern (größeren Monitoren)
• der dritte Teil die Anzahl der Spalten von 1 bis 12 angibt
• (Getrennt sind diese Angaben jeweils durch einen Spiegelstrich)

Einige Beispiele:

Einfaches dreispaltiges Layout:

bs_3_cols.png

Das Layout soll auf kleinen Geräten die drei Boxen einfach untereinander darstellen und ab mittelgroßen Geräten nebeneinander.

Dazu benötigen Sie generell (für sämtliche Layouts) einen Container mit der Klasse "row", welche die Zeile kennzeichnet.
Zudem erhält jede Spalte die Klasse "col-md-4", was einfach besagt: Die Breite dieser Spalte soll 4 von 12 Spalten (s.o.) breit sein, und das ab der Gerätegröße "md" (Medium).

Sechsspaltiges Layout, welches auf mittelgroßen Geräten dreispaltig wird:

bootstrap_grid_pc_tablet.png

Wie gehabt geben Sie dem Container - der Zeile - die Klasse "row" und den einzelnen Spalten geben Sie die Klassen "col-md-4" (für die dreispaltige Darstellung auf mittelgroßen Geräten) sowie "col-lg-2" für die sechspaltige Darstellung auf großen Geräten.