Die Vorteile eines CSS-Frameworks liegen auf der Hand: Elemente, die sich projektübergreifend wiederholen, aber dennoch immer wieder neu definiert werden müssen, liefert ein CSS-Framework wie Bootstrap als vorgefertigten Style. So hat man fast alles immer zur Hand, was man bei der Gestaltung einer Website benötigen könnte. Bootstrap ist mit mittlerweile über 56.000 Sternen und 19.000 Forks bei GitHub das wohl erfolgreichste CSS-Framework.

Das ursprünglich aus dem Hause Twitter stammende Framework erhielt vor kurzem ein massives Update und ist jetzt in der Version 3 zum Download verfügbar. Rund neun Monate dauerte die Entwicklung von Bootstrap 3. Dabei gab es über 2.700 Commits von 319 Entwicklern. Außerdem verringerte sich das minifizierte CSS um 20 Prozent – von 127 auf 97 Kilo-Byte. Daneben gibt es aber auch noch weitere, wichtige Neuerungen.

Bootstrap 3 zeigt sich zudem von einer flachen Seite: Die Buttons mit plastischen Effekten sind allesamt verschwunden und auch sonst machen alle Komponenten einen sehr minimalistischen und aufgeräumten Eindruck. Diese Entscheidung folgte dabei nicht etwa dem derzeitigen Flat-Design-Trend, sondern hatte pragmatischere Gründe: Wer bereits mit Bootstrap 2 gearbeitet hat weiß, dass man viele Komponenten aufgrund ihres vordefinierten Stils im eigenen Stylesheet anpassen musste. Diese vordefinierte Optik bringt zudem unnötige Kilobytes auf die Waage. Gut also, dass die klassische Bootstrap-Optik nun nicht mehr Bestandteil des Frameworks ist, sondern nur ein optionales Theme.

Bootstrap 3 verfolgt nun zudem auch konsequent den Mobile-First-Ansatz. Das bedeutet, dass alle Komponenten so gebaut sind, dass sie zunächst für mobile Geräte optimiert sind. Mit steigender Viewport-Größe wachsen diese dann mit. Dies funktioniert zwar auch bei einem „normalen“ Responsive-Design-Ansatz. Beim Mobile-First-Ansatz konzentrieren sich die Entwickler jedoch zunächst auf mobile Geräte und entwickeln die Anwendung für eine optimale mobile Performance.

Während man die Responsive-Design-Funktionalität in Bootstrap 2 noch als separates Stylesheet einbinden musste, sind alle Elemente in Bootstrap 3 von Beginn an responsive. Was für viele Webworker eine angenehme Änderung ist, könnte für einige zum Problem werden. Aber auch nicht responsive Websites lassen sich weiterhin mit dem Framework realisieren. Hierfür muss der Entwickler lediglich einige Klassen anpassen und den Meta-Viewport aus dem Header des HTML-Dokuments entfernen. Details zu diesem Prozess finden sich im Abschnitt „Disabling Responsiveness“ auf der Website von Bootstrap [1]. Beim Einsatz von Grids und Navbars gestaltet sich die Anpassung jedoch etwas komplizierter. Bootstrap liefert auf seiner Website ein nicht responsives Beispiel für einen solchen Fall [2].

Daneben hat Bootstrap ein Update für das Box-Modell erhalten. Wenn man einem Element eine Breite oder Höhe gibt und es zusätzlich mit einem Rahmen oder Innenabstand versieht, so ändert sich normalerweise auch die endgültige Größe des Elements. In Bootstrap 3 sind alle Elemente nun standardmäßig mit „box-sizing:border-box;“ ausgestattet, was dieses Render-Verhalten aushebelt. Das ermöglicht einfachere Größenangaben und ein verbessertes Grid-System.

Wie Bootstrap 2 enthält auch Version 3 ein Grid-System. Dieses lässt sich in bis zu 12 Spalten aufteilen, die sich dem Viewport beim Vergrößern anpassen. Hierfür kreierte Bootstrap vier Hilfsklassen, die das Grid an die unterschiedlichen Viewport-Größen der Geräte anpasst. Somit kann ein Grid-Element in den jeweiligen Media-Queries unterschiedliche
Spaltenbreiten haben, was flexiblere Layouts ermöglicht.

Grid-Element	Viewport-Größe
Extra kleine Geräte	weniger als 768 Pixel (.col-xs-*)
Kleine Geräte	mehr als 768 Pixel (.col-sm-*)
Mittelgroße Geräte	mehr als 992 Pixel (.col-md-*)
Große Geräte	mehr als 1200 Pixel (.col-lg-*)

Um Probleme mit anderen JavaScript-Anwendungen zu vermeiden, enthält Bootstrap 3 komplett umgeschriebene Plugins und Namespaces. Dies reduziert das Risiko, dass Skripte von Drittherstellern in Konflikt mit Bootstrap-Funktionen stehen und die Funktionsweise der Bootstrap-Komponenten beeinflussen oder sogar komplett verhindern.

Außerdem ersetzt in Bootstrap 3 ein eigener Icon-Font die alten PNG-Icons. Icon-Fonts haben viele Vorteile, die Bild-Icons aus technischer Sicht nicht bieten können. So kann man zum Beispiel ohne große Umstände die Farbe der Icons via CSS ändern, ohne ein Bildbearbeitungsprogramm bemühen zu müssen. Da Icon-Fonts auf Vektoren basieren, lassen sie sich verlustfrei skalieren und verbrauchen im Vergleich zu größeren CSS-Sprites deutlich weniger Platz. Das Glyphicon getaufte Set enthält in Bootstrap 3 außerdem 40 neue Symbole.

Die Navigationsleiste ist nun – wie alle Komponenten von Bootstrap – von Beginn an responsive und beinhaltet einige nützliche Subkomponenten wie Dropdowns, Buttons und Text-Klassen. Daneben liefert Bootstrap 3 komplett überarbeitete Modale Dialoge: Sie nehmen nun die komplette Höhe des Viewports ein, anstatt sich auf eine festgelegte Maximalhöhe zu beschränken. Damit lassen sich die Dialoge besser an mobile Geräte anpassen und sind leichter zu bedienen.

Neu dazugekommen sind die Listen und Panels. Die sogenannten „List Groups“ sind flexible Komponenten für die Darstellung von Listen. Die grundlegendste Implementierung ist der Einsatz mit einer sogenannten „Unordered List“. Mit Hilfe der Badges-Komponente lässt sich ein Badge an der rechten Seite des Listen-Elements hinzufügen.

Listen lassen sich per List Groups miteinander verknüpfen. Hierfür definiert man sie mit einem DIV. Anchor-Tags und entsprechende Klassen stellen dann eine Verbindung her. Die Inhalte von List Groups sind nicht auf Texte beschränkt. Sie können jegliches HTML enthalten und sind somit sehr vielfältig einsetzbar.

Das neue Panel ist eine zusätzliche Hilfskomponente, die den Content in einer Box verstaut. Mit der .panel-Klasse erhalten Container zunächst einen Border und ein Padding. Die Klasse .panel-heading erstellt eine Überschrift für das Panel. Möglich sind h1- bis h6-Headlines, die lediglich mit der .panel-title-Klasse gekennzeichnet sein müssen. Mit dem .panel-footer erhält das Panel ein abschließendes Element, das sich mit Texten, Links und Buttons versehen lässt. Mit den Kontext-Klassen von Bootstrap kann man Panels zudem hervorheben und mit einer zusätzlichen Bedeutung versehen.

Panels können außerdem Tabellen und List Groups enthalten und eignen sich somit als gut einsetzbare Informationskomponente. Einige Komponenten hat Bootstrap beim Redesign seines Frameworks jedoch auch gestrichen. Das Collapsible Panel – eine Erweiterung der neuen Panels – hat zum Beispiel das Accordion ersetzt. Auch die Submenü- und Typehead-Komponente ist zusammen mit einigen kleineren Komponenten entfallen.

Wie sein Vorgänger lässt sich auch Bootstrap 3 mit Hilfe eines Customizers anpassen: So können Entwickler zum Beispiel eigene Werte für die Variablen der auf LESS basierten Stylesheets definieren oder nicht benötigte Komponenten ausklammern und so Dateigröße einsparen.

Den Kompilierungsprozess hat Bootstrap nach eigenen Aussagen deutlich verbessert: Die Berechnungen finden ab sofort im Browser statt. Auch bei der Handhabung von Abhängigkeiten sollen fehlerhafte Custom-Builds der Vergangenheit angehören. Alle Customizations speichert Bootstrap 3 als anonymen Gist und stellt sie für den späteren Download bereit.

Auch die Dokumentation haben die Bootstrap-Entwickler aufgebohrt. Sie enthält nun nicht nur Informationen zu den Komponenten und Klassen von Bootstrap, sondern auch zum Thema Browser-Support inklusive Tipps zu Bugs, Fallstricken beim Einsatz von Bootstrap und einige Work-Arounds. Den Support von Legacy-Browsern hat Bootstrap mit Version 3 eingeschränkt. Um responsive Websites im Internet Explorer 8 realisieren und Media-Queries verarbeiten zu können, benötigen Entwickler daher respond.js. Für die optimale Darstellung muss man den Kompatibilitätsmodus des IE8 blockieren.

Für die Migration von Bootstrap 2 auf Version 3 liefert die Dokumentation einen umfassenden Guide mitsamt einer Liste aller veränderten Klassen.

Für Redesigns bietet das neue und schlanke Bootstrap 3 mit seinen zahlreichen
Neuerungen wie erwartet eine solide Grundlage, um spannende und flexible
Designs zu erzeugen. Die Portierung von Bootstrap 2 auf Version 3 ist jedoch ein hartes Stück Arbeit. Selbst wenn die Website komplett auf den Bootstrap-Klassen basiert und keine eigenen Anpassungen enthält, dürfte ein Update viel Zeit in Anspruch nehmen.

Im Internet kursieren zahlreiche Erweiterungen für die Bootstrap-Komponenten, die sich auch weiterhin auf die Funktionsweise von Bootstrap 2 verlassen. Eine Portierung bestehender Projekte auf Bootstrap 3 ist somit nicht unbedingt notwendig – zumal sich die Vorgängerversion Bootstrap 2.3.2 immer noch herunter
laden lässt und auch die Dokumentation weiterhin zur Verfügung steht. Lediglich
die URL hat sich durch das Erscheinen von Bootstrap 3 geändert [3].

Bootstrap 3 ist ein notwendiger Schritt, der den Marktentwicklungen Rechnung trägt: Der Mobile-First-Ansatz bedient die gestiegenen Ansprüche an die Performance mobiler Websites. Gewohnheitstiere könnten jedoch Probleme mit dem Umstieg auf die neue Version haben. Mit etwas Bootstrap-Erfahrung findet man sich zwar zurecht – die im Kopf verankerten Klassen und Konventionen durch die neuen zu ersetzen, wird aber etwas Zeit brauchen. Für Neuentwicklungen lohnt sich aber auf jeden Fall ein Blick auf die neue Version des Frameworks [4].