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.
Um ein einfaches Spaltenlayout zu erstellen, legt man lediglich eine .row
und die entsprechenden Anzahl von .col-*-* Spalten in den Container.
<div class="container-fixed">
<div class="row">
<div class="col-4">Navigation</div>
<div class="col-8">Inhalt</div>
</div>
</div>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.
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.
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.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Beispiel:
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.
<div class="container">
<div class="row">
<div class="col-4">Navigation</div>
<div class="col-8">
<div class="row">
<div class="col-6">Teil 1</div>
<div class="col-6">Teil 2</div>
</div>
</div>
</div>
</div>Beispiel:
Es ist möglich Inhalt abhängig von der aktuellen Layoutgröße zu zeigen
oder zu verstecken und damit die Seite gerätefreundlicher zu machen.
Genau wie bei den Spalten gibt es hierfür Klassen, welche nach Größe
benannt sind, bspw. col-s-hide oder col-xl-show. Im Gegensatz zu den
Klassen für Spalten jedoch, gelten diese ausdrücklich nur für die
jeweilige Größe und nicht die darauf folgenden.
Beispiel:
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.
Spalten mit verschiedenen Abständen bei unterschiedlichen breakpoints.
Beispiel: