Hurra, Hurra: Bootstrap 4 ist da

Version 4 wurde im Vergleich zu 3 fast komplett neugeschrieben. Die wichtigsten Änderungen hierbei sind vor allem die entfallene Unterstützung für IE8, IE9 und iOS6. Das liegt vor allem am der Verwendung von Flexbox im gesamten Grid-System.

Die Komponenten pager, panel, thumbnail und well sind entfernt worden, dafür gibt es die neue Komponente Cards für Card-Based-Design Elemente. Pixel-Angaben sind nun rem (Root-EM) gewichen. Die Webfont Glyphicon wurde aus dem Projekt entfernt.

Desweiteren muss man in Grids nicht mehr zwingend die Größe der Spalten angeben (z.B. .col-xs-12), die Klasse .col reicht aus, Flexbox sei Dank. Dafür gibt es nun eine neue Viewport-Klasse: Neben xs, sm, md, lg auch xl. xl gilt für alle Viewportbreiten oberhalb von lg. Das Grid-System arbeitet nun nicht mehr mit min-width, sondern max-width.

Neu sind auch responsive Klassen für Innen- und Außenabstände (padding und margin). So bewirkt beispielsweise die Klasse .pt-1-md ab der Bildschirmbreite md ein Padding-Top von 0.25rem.

Die Klassen setzen sich dabei zusammen aus p für padding, t für top. Für margin-right hieße die Klasse dann z.B. .mr-1-md. Somit lassen sich gleichbleibende Abstände für viele Objekte setzen, ohne diese immer wieder in verschiedenen Klassen erneut zu definieren. Somit lässt sich CSS effizienter nutzen und gerade in großen Projekten, das Datenvolumen durch CSS beschränken.

Noch immer verwendet Bootstrap jQuery, hat jedoch mittlerweile auf die Version 3 umgeschwenkt. Neu ist auch das Tooltip-Script popper.js, welches jedoch optional ist. Letztendlich wurde das Präprozessor-System von LESS auf SASS umgestellt und es ist nun nicht mehr möglich, nicht-responsive Seiten zu erstellen.

Und weil es an dieser Stelle auch immer wieder ein Thema war – das Datenvolumen hat sich leider nicht verbessert: Die Standard bootstrap.min.css von 3.3.7 war noch 119 Kilobyte schwer, die von 4.0.0beta3 wiegt nun 139 Kilobytes. Auch die bootstrap.min.js von Version 3.3.7 war mit 37 Kilobyte deutlich kleiner als die bootstrap.min.js (ohne Popper.js) von 4.00beta3 mit 48 Kilobyte. Zumindest im Datenvolumen hat sich Bootstrap dann doch verschlimmbessert.

Mit all den neuen Features ist Bootstrap 4 fit für die Zukunft. Wer jedoch noch alte Browser unterstützen muss, sollte weiterhin auf Version 3 zurückgreifen. Das Project-Board für das Stable-Release, enthält keine kritischen Bugs mehr. Insofern freuen wir uns das Final-Release und die großartigen neuen Features.

Für eine genaue Liste aller Änderungen lesen Sie hier weiter:
https://getbootstrap.com/docs/4.0/migration/

 Update: Seit 18. Januar gibt es Bootstrap 4.0 und Bootstrap 4 ist somit aus der Beta-Phase raus.