Web-Entwickler

Bootstrap im Einsatz – die Bilanz

Bootsrap Logo

Jeder Webentwickler hat wohl von ihnen gehört: Frameworks für responsive Websites, die angeblich alles einfacher machen und den Web-Entwickler zu schnellen, ansehnlichen Ergebnissen kommen lassen. Kann Bootstrap (ehemalig Twitter Bootstrap) diesem Anspruch gerecht werden?

Bevor man mit der Arbeit beginnt, sollte man überlegen ob man mit LESS oder dem Port für SASS arbeiten möchte (http://lesscss.org/) - dies sind CSS-Präprozessoren die beispielsweise das Verwenden von Variablen erlauben - oder ob man Bootstrap mit vorkompiliertem CSS verwenden möchte. Bei kleineren Projekten reicht wohl den meisten Benutzern das vorkompilierte Paket.




Es enthält die Basis CSS-Datei, ein Theme, die Bootstrap JS Datei sowie eine Webfont mit Icons (Glyphicons).

Das Raster

Wichtigstes Feature bei der Arbeit mit Bootstrap ist wohl das Grid, welches immer in 12 Spalten aufgeteilt ist. Diese werden in <div>-Elementen verschachtelt. Um ein responsives 3-Spalten-Raster zu erstellen verwendet man also dieses Markup:


Beispiel 1:

<div class="container">
<div class="row">
<div class="col-lg-4">
Spalte 1
</div>
<div class="col-lg-4">
Spalte 2
</div>
<div class="col-lg-4">
Spalte 3
</div>
</div>
</div>


Das Ergebnis:

Hier ergibt sich das 12er-Raster aus 3 cols mit einer 4er-Breite (Columns = Spalten). Dabei kann man den cols auch mehrere Klassen zuweisen.
.col-lg-x für große Displays ab 1200px Breite
.col-md-x für große Displays ab 992px Breite
.col-sm-x für kleine Displays, Tablets ab 768px Breite
.col-xs-x für kleinste Displays, Mobiltelefone unter 768 Pixel Breite.
So ergibt sich dieses Markup:

Beispiel 2:

<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12">
Spalte 1
</div>
<div class="col-lg-4 col-sm-12">
Spalte 2
</div>
<div class="col-lg-4 col-sm-12">
Spalte 3
</div>
</div>
</div>

Das Ergebnis im schmaleren Browser:

Der Code aus Beispiel 2 erzeugt dasselbe Spalten-Layout auf dem Desktop. Aber ab Tablet-Größe wird der Inhalt jeder einzelnen Spalte in voller Breite (12) angezeigt. Somit lässt sich das Verhalten der Website für alle Devices sehr genau definieren. Dies ist definitiv die größte Stärke dieses Frameworks.

Und sonst?

Mitgeliefert werden eine Vielzahl an Klassen für die Textauszeichnung, Buttons, JavaScript-Funktionen für Modal-Popups, eine Bild/Text-Slider (Carousel), Klassen für Bilder, Navigationselemente, wie Dropdown-Menüs oder Tabs.

Um den Funktionsumfang, und damit die Dateigröße der Bootstrap-Files einzuschränken, lässt sich das Paket unter http://getbootstrap.com/customize/ sehr genau anpassen. Farben, Schriftarten und Abstände lassen sich einstellen und man erhält ein perfektes Bootstrap-KIT für den Eigengebrauch.

Vorteile:
  • Schnelles Anfertigen von Prototypen für Pages, Proof-of-Concept und Klickdummys möglich
  • Vielzahl an teilweise kostenlosen Erweiterungen und Themen verfügbar
  • Gut dokumentierte Funktionsweise
Nachteile:
  • Versierte Webentwickler werden sich gegängelt fühlen durch die vorgefertigten Elemente
  • Web-Designer sollten das Grid von Bootstrap bereits im Entwurf berücksichtigen
  • Wer Bootstrap mit einem CMS benutzen will, muss das Markup seiner Module (z.B. Pagination) selbst anpassen oder neu entwickeln

Fazit

Ob Bootstrap das System der Wahl ist, muss von Fall zu Fall entschieden werden. Wer beispielweise nur das Grid-System nutzen möchte, wird in jedem Falle schneller zu ordentlichen Ergebnissen kommen als das Coding from-scratch vorzunehmen.

Interessierten Webentwicklern empfehle ich, sich auf der Website einmal einzulesen:
http://getbootstrap.com/getting-started/ 

Viel Spaß mit Bootstrap.


Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar