Bootstrap - ein mobiler Schritt voraus

Schneller und einfacher Web-Developen mit Bootstrap! Die Entwickler selbst bezeichnen ihr Werkzeug als Frontend-Framework, dabei ist es viel mehr als das: ein Baukasten aus Webdesign-Komponenten. Von responsiver Navigation über Buttons und Formularfelder bis hin zu Slidern - Bootstrap liefert die Vorlagen mit! Seit der Version 3.0 ist Boilerplate als Flat Design ein weiteres Thema, außerdem setzt das Entwickler-Team von Twitter auf einen Mobile-First-Ansatz. Damit liegt nun ein klarer Fokus auf Webseiten-Entwicklung für Tablets und Smartphones.

Ist die neueste Version heruntergeladen, werden bootstrap.min.css, jquery.js und bootstrap.min.js wie üblich in der Index-Datei eingebunden. Das sieht dann wie folgt aus:

Bootstrap beherrscht derzeit vier sogenannte Breakpoints, die angeben, ab welcher Browserbreite sich ein Layout an das Medium anpasst. Damit ist es u.a. möglich, die Sidebar beim Smartphone auszublenden. Hier ein kleines Beispiel:

Zeig mich immer
Zeig mich nur auf Tablets und Desktops

Um die zweite div auf einem Smartphone auszublenden, müssen wir die Klasse "hidden-xs" hinzufügen. Bootstrap unterscheidet insgesamt zwischen fünf hidden-show Klassen.

Ein kleines, aber doch sehr nützliches Feature sind die bereits mitgelieferten Icons - die heutzutage für beinah jedes Projekt genutzt werden. Eingebunden werden diese bei Bootstrap mittels dem folgenden Code:

Die HTML-Zeile liefert uns prompt eine kleine Lupe. Eine Übersicht der mitgelieferten Icons gibt es außerdem hier.

Zum wirklich interessanten Teil von Bootstrap kommen wir, wenn wir auf die Unterseite "Components" auf getbootstrap.com gehen. Denn hier finden wir nützliche Tools, die einem Entwickler viel Arbeit abnehmen. Ob für ein Dropdown-Menü oder eine bereits fertige Navigation - hier wird garantiert jeder fündig.

Um ein Dropdown-Menü zu erhalten, brauchen wir lediglich eine kleines HTML Grundgerüst, das wie folgt aussieht:

  
    Action 
  
  

    
Action
    
Another action
    
Something else here
  

Der erste div-tag mit der Klasse btn-group gruppiert das Dropdown-Menü. Mit dem darunter liegenden button-tag und den Klassen "btn" und "dropdown-toggle" erhalten wir einen bereits vordefinierten Button. Der span-tag dient dazu, dass neben der Beschriftung des Buttons ein kleiner Pfeil für die Visualisierung erscheint. Die Einträge können schlussendlich mittels einer Liste eingetragen werden. 

Um mit dem Default Style von Bootstrap zu arbeiten geben wir der Liste noch die Klasse „dropdown-menu“. Und schon haben wir ein fertig gestyltes und wunderbar funktionierendes Dropdown-Menü.

• die ideale Grundlage für ein Responsive-Layout
• einfaches und neutrales Grunddesign
• nützliche jQuery Plugins
• große Auswahl an Icons wird direkt mitgeliefert
• Browserkompatibilität bis einschließlich Internet Explorer 7
• erspart viel Zeit und Nerven

Eine gute Dokumentation und die simple Namensgebung macht das Arbeiten mit Bootstrap sehr angenehm - und ist für Neueinsteiger leicht zu lernen.

Dank eines Konfigurators kann die Größe der Bootstrap-Datei recht klein gehalten werden. Aufgrund der vielen Möglichkeiten, die das Tool bietet, sollte man unbedingt darauf achten, die Website nicht mit unnötigen Effekten vollzupflastern. Ein gezieltes Herangehen ist empfehlenswert.

Kleiner Tipp: Wer noch ein wenig auf Github herumstöbert findet auch gleich nette und nützliche Plugins für Bootstrap.