Erste Schritte mit Bootstrap 3.0 – Teil 1

Frameworks zur Webentwicklung gibt es viele, mit keinem bin ich bisher so richtig warm geworden. Jetzt geht der Weg zu responsive Webdesign und hier kann man dann doch für jede Unterstützung dankbar sein – denn oft ist ja viel Bastelei im Spiel.
Bootstrap 3.0 ist das Web-Entwickler Frontend von Twitter. Und wie fix man damit sein erstes Layout zusammen bekommt, zeigt dieser Artikel.

Als ersten Schritt muss man sich Bootstrap 3.0 runterladen. Hier bietet die Webseite die Funktion „Customize“. Damit wählt man aus, welche Komponenten man benötigt. Zum Entwickeln und Testen macht es natürlich Sinn das komplette Paket zu installieren. Dabei sollte man sich merken bzw notieren, welche Funktionen man wirklich benötigt hat. Dann können später nicht gewünschte Komponenten abgewählt und dadurch wichtige Ladezeit eingespart werden.

Bootstrap 3.0 bietet nicht nur CSS-Komponenten, sondern auch JQuery-PlugIns für Tooltips, Dialoge, Karussells und einiges mehr. Beim Konfigurieren der eigenen Bootstrap-Konfiguration können auch gleich diverse CSS-Variablen festgelegt werden, die dann auch in das Paket übernommen werden.
Zum Testen soll es aber das komplett vorkonfigurierte Paket sein, man weiß ja nie. Ist der Download erfolgt, entpackt man das Archiv in den gewünschten Arbeitsordner. Zur einfachen späteren Eingabe kann man diesen auch in /bootstrap umbenennen.
In diesem Ordner findet sich nun sowohl das Framework mit allem was dazu gehört. Aber auch etliche Beispieldateien, auf denen man aufbauen kann. Da wir ja aber alle schon groß sind, erstellen wir unser erstes Layout natürlich selber…
Die hierfür erforderliche CSS-Datei befindet sich im Ordner bootstrap/dist/css/bootstrap.css.

Das Gittersystem in Bootstrap

Webseiten layouten mit Bootstrap bedeutet auf ein Gittersystem (auch als Grid oder Raster bekannt) zu setzen. Dieses Rastersystem variiert Bootstrap automatisch durch die CSS Media-Queries. Die Grundeinstellung ist eine maximale Breite der Webseite von 1170 Pixeln. Aufgeteilt wird diese in 12 Spalten, das bedeutet: Jede Spalte ist 95 Pixel groß. Die nächte Grenze sind 970 Pixel, diese ergeben eine Spaltenbreite von 78 Pixel. Der Übersichtlichkeit einfach mal alle Optionen aufgelistet:

• 1170 Pixel Breite – Breite der Spalten 95 Pixel
• 970 Pixel Breite – Breite der Spalten 78 Pixel
• größer als 750 Pixel Breite – Breite der Spalten 60 Pixel
• kleiner als 750 Pixel Breite – Breite der Spalten wird automatisch festgelegt

Für jedes Endgerät bietet Bootstrap verschiedene CSS-Klassen an. Mit diesem Klassen lässt sich die Spaltenzahl im Gittersystem festlegen indem einfach die entsprechende Spaltenzahl an die Klasse gehangen wird.

• .col-xs – Spalte für extra-small-devices (Smartphones)
• .col-sm – Spalte für small-devices (Tablets)
• .col-md – Spalte für medium-device (Desktop)
• .col-lg – Spalte für large-device (Desktop, TV)

Doch halt, eigentlich ist das schon wieder vorgegriffen. Denn wo Spalten sind, da sind auch Zeilen. Und in den Zeilen sind immerhin die Spalten untergebracht. Also hat logischerweise eine Zeile die Breite von 12 Spalten im Gridsystem. Dieses Bild veranschaulicht das Raster:

Wer nun keine Lust auf ein 12-spaltiges Layout hat, verwendet einfach die eben erwähnten CSS-Klassen um die Spalten breiter zu machen. Für ein gleichmäßiges, dreispaltiges Layout werden einfach 3 x 4 Spalten (rot) der vorhandenen 12 Spalten verwendet:

So weit, so praktisch. Was aber ist, wenn Spalten freibleiben sollen um zum Beispiel eine Einrückung hervorzuheben? Auch das ist mit Bootstrap kein Problem. Offset heißt das Zauberwort und funktioniert folgendermaßen:

So können die Inhalte in den Zeilen beliebig im Rastersystem verschoben werden und auch zwischen zwei Inhaltsbereichen Freiräume geschaffen werden, indem das letzte Element in der Zeile einen passenden Offset-Wert bekommt. Nur mit der Zählerei sollte man nicht durcheinander kommen ;-)

Ein Layout mit Bootstrap

Nun bauen wir uns ein einfaches Layout mit Header, Navigationsleiste, Contentbereich und Footer. Der Quelltext kann hier heruntergeladen werden, momentan habe ich leichte Probleme im WordPress Code einzufügen. Das (vorläufige) Endresultat sieht auf einem normalen Deskop-Bildschirm dann so aus:


3-spaltiges Layout mit Bootstrap am Desktop

Interessant wird es wenn man nun das Browserfenster mit der Maus in der Breite zusammenschiebt. Und hier kommt Bootstrap so richtig zum Einsatz. Denn ohne sich mit dem Floating der Div-Boxen rumärgern zu müssen, organisiert das Framework alles vollautomatisch und passt das Layout auch kleine Bildschirme an.

1-spaltiges Layout mit Bootstrap für Smartphone

Quelltext:

Im zusätzlich geladenen Stylesheet sind die Farben und Größen für den Header-, Navigations- und Footerbereich hinterlegt. Der Übersichtlichkeit wegen macht es Sinn, diese in einer separaten Datei zu halten.

Bis hierhin soll Teil 1 erstmal genügen. Mit Bootstrap sind auch komplexere Layouts möglich. Besonders für den schnellen Entwurf zwischendurch ist das Framework wirklich sehr gut geeignet. Im nächsten Teil werden wir der Navigationsleiste ein wenig Leben einhauchen.