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.

 

Kurz-Tipp: IIS Express in Visual Studio verwenden

Wer mit Visual Studio eine Webanwendung entwickelt wird häufig den eingebauten Webserver Cassini nutzen. Dieser funktioniert für die meisten Anwendungen ohne Probleme. Will man aber schon zur Entwicklungszeit einige IIS-spezifische Funktionen verwenden, stösst man damit schnell an die Grenzen. IIS Express ist in solchen Fällen eine gute und einfach zu konfigurierende Alternative zum ausgewachsenen IIS.

 

IIS Express installieren

Der einfachste Weg zur Installation von IIS Express führt über den Web Platform Installer. Mit diesem Tool kann man über eine einfache Maske diverse Web-Pakete (von PHP bis WordPress) mit einem Klick installieren. Als Alternative kann man den direkten Link aufrufen der einem gleich den IIS Express auswählt.

 

In Visual Studio nutzen

Um IIS Express zu nutzen muss man den Einstellungsdialog des gewünschten Webprojektes öffnen. Im Reiter Web kann man unter Servers den IIS Express auswählen. Die Projekt-URL kann einen beliebigen Zusatz haben oder nur aus localhost und einem Port bestehen.

Wichtig: Nach dem man die gewünschte URL eingegeben hat muss man das virtuelle Verzeichnis anlegen.

Startet man das Webprojekt nun mit F5 wird IIS Express verwendet. Will man doch wieder Cassini nutzen wählt man einfach auf der gleichen Maske den Development Server aus.

 

Fazit

IIS Express ist sehr schnell konfiguriert und man kann problemlos jederzeit wieder zurück zu Cassini. Wer mit Cassini Probleme hat (zum Beispiel wenn die Webanwendung immer wieder abstürzt) kann so in kurzer Zeit auf IIS Express wechseln und überprüfen ob das Problem vom Webserver abhängt oder doch selber verursacht wurde.