KAPITEL 2
Struktur der Seite
Bootstrap realisiert ein horizontales Raster auf der Seite, in dem Elemente platziert werden. Das Raster läuft von links nach rechts.
Einführung
Die Basis für das Raster ist eine feste, gleichmäßige Unterteilung der Seite. Das Raster passt sich an die Größe des Ansichtsbereichs, des sogenannten Viewports, an.
Der HTML5-Doctype
Der erste Schritt zur Nutzung von Bootstrap besteht darin, die Webseite auf HTML5 einzustellen. Dies erfolgt mit dem richtigen Doctype (Zeile 1, danach angedeutet die folgende HTML-Seite):
<!DOCTYPE html>
<html lang="en">
...
</html>
Einstellungen des Ansichtsbereichs
Damit mobile Geräte von vornherein unterstützt werden, wird nun der Viewport festgelegt. Das erste Tag im <head>-Bereich ist deshalb das folgende Metatag:
<meta name="viewport"
content="width=device-width, initial-scale=1" />
Bestimmt wird hier das Zoomverhalten und die im Tag zuvor genutzte Skalierung. Das Zoomverhalten kann mit user-scalable=no abgeschaltet werden. Die Applikation fühlt sich dann ein wenig so an wie eine native App auf einem mobilen Gerät.
| Zoom abschalten Es ist riskant, die Zoomfunktion abzuschalten. Benutzer mit eingeschränkten Sehfähigkeiten oder Nutzer besonders kleiner Bildschirme können darauf angewiesen sein. Wenn sich eine mobile Webseite wie eine native App verhalten soll, muss sie auch von Grund auf wie eine App programmiert werden. So schalten Sie die Skalierung explizit ab: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
Das Rastersystem
Schon in den Anfangsjahren des Webs wurde versucht, einer Seite durch eine Art virtuelles Raster (Grid) eine Struktur zu geben. Dazu kamen anfangs meist Tabellen zum Einsatz. Tabellen sind jedoch in ihrer horizontalen Ausdehnung nicht vollkommen flexibel – der Inhalt bestimmt die Breite. Eine Skalierung auf einen kleineren Bildschirm ist damit nicht möglich. Das widerspricht dem Anspruch an eine responsive – sich den Gegebenheiten anpassende – Website.
Aus der Idee der Tabelle entstand die Vorgehensweise, statt der Zellen einfach <div>-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.
<div class="container">
...
</div>
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:
<div class="container-fluid">
...
</div>
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
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-lg-min) { ... }
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)
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="row">
<div class="col-md-4">1-4</div>
<div class="col-md-4">5-8</div>
<div...
