Jede Seite liegt in einem Container `.container-*`. Er sorgt dafür, dass die Seite nur eine bestimmte Breite einnimmt und mittig platziert wird. Er ist außderdem für das "responsive"-Verhalten der Seite verantwortlich.
</div> </div>
Anwendung
Um ein einfaches Spaltenlayout zu erstellen, legt man lediglich eine `.row` und die entsprechenden Anzahl von `.col-*-*` Spalten in den Container.
{% highlight html %}In der Summe sollten sich pro Reihe zwölf Spalen befinden, da es sich beim hier vorliegenden Grid standardmäßig um ein 12-spaltiges System handelt.
Container
Es gibt zwei Arten von Containern, welche das Verhalten des Grids bestimmern. Die Klasse `container-fixed` ist für Layouts mit festgelegter Breite gedacht; `container-liquid` für jene, die sich von Haus automatisch in die komplette Breite einpassen.
Beide Container verhalten sich responsive und passen sich an die Breite des Tabs/Fensters an.
Ein Container mit `container-fixed` erhält seine Breite in einem bestimmten Bereich und schaltet stufenweise auf die nächst verfügbare Größe um. Ist nicht genug Freiraum verfügbar (mittlere Größe oder weniger), verhält er sich ebenfalls wie `container-liquid`.
Liquid Grid Beispiel
Beispiel für ein fixiertes Grid Die aktuelle Fenstergröße ist kleiner L. Der Kontainer verhält sich wie die liquid Variante.
Ausrichtung
Mit den Klassen `left, center, right` lassen sich fixierte Grids an der entsprechenden Kante der Seite ausrichten. Ist keine Klasse explizit aufgeführt, wird der Container zentriert.
Beispiele für die Ausrichtung Die aktuelle Fenstergröße ist kleiner L. Der Kontainer verhält sich wie die liquid Variante.
<div class=“container-liquid left”> <div class=“row”> <div class=“col-l-12”>right</div> </div> </div> <div class=“container-fixed demo-grid grid-debug right”> <div class=“row”> <div class=“demo-col col-l-3”>A</div> <div class=“demo-col col-l-3”>B</div> <div class=“demo-col col-l-3”>C</div> <div class=“demo-col col-l-3”>D</div> </div> </div>
Bildschirmgrößen
Das Grid-System unterstützt bis zu fünf verschiedene Größen, welche von Mobilegeräten über Tablets, Desktop bis zu TV-Geräten sämtliche Gerätetypen abdecken sollen. Die Größen werden unterteilt in `XS, S, M, L` und `XL`. Die Ausgangsgröße ist `L` und wird durch den zweiten Teil im `col-*-*`-Klassennamen angegeben. Durch die Verwendung von weiteren Klassen wie `col-s-6` or `col-xl-12` erhält man bei sich ändernder Fensterbreite ein dynamischeres Layout.
Tipp: Dies ist wohl der beste Moment um auf ein mitgeliefertes Werkzeug hinzuweisen, das `DebugThingy!`, welches sich in der rechten oberen Ecke befindet. Durch Drücken des -Knopfs, wird die momentane Breite des vorliegenden Seiteninhalts festgesetzt/gelöst. Dadurch sind die Beispiele leichter nachvollziehbar, da sie nicht mehr vertikal verrutschen, wenn die Fenstergröße geändert wird.
Beispiel:
Wie bereits erwähnt ist die Standartgröße des Grids Größe `L`. Mit `XL` überschreibt man die Werte für größere Layouts; mit den Größen `M, S, XS` überschreibt man sukzessive die Spaltenbreiten für schmalere Layouts. Eine Spaltenbreite die durch `S` angegeben wird, gilt also auch für `XS`-Layouts, sofern für diese nicht auch eine Klasse angegeben wurde.
Hinweis: Es ist eforderlich, dass der Viewport im head des Dokuments korrekt angegeben wird.
{% highlight html %}{% endhighlight %}Beispiel:
Verschachtelungen
Verschachteln ist problemlos möglich. Sobald eine `.row` innerhalb einer Spalte eingefügt wird, ist diese der Ausgangspunkt für ein neues 12-Spalten-System.
{% highlight html %}Beispiel:
Utility Klassen
Aktuell sehen sie das Grid in Größe XSSMLXL. Verändern Sie die Breite des Fensters um die Größen (XS, S, M oder L oder XL) zu sehen.
Versatz und resets
Spalten mit verschiedenen Abständen bei unterschiedlichen breakpoints.
Beispiel:
<div class=“main”> <div class=“container-fixed”>