CSS leicht gemacht mit Bootstrap

Webseiten mittels CSS zu verschönern ist alles andere als einfach. Erste Erfolge stellen sich zwar schnell ein. Bis aber alles schön zusammenpasst und nicht nur in einem Browser gut aussieht gibt es viel Arbeit. Wäre es nicht praktisch wenn man diese Aufgabe abgeben könnte?

Bootstrap für schnelle Ergebnisse

Bootstrap (ehemals Twitter-Bootstrap) ist ein Framework für die Gestaltung von Webseiten. Neben CSS-Definitionen werden auch JavaScript-Plug-Ins mitgeliefert die einem sehr viel Arbeit abnehmen können.

So genügt es 2 Dateien zu referenzieren, der Standardvorlage zu folgen und die Webanwendung passt sich automatisch den unterschiedlichen Monitorgrössen an. Die Anforderung nach Responsive Design lässt sich so im Handumdrehen erfüllen.

Mittels Bootstrapper kann man aus so einer Seite

mit wenig Arbeit zu so einem Ergebnis kommen:

Um von Bootstrap voll zu profitieren sollte man möglichst früh auf dieses Framework setzen. Idealerweise bindet man Bootstrap gleich nach dem Erstellen des Projektes ein. Später kann man immer noch auf Bootstrap wechseln, der Migrationsaufwand ist dabei aber nicht zu unterschätzen.

Wem das bekannte Layout von Bootstrap nicht gefällt sollte einen Blick auf diese Beispiele werfen. Mittlerweile gibt es eine Vielzahl von Erweiterungen mit ganz unterschiedlichen Designs.

Bootstrap selbst einbinden

Nachdem man Bootstrap von der offiziellen Webseite heruntergeladen hat muss die Zip-Datei ins eigene Webprojekt entpackt werden. Hat man noch gar nichts gemacht kann man gleich mit der Vorlage starten. Wie dort gezeigt wird sind die Anpassungen für Bootstrap minimal und können mit geringem Aufwand auch bei bestehenden Seiten eingebaut werden.

Die Hauptarbeit beginnt beim Austauschen der eigenen CSS-Klassen durch die von Bootstrap. Hier bleibt der Aufwand gleich hoch wie wenn man selber von einem Design auf ein anders wechselt.

Unterstützung für ASP.Net

Für ASP.Net gibt es ein NuGet-Paket. Über die Paketmanager-Konsole lässt es sich mit diesem Befehl installieren:

Install-Package Twitter.Bootstrap

Nach der Installation sind die *.css und *.js Dateien an den richtigen Orten abgelegt und in der Solution aufgenommen. Man muss aber noch immer die Stylesheets selber referenzieren und die entsprechenden CSS-Klassen an die einzelnen Elemente zuweisen.

Zusammenspiel mit Rails

Bei Ruby on Rails ist Bootstrap sehr gut integriert. Wie bei jeder Erweiterung erfolgt als erstes ein Eintrag ins Gemfile:

gem 'twitter-bootstrap-rails'

Bootstrap wird mit diesen Befehlen installiert und aktiviert:

bundle
rails g bootstrap:install
rails g bootstrap:layout application fluid

Achtung: Beim 3. Befehl sollte man nur dann dem überschreiben der Datei /app/views/layouts/application.html.erb zustimmen wenn man noch die durch Rails generierte Version verwendet. Andernfalls wählt man statt _application_ einen anderen Namen und führt die Änderungen selber zusammen.

Von nun an kann man für die einzelnen Ressourcen (als Beispiel für ein book-Modell) die generierten Views mit allen Bootstrap-Erweiterungen erzeugen lassen:

rails g bootstrap:themed books

Gestalten mit Bootstrap

Nachdem Bootstrap eingebunden ist will man damit die Webseite gestalten. Um einzelne Bereiche aneinander auszurichten nutzt Bootstrap ein Raster. Dieses Raster unterteilt die Webseite in 12 gleich grosse Spalten. Um ein div über eine ganze Zeile und eines zentriert über 6 Spalten zu verwenden nutzt man diesen Code:

<div class="row">
  <div class="span12">Geht über die ganze Seite</div>
</div>
<div class="row">
  <div class="span6 offset3">Überspringt 3 Spalten und füllt 6 aus</div>
</div>

Dieses Raster ermöglicht einem viele Kombinationsmöglichkeiten und löst das Problem, dass im Header und im Footer die Textboxen nicht an der gleichen Stelle beginnen.

Auch für Tabellen bietet Bootstrap einem viele Möglichkeiten. Um jede 2. Zeile einzufärben genügt diese Erweiterung des Table-Tags:

<table class="table table-striped">
...
</table>

Will man einzelne Zeilen mit einer speziellen Farbe versehen braucht es auch nur wieder ein class-Attribut:

<tr class="error">
  <td>1</td>
  <td>Fehler: Name fehlt!</td>
</tr>

Die einzelnen Farben sind aufeinander abgestimmt und so braucht man sich darüber nicht den Kopf zu zerbrechen. Weitere Beispiele dazu finden sich in der ausführlichen Dokumentation.

Fazit

Wer nicht gerne selber CSS-Definitionen schreibt sollte sich Bootstrap anschauen. So kommt man schnell zum gewünschten Ergebnis einer ansprechenden Webseite und muss sich nicht aus anderen Seiten seine CSS-Dateien zusammenkopieren.