Teil 1: So zaubern Sie Webseiten mit Bootstrap

Wir haben einen großen Tipps-&-Tricks-Ratgeber für Bootstrap von Twitter für Sie. Heute lesen Sie den ersten von zwei Teilen mit Basics zum Start, sowie Tipps zum Raster-Layouts, für Buttons und für Tabs. In der folgenden Woche, also ab dem 25. September 2012, lesen Sie bei uns Weiteres zu Aktionen, die Sie mit Bootstrap realisieren können, mehr zu responsiven Layouts, zum CSS-Präprozessor LESS und zu Individualisierungsmöglichkeiten für Bootstrap. Schauen Sie einfach regelmäßig auf unsere Webseite.

Was ist Bootstrap?

Bootstrap stammt von einem Twitter-Team, das für Mitarbeiter einen Werkzeugkoffer zusammenstellen wollte, auf dessen Basis sich leicht neue Webprojekte erstellen lassen. Inzwischen liegt es in zweiter Version vor und ist mit über 34.000 Beobachtern und knapp 7.000 Forks eines der beliebtesten Projekte von Github. Zu Bootstrap gehört neben HTML- sowie CSS-Komponenten auch eine Auswahl an praktischen jQuery-Plug-ins für gängige Bestandteile der Benutzeroberfläche und seit Version 2 können Sie es auch für responsive Layouts einsetzen.

Obwohl von Nerds erstellt, ist es für Leute aller Levels geeignet: Es ist eigentlich als Styleguide gedacht, aber es dokumentiert und zeigt gleichzeitig auch praktische Code-Beispiele. Bootstrap funktioniert ab Internet Explorer 7, allerdings kommen die Nutzer dieses Browsers nicht in den Genuss von schicken Gimmicks wie Farbverläufen, abgerundeten Ecken oder Schatten. Damit folgt Bootstrap hier dem Prinzip des Progressive Enhancement. Der CSS-Code lässt sich durch die Verwendung des CSS-Präprozessors LESS gut warten. Besonders attraktiv ist der individuell zusammenstellbare Download: Sie kreuzen an, welche Komponenten Sie aus dem Paket wünschen, und erhalten Ihre persönliche Variante, wobei Sie Farben von Elementen, Schriftarten, den Grad der Rundung von Inputfeldern und vieles mehr an Ihre Bedürfnisse anpassen können. Dazu lesen Sie in der kommenden Woche mehr.

Bootstrap-Ratgeber: Wie beginne ich?

Zum Starten mit Twitter Bootstrap sollten Sie sich den vollständigen Code inklusive Dokumentation von Github herunterladen. Dort finden Sie im Ordner docs/examples das Dokument starter-template.html, das eine gute Basis für erste Gehversuche mit Twitter Bootstrap liefert. Erst einmal beginnt es - wie zu erwarten - mit dem HTML5-Doctype:

Dann wird das Basis-Stylesheet eingebunden:

Dieses sorgt unter anderem dafür, dass alle HTML-Elemente browserübergreifend gleich dargestellt werden, wobei Normalize.css zum Einsatz kommt. Im Unterschied etwa zu einem klassischen Reset werden bei der Normalisierung nicht pauschal Innen- und Außenabstände bei allen Elementen entfernt, sondern diese auf einen vernünftigen Standardwert gesetzt. Das ist eine saubere Grundlage, auf der man mit weiteren Formatierungen aufbauen kann. Im Template wird zusätzlich das Stylesheet für das responsive Layout eingebunden, das Sie nur nutzen sollten, wenn Sie wirklich ein responsives Layout erstellen wollen:

Die Javascript-Datei HTML5-Shim stellt sicher, dass sich die neu in HTML5 eingeführten Elemente ebenfalls in älteren IE stylen lassen:

Am Endes des Dokuments vor dem schließenden body gibt es Verweise auf alle bei Bootstrap mitgelieferten Javascript-Dateien, zuerst jQuery und dann eine Reihe von Plug-ins.

Für den echten Einsatz sollten Sie sich aber Ihr eigenes Download-Paket schnüren lassen, bei dem die Dateien zusammengefasst sind, was wichtig ist für eine gute Performance. In diesem Dokument können Sie jetzt innerhalb von body die verschiedenen Komponenten von Twitter Bootstrap ausprobieren.

Bootstrap-Ratgeber: Rastern leicht gemacht

Rasterlayouts sind beliebt, weil sie die Anordnung von Elementen auf Websites vereinfachen. Auch Bootstrap bringt alles für die Erstellung von Rasterlayouts mit. Hier stehen zwei Varianten zur Auswahl: Eine basiert auf Pixel-, die andere auf Prozentwerten. Standardmäßig gibt es beim Pixelraster 12 Spalten a 60 Pixel mit 20 Pixeln Zwischenraum, was einer Gesamtbreite von 940 Pixeln entspricht.

Um das Rasterlayout zu verwenden, müssen Sie Elementen die dafür vorgesehenen Klassen zuweisen. Das umfassende Element erhält die Klasse .container. In diesem definieren Sie die einzelnen Zeilen über ein Element mit der Klasse .row. Die genaue Aufteilung einer Zeile bestimmen Sie mithilfe von Klassen wie spanX, wobei X die Anzahl der umspannten Rasterelemente festlegt. Dabei sollte sich innerhalb einer Zeile die Anzahl auf 12 addieren.

Ein Beispiel: Durch folgende Angaben erstreckt sich das erste Element über vier Spalten, das zweite über acht. Da 4+8 = 12 ergibt, ist damit eine Zeile vollständig gefüllt.

Wollen Sie statt eines Pixelrasters ein flüssiges Raster verwenden, dann müssen Sie die Klassennamen an zwei Stellen modifizieren: Das umfassende Element benötigt die Klasse .container-fluid und bei den einzelnen Zeilen heißt die Klasse jetzt .row-fluid.

Und falls ein 12-spaltiges Raster nicht passt, können Sie es über die LESS-Variablen ändern, genauso wie Sie auch die Abstände anpassen können.

Bootstrap-Ratgeber: Buttons für jeden Bedarf

Bootstrap bietet schöne Formatierungen und für viele bei Benutzeroberflächen häufig benötigte Komponenten die passende Funktion. Das reicht von der Formatierung von Überschriften, Listen über Formularelemente und Buttons bis hin zu Breadcrumbs, Thumbnails, Pagern, Dropdown-Menüs und vielem mehr.

An zwei Beispielen, nämlich an den Buttons und Tabs, sollen die grundlegenden Funktionen von Bootstrap gezeigt werden. Beginnen wir mit den Buttons. Einen einfachen Button erstellen Sie mit der Klasse .btn, wobei Sie als Element ein button- oder ein a-Element nutzen können. Je nach Einsatzzweck lassen sich andere Button-Typen erstellen, die dann in passenden Farben angezeigt werden - die Farben steuern Sie über LESS-Variablen.

Die mehrfache Verwendung von Klassen ist typisch für Bootstrap und zeigt, dass gemeinsam vorkommende Formatierungen in eigenen Klassen zusammengefasst werden. Die Größe der Buttons bestimmen Sie über drei vorgegebene Klassen: .btn-large, .btn-small oder .btn-mini, die Sie wiederum ergänzen.

Ein Icon können Sie direkt integrieren: Benutzen Sie dafür beispielsweise das i- oder das b-Element (die ja in HTML5 eine Neudefinition erfahren haben) mit einer der für Icons bestimmten Klassen. Zum Einsatz kommt bei der Darstellung der Icons die CSS-Sprite-Technik, das heißt, sämtliche mitgelieferten Icons - es sind um die 140 - sind in einem großen Bild angeordnet. Über die passenden Angaben für background-position wird nun automatisch der richtige Bildausschnitt angezeigt. Der folgende Code-Schnipsel zeigt eine Lupe:

Im folgenden Beispiel wird ein Icon in einem Button integriert:

Wichtig dabei ist, dass Sie ein Leerzeichen nach dem i-Element lassen.

Bootstrap-Ratgeber: Tabs in Variationen

Auch zur Erstellung von Tabs brauchen Sie zuerst die richtige HTML-Basis, hier eine ungeordnete Liste mit Links. Um diese wie Tabs zu gestalten, ergänzen Sie beim umfassenden Element die Klassen .nav und .nav-tabs. Das gerade aktuelle Tab erhält die Klasse .active.

Damit haben Sie horizontale Tabs erstellt. Wenn Sie jetzt die Klasse .nav-tabs durch .nav-pills ersetzen, haben Sie es nicht mehr mit Tabs zu tun, sondern mit sogenannten Pills, die mehr an Buttons erinnern:

Und sollen die Tabs untereinander platziert werden, so geht das ebenfalls durch die Ergänzung einer Klasse, nämlich mit .nav-stacked:

Das funktioniert ebenfalls in der "Pills"-Variante:

Es gibt natürlich mehr Komponenten als Tabs und Buttons: Die Pager, Bread-crumbs, Thumbnails, Fortschrittsanzeigen und vieles mehr wirken ansprechend, wobei oft gerade die Details sehr schön gelöst sind: Bei Klick in ein Formularfeld erstrahlt dieses von innen - dank eines geschickt bei :focus eingesetzten mehrfachen box-shadow. Verantwortlich ist hierfür die folgende Angabe im Stylesheet:

Hier kann es lohnenswert sein, die Beispiele einmal mit dem Firebug zu analysieren, um sich inspirieren zu lassen.

Hier lesen Sie weiter in unserem Bootstrap-Ratgeber (Teil 2) .