Bootstrap(-Framework)

Bootstrap ist ein leistungsstarkes und sehr bekanntes Open-Source-CSS-Framework. Nahezu sämtliche Formatierungselemente wie z.B. Formulare, Buttons, Navigation, Schriften u.a. - beruhend auf HTML und CSS - sind bereits funktional vordefiniert. Als „mobile-first Framework liefert Bootstrap  die automatische Anpassung an alle Endgeräte in Form von Responsive Webdesigns gleich mit. Responsive Webprojekte lassen sich so relativ einfach und deutlich schneller realisieren.

Hintergrund:

Bootstrap ist die Weiterentwicklung eines unternehmensinternen Werkzeugs zu Steigerung der Webprojekt-Effizienz und kam erstmalig bei Twitter zum Einsatz. 2011 übergab Twitter das Framework als Open-Source der breiten Masse. Seitdem steigt die Anzahl der auf Bootstrap umgesetzten Seiten täglich.

Die Gewährleistung der Browser-Kompatibilität ist ein wesentliches Merkmal von Bootstrap und bietet zum Beispiel selbst auf älteren Browsern Gestaltungselement wie abgerundete Ecken, Schattierungen, Farbverläufe und vieles andere - mit adäquaten Funktionen  - an.

Ab der Version 2.0 wird die Umsetzung von Resonsive Webdesign unterstützt. Eigens hierfür beinhaltet das Framework ein 940 Pixel breites und zwölfspaltiges Rastersystem – auch Gridlayout genannt. Webprojekte basierend auf einem solchen Raster, liefern ihr Ergebnis auf den verschiedenen Endgeräten wie PCs, Tablets und Mobiltelefone in der korrekten Bildschirmauflösung automatisch aus. Eine separate CSS-Anpassung für die jeweiligen End-Geräte entfällt somit.

Dadurch das Bootstrap modular konzipiert wurde, kann selbst entschieden werden, welche Komponenten benötigt werden. Die einzelnen (LESS-)Stylesheets beinhalten die Komponenten des Frameworks, welche wiederum zu einer zentralen Bootstrap-Datei zusammengeschlossen sind.

Die bereits für ein modernes, übergreifendes Erscheinungsbild vordefinierten CSS-Dateien, lassen sich nach Belieben anpassen. Es besteht die Möglichkeit bereits kompilierte Bootstrap-Dateien zu verwenden. Alternativ können über eine Konfigurationshilfe die gewünschten Veränderungen vorgenommen und im Nachhinein kompiliert werden.

Bootstrap stellt zudem fix und fertige Funktionen für Oberflächenelemente wie Navigationen, Pageing, Breadcrumbs, Buttons mit Zusatzfunktionen, Fortschrittsleisten usw. zur Verfügung.

Die von Bootstrap verwendeten Java-Scripts basieren auf jQuery und schaffen zahlreiche, vorgefertigte Funktion wie z. B. Slideshows, Tooltips, die ohne Java-Script-Kenntnisse sofort eingesetzt werden können.

Technologische Umsetzung

Das Einbinden von Bootstrap ist kinderleicht. Es genügen drei Verweise im HTML-Head-Bereich, wobei zwei hiervon optional für die Javascript-Komponeten sind.

Abbildung: Die Bootstrap-Dateien werden im Head-Bereich der Website referenziert

Gewünschte Veränderungen von Bootsstrapstyles, sollten in einer separaten CSS-Datei ausgelagert werden. Hierzu werden die Klassen kopiert, verändert und die eigene CSS-Datei abgespeichert. Die Einbindung des eigenen CSS-Stylesheets muss dann nachrangig im HTML platziert werden.

Abbildung: die CSS-Datei mit den Anpassungen wird ebenfalls referenziert

Damit die gewünschten Formatierungen im Layout der Seite wirksam werden, ist es natürlich erforderlich, dass im HTML-Quelltext die richtigen Bootstrap-Klassennamen benutzt werden. Bei fertigen Bootstrap-Templates ist dies ohnehin der Fall. Wird ein eigenes Grid entworfen oder Elemente hinzugefügt, sind die entsprechenden Bezeichnungen jedoch exakt anzugeben. Eine umfangreiche Dokumentation findet sich auf der Seite http://holdirbootstrap.de/

Interessante Links zum Thema:

Responsive Design mit dem contentXXL CMS

Artikel "Google fordert: mobilfreundliches Internet"

Factsheet Responsive Design - darum sind mobilfreundliche Websites Pflicht!