Bootstrap kurz & gut

...

content="width=device-width, initial-scale=1" />

-Tags mithilfe von CSS gitterförmig anzulegen. Wer das einmal selbst probiert hat, wird schnell gemerkt haben, dass der Ansatz alles andere als trivial ist. CSS-Frameworks liefern hier für die Darstellung von Tabellen eine solide Grundlage. Tatsächlich ist das Raster eher eine Anordnung von streifenartigen Elementen.

Container

Bootstrap nutzt ein Containerelement, um die Seite einzuleiten und eine Basis für das Raster zu definieren. Container können mehrfach auf der Seite benutzt, sollten aber nicht verschachtelt werden.

Container dieser Art liefern ein festes, zentriertes, responsives Raster. Das heißt, die Breite passt sich in Schritten dem Gerät an und bleibt dann innerhalb eines Bereichs stabil. Die Sprungbereiche werden auch als »Breakpoints« bezeichnet – Umbruchpunkte. Sollten Sie diesen Begriff aus der Softwareentwicklung kennen – damit haben die Breakpoints in Bootstrap nichts zu tun.

Alternativ kann die Klasse .container-fluid benutzt werden, die immer die volle Breite des Geräts nutzt:

Das Raster im Detail

Das Raster entsteht aus zwölf gleich breiten Spalten. Vordefinierte Klassen können verwendet werden, um Elemente ab einer bestimmten Spalte und über eine Anzahl von Spalten hinweg zu platzieren.

Innerhalb der Spalten lassen sich Zeilen festlegen, um eine wechselnde Nutzung der Spaltenbreiten zu erlauben. Die Vorgehensweise sollte sich an einigen wenigen Regeln orientieren:

• Zeilen (.row) müssen sich in einem Container befinden: .con tainer (feste Breite) oder .container-fluid (volle Breite).
• Zeilen werden benutzt, um mehrere Elemente horizontal nebeneinander zu platzieren.
• Spalten(.col-xx-n) werden in Zeilen platziert. Nur Spaltenelemente sind unmittelbare Kindelemente von Zeilen.
• Abstände (Lücken) zwischen den Spalten werden mit padding-Regeln definiert. Diese Abstände werden links von der ersten Spalte und rechts der letzten Spalte mit negativen Abständen (margin) ausgeglichen. Dadurch ist Inhalt außerhalb des Rasters linksbündig gleich ausgerichtet.
• Erstrecken sich Elemente über mehrere Spalten, die innerhalb einer Reihe platziert werden, und überschreiten die Elemente die Grenze von zwölf Spalten, wird die gesamte Gruppe umbrochen.

Der Aufbau der Spaltenklassen ist einfach:

• Die Einleitung beginnt mit .col-.
• Der mittlere Teil bestimmt die Zuständigkeit für Bildschirmbreiten (sm, md, lg, xl) – die Breakpoints.
• Die Zahl am Ende bestimmt die Anzahl der Spalten (1 bis 12).

Wenn Sie die Klasse .col-sm-4 nutzen, können Sie also drei derart dekorierte Elemente nebeneinander anordnen (3 × 4 = 12). Die Breitendefinition gilt, bis sie überschrieben wird. Wenn Sie .col-md-2 nutzen, .col-lg-2 aber nicht, gilt md auch für sehr große Geräte.

Gerätespezifische Definitionen

Kleine Geräte mit weniger als 576 Pixeln werden nicht separat definiert, denn diese Geräteklasse ist bereits der Standardwert. Die Angaben in den Variablen sind folgendermaßen definiert:

• sm: ≥ 576 px
• md: ≥ 768 px
• lg: ≥ 992 px
• xl: ≥ 1.200 px

Aus den Breiten ergeben sich die Dimensionen der zwölf Spalten.

Die Breite des Abstands zwischen den Spalten beträgt 30 Pixel (15 auf jeder Seite). Das Grid darf verschachtelt werden.

Tabelle 2-1: Position der Breakpoints

Im folgenden Beispiel werden nur md-Klassen benutzt. Diese werden erst ab der Breite von 920 Pixeln gültig. Die div-Elemente werden deshalb auf kleinen Geräten untereinander angeordnet – erst auf Desktops mit ausreichender Breite erscheinen die Elemente nebeneinander.

Beispiel 2-1: Musterraster (Grid.html)