Twitter benötigte 2010 eine einheitliche Bibliothek für die Gestaltung von Oberflächen von Webseiten. So entstand ein Framework, das 2011 als Open Source-Projekt veröffentlicht wurde und heute in mittlerweile vierter Version große Verbreitung findet.
Definition
Bootstrap ist ein kostenloses und quelloffenes Frontend-Web-Framework zur Erstellung von Webseiten. Es dient nur der Front-End-Entwicklung und enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen und Navigation sowie optionale JavaScript-Erweiterungen. Das Ergebnis ist ein einheitliches Erscheinungsbild in Webbrowsern. Darüber hinaus können Entwickler die in Bootstrap definierten CSS-Klassen nutzen, um das Erscheinungsbild ihrer Inhalte weiter anzupassen.
Durch die JavaScript-Module ist es möglich, Nutzerinteraktionen einzubinden, z.B. Dialogboxen, Bilder-Slideshows und Tabs. Bootstrap bietet zudem alle Voraussetzungen für responsives Webdesign, so dass Webseiten auf allen Geräten (Desktop, Smartphones und Tablets) optimal dargestellt werden.
Wie funktioniert Bootstrap?
Bootstrap stellt einzelne Komponenten zur Verfügung, die man in seine Webseite einfügen kann. Jede Komponente besteht aus einer HTML-Struktur, CSS-Deklarationen und in einigen Fällen begleitendem JavaScript-Code. Bootstrap nutzt eine Obermenge von CSS, die Stylesheet-Sprache Sass (Syntactically Awesome Stylesheets). Das modular aufgebaute Bootstrap 4 ist in die Bereiche Layout, Inhalt, Komponenten und Werkzeuge gegliedert. Der Entwickler kann festlegen, welche Komponenten er davon nutzen möchte.
Anpassungen in Bottstrap vornehmen
Über das zentrale Konfigurationsstylesheet können weitere Anpassungen vorgenommen werden. Darin sind unter anderem Schriftart, -größe und -farbe sowie der Aufbau des Grid-Layouts definiert. Weitere Änderungen sind möglich, indem die Sass-Deklarationen überschrieben werden.
Ab Version 2 lässt sich Bootstrap auch über eine spezielle “Customize”-Option konfigurieren. Der Entwickler wählt dabei die gewünschten Komponenten über ein Formular und passt ggf. die Werte der Optionen seinen Bedürfnissen an. Daraufhin wird ein Paket erzeugt, das das fertig kompilierte CSS-Stylesheet enthält.
Zentrale Bootstrap Komponenten
Die zentralen Komponenten von Bootstrap sind die Layoutkomponenten, da sich diese auf die gesamte Webseite auswirken. Die grundlegende Layoutkomponente heißt “Container”, da alle Elemente der Seite darin platziert werden. Entwickler können zwischen einem Container mit fester Breite und einem Container mit dynamischer (“Fluid”-)Breite wählen. Während letztere immer die Breite der Webseite ausfüllt, verwendet die erstere eine von vier vordefinierten festen Breiten, responsiv abhängig von der Größe des Bildschirms, auf dem die Seite angezeigt wird. Sobald ein Container eingerichtet ist, implementieren andere Bootstrap-Layoutkomponenten ein CSS-Rasterlayout mit Zeilen und Spalten.
Das Bootstrap-Layout
Das Bootstrap-Layout basiert auf einem 12-spaltigen Raster mit einer Gesamtbreite von 1140 Pixeln. Die Rasterbreite wird via CSS-Breakpoints der Displaygröße des Anzeigegeräts angepasst. Alternativ kann das Rasterlayout über die komplette Displaygröße dargestellt werden.
Die JavaScript-Komponenten enthält Bootstrap in Form von JQuery-Plugins. Diese bieten zusätzliche Elemente für die Benutzeroberfläche wie Dialogboxen, Quick-Infos und Bilder-Slideshow.
Vorteile und Nachteile von Bootstrap
Vorteile
Bootstrap vereinfacht die Frontend-Webentwicklung durch einheitliche Layout-Vorgaben. In gewissem Rahmen sind diese Vorgaben anpassbar und können mit neuen Funktionen erweitert werden.
Bootstrap wurde auf Basis von HTML5 und CSS3 entwickelt. Dabei wurde Wert auf Abwärtskompatibilität zu älteren Browser-Versionen gelegt. In CSS3 eingeführte Eigenschaften wie beispielsweise Farbverläufe, Schatten und abgerundete Ecken werden von älteren Webbrowser nicht unterstützt, trotzdem lassen sich auf ihnen Bootstrap-Seiten anzeigen. Lediglich der Internet Explorer 9 und frühere Versionen werden ab Bootstrap Version 4 nicht mehr unterstützt.
Nachteile
Das komplette Framework ist umfangreich, was die Ladezeit der Webseite verzögern kann. Inbesondere auf Smartphones mit langsamer Internetverbindung kann sich dies auswirken. Abhilfe schafft das Weglassen unnötiger Komponenten und die Optimierungen der Performance im CMS bzw. auf der Webseite.
Das Layout muss sich dem Framework anpassen. Die vorgegebenen Komponenten sind zwar anpassbar, dennoch hat jedes Design einen gewissen “Bootstrap-Touch”. Wenn Websites sehr individuell gestaltet werden sollen, würde man andere Frameworks wählen.
Wie kann ich Bootstrap beim Entwickeln nutzen?
Eine vorkompilierte Version von Bootstrap ist in Form einer CSS-Datei und drei JavaScript-Dateien verfügbar, die zu einem Webprojekt hinzugefügt werden können. Die Grundform von Bootstrap ermöglicht es Entwicklern, Anpassungen zu implementieren. Diese Grundform ist modular, d.h. der Entwickler kann nicht benötigte Komponenten entfernen und die nicht kompilierten Sass-Dateien ändern.
Um Bootstrap für eine HTML-Seite zu verwenden, muss nur ein ZIP-Archiv von der Bootstrap-Webseite genutzt werden. Dieses Archiv enthält fast alle einzubindenden Dateien, darunter die Stylesheetdatei mit allen Komponenten, die JavaScript-Datei mit allen Plugins sowie eine Icon-Schriftart. Auf GitHub steht ein vollständiges, deutlich umfangreicheres ZIP-Archiv für Entwickler zur Verfügung. Hier sind auch Beispiele für typische Webseiten enthalten.
Die Dateien des ZIP-Archivs müssen in das eigene HTML-Dokument eingebunden werden. Im Falle der Nutzung von Javascript-Komponenten muss im HTML-Dokument ebenfalls die Javascript-Datei zusammen mit der JQuery-Bibliothek referenziert werden. Für angepasste Stileigenschaften und Javascript-Funktionalität können fast alle Elemente von Bootstrap auf der offiziellen Website verändert werden und in einem angepassten Paket heruntergeladen werden. Man kann Bootstrap aber auch vom Standard abweichend lokal kompilieren.
Fazit
Entwickler erhalten mit Bootstrap eine solide Grundlage für die Frontend-Entwicklung. Die Arbeit wird beschleunigt, da Komponenten bereits vorgegeben sind. Die technischen Eigenschaften der verschiedenen Anzeigegeräte (Desktop, Smartphones, Tablets) werden responsiv unterstützt. Weitere Funktionen wie JQuery können auf das bestehende Gerüst aufsetzen und so die Funktionalität der Benutzeroberfläche erweitern.
