Das ist neu in Bootstrap 4
Montag, 26. März 2018

Das ist neu in Bootstrap 4

Im Januar 2018 wurde die vierte Version des Frontend-CSS-Frameworks Twitter Bootstrap veröffentlicht. Die neue Version bringt neben massiven Leistungsverbesserungen auch neue Elemente mit. Wir haben die neue Version unter die Lupe genommen.

 

Twitter Bootstrap 4 – Neue Version mit neuen Funktionen

Das wohl erfolgreichste Frontend-CSS-Framework Twitter Bootstrap (kurz Bootstrap) geht in die vierte Runde. Seit Januar 2018 steht Bootstrap nun in der Version 4.0. bereit und bringt viele „breaking changes“ mit sich. In diesem Beitrag berichten wir über unsere ersten Erfahrungen und die größten Änderungen der neuen Version.

Twitter Bootstrap – ein kurzer Rückblick

2011 erblickte Twitter Bootstrap das Licht der Welt. Ursprünglich wurde das Frontend-CSS-Framework ins Leben gerufen, um das Look & Feel der internen Tools des Dienstes Twitter zu vereinheitlichen.

Die erste Version des Frameworks war noch nicht responsive, doch selbst damit zeigte sich sehr schnell, welchen massiven Nutzen das Framework für Webentwickler darstellt.

Entstanden in einer Zeit, in der Smartphones und Tablets immer häufiger genutzt wurden um Webseiten zu besuchen, bot Bootstrap ab der Version 2 als eines der ersten Frameworks ein verlässliches Toolset, um eine einheitliche Darstellung über die unterschiedlichen Devices zu gewährleisten. Der Clou dahinter war ein durchwegs strukturiertes Markup auf Basis von HTML5 und CSS3.

Das GitHub-Projekt zu Twitter Bootstrap zählt über alle Versionen laut dem Herausgeber etwa 50.000 Forks. Somit werden täglich im Schnitt 20 neue Forks des Projekts erstellt, woraus wiederum neue Themes oder Weiterentwicklungen des Frameworks geschaffen werden.

Laut dem Dienst „Built With“ kommt Twitter Bootstrap heute bei 18,5 % der Top 1 Millionen Webseiten (Ranking nach Traffic) zum Einsatz (Quelle: https://trends.builtwith.com/docinfo/Twitter-Bootstrap).

Das ist neu in Twitter Bootstrap 4

Goodbye Less

sass logoWie schon bei Release von Bootstrap 3 angekündigt, setzt das Framework ab der Version 4 nur noch auf Sass und ersetzt damit Less vollständig. Neben dem Vorteil, dass Sass durch Libsass schneller als Less kompiliert werden kann, dürften sich insbesondere Front-End-Entwickler über diese Änderung freuen, da Sass schon immer durch FE-Entwickler bevorzugt wurde. Laut dem Hersteller soll es in der Version 4 auch keinen Less-Port geben. Zukünftige Projekte mit Bootstrap werden somit nur noch auf Sass setzen.

Internet Explorer 8 ist raus

Ab der Version 4 wird der Internet Explorer 8 durch das Framework nicht mehr unterstützt. Da der Browser weltweit nur noch ca. 0,6% Marktanteil innehält, konnte getrost auf eine Abwärtskompatibilität verzichtet werden.

Das Framework hingegen profitiert daraus, da es dadurch stärker auf CSS3 setzen kann, was durch den Legacy Browser nicht unterstützt wurde. Das schwächste Glied in der Browser-Kette ist nun Internet Explorer 9, der aber gerade genug CSS3 unterstützt um kein großes Problem darzustellen.

Flexbox

Das optionale Flexbox-Grid stellt insbesondere für Frontend-Designer die langersehnte Erfüllung eines Traums dar. Durch dieses smarte Grid ist es nämlich möglich, dass einzelne Grid-Elemente die gleiche Höhe besitzen, obwohl die Inhalte der Boxen unterschiedlich sind.

Flexbox wird von Internet Explorer 9 noch nicht unterstützt, daher ist dieser Modus in Bootstrap 4 noch optional. Ändert man die Variable $enable-flex jedoch auf true (default-Wert ist false), arbeiten nach dem Kompilieren alle Grid-Komponenten automatisch mit Flexbox. Hierfür ist keine Änderung im Markup der Seite notwendig.

Dokumentation: https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/#flexbox-options

Cards ersetzen Panels und Wells

Zur Segmentierung von Inhalten kamen in Bootstrap 3 Panels und Wells sehr häufig zum Einsatz. Ab Bootstrap 4 werden diese durch Cards ersetzt. Die Umsetzung der Cards in Bootstrap 4 ist aus unserer Sicht wohl eine der größten Design-Änderungen der neuen Version. Die Ausgabe durch Cards wird dabei sehr übersichtlich und ermöglicht eine sehr flexible Gestaltung von Inhaltselementen und Interaktionsflächen.

Cards können als einzelne Elemente oder in Gruppierungen ausgegeben werden. Letzteres ist in drei wesentlichen Stilen möglich. Sehr interessant ist hierbei die Ausgabe von sog. „card columns“. Cards werden dabei angeordnet wie in einem Masonry. Jeder Card kann hierbei selbstverständlich ein eigener Stil übergeben werden.

bootstrap4 abb2 card columns

Abbildung 2 card columns | Quelle: https://getbootstrap.com/docs/4.0/components/card/

Neben der Ausgabe in Card Colums ist es auch möglich, Cards als sog. „card groups“ anzuordnen. Hierbei werden Cards ohne einer Margin zwischen den Elementen ausgegeben. Dies ist jeweils auf eine Reihe (row) anwendbar.

 bootstrap4 abb3 card groupsAbbildung 3 card groups | Quelle: https://getbootstrap.com/docs/4.0/components/card/

Wer einen Abstand zwischen den Elementen wünscht, kann auf die Gruppierung als „card deck“ zurückgreifen.

bootstrap4 abb3 card groups

Abbildung 4 card decks | Quelle: https://getbootstrap.com/docs/4.0/components/card/

Die Optionspalette zur Gestaltung der Card-Elemente ist sehr umfangreich. Der Vorteil der Gruppierungen besteht allem voran darin, dass Inhaltselemente mit unterschiedlichem Inhalt die gleiche Höhe aufweisen. Bootstrap 4 legt hier sogar noch eine weitere Option drauf: Footer für Card Elemente. Wie der nachfolgende Screenshot zeigt, wird dadurch ein einheitlicher Abschluss von Card-Elementen mit minimalem Aufwand ermöglicht.

bootstrap4 abb5 card deck

Abbildung 5 card deck mit einheitlichem Footer | Quelle: https://getbootstrap.com/docs/4.0/components/card/

Dies funktioniert übrigens auch ohne Aktivierung der Flexbox. Im Standard-Grid Modus (also ohne dem Einsatz von Flexbox) wird hier auf einen CSS-Trick zurückgegriffen um die gleichbleibende Höhe auch ohne den Einsatz von JavaScript zu ermöglichen.

Beispiele und Dokumentation: https://getbootstrap.com/docs/4.0/components/card/

Variablen für individuelle Anpassungen

Das Ziel von Bootstrap ist es, Webseiten-Layouts durch den Einsatz des Frameworks so effizient und zeitsparend wie möglich zu erstellen. In der Version 3 des Frameworks war es noch üblich, ein eigenes Stylesheet zu erstellen, worin beispielsweise Farben oder Typografie für jedes Projekt festgelegt wurden.

Bootstrap 4 stellt für die üblichen Anpassungen praktische Sass-Variablen zur Verfügung. Dies erleichtert die Gestaltung von Templates enorm und verkleinert die CSS-Deklarationen um viele hundert Zeilen. Über die Variablen kann man z.B. festlegen:

  • Farben
  • Rundung von Ecken
  • Schatten
  • Link Styles
  • Typographie
  • Tabellen
  • Grid-Einstellungen (Breakpoints, Container, Spalten)
  • Vieles mehr…

Kleinere Gesamtgröße

Insbesondere in Hinblick auf das Ranking bei Suchmaschinen ist jedes eingesparte Kilobyte ein Gewinn. Bootstrap 4 besticht durch eine Reduktion um 30% des Datenvolumens. Bootstrap 3 hatte eine Gesamtgröße von ca. 123kb. Bootstrap 4 hingegen schlägt nur noch mit ca. 88kb zu Buche.

Viele weitere Änderungen

Selbstverständlich können wir in diesem Artikel nicht auf alle Änderungen der neuen Version eingehen. Nachfolgend möchten wir jedoch noch ein paar nennenswerte Änderungen stichpunktartig aufführen.

Neue Reset-Komponente: Reboot.css

Normalize.css wurde durch Reboot.css ersetzt.

Volle jQuery 2.0-Kompatibilität

Da Internet Explorer 8 nicht mehr unterstützt wird, kann das schnellere, umfangreichere und kleinere jQuery 2.0 vollumfänglich eingesetzt werden.

Glyphicon support beendet

Bootstrap 4 hat den Support für Glyphicons beendet und unterstützt somit aktuell nur noch FontAwesome.

Outline Buttons

Der neue Button-Style „Outline Button“ stellt einen neuen Button-Stil bereit. Die Buttons wurden für Stilelemente geschaffen, in denen die gefüllten Buttons zu sehr auftragen würden. Der Stil kann durch die CSS-Klasse „.btn-outline-*“ eingebunden werden.

bootstrap4 abb6 outline buttons

Abbildung 6 outline buttons | Quelle: https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons

Beispiele und Dokumentation: https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons

Wechsel von Bootstrap 3 auf Bootstrap 4

Der Wechsel von Bootstrap 3 auf Bootstrap 4 ist kein triviales Vorhaben. Wer ein Webseiten-Template gekauft hat, sollte in jedem Fall das Update des Templates durch den Hersteller abwarten. Bei individuell entwickelten Templates sollte man bei einem Wechsel von Bootstrap 3 auf Bootstrap 4 in jedem Fall prüfen, ob nicht ein komplettes Redesign der Webseite in diesem Zusammenhang Sinn macht. Ein Wechsel von Bootstrap 3 auf Bootstrap 4 ist nicht zwingend notwendig. Die verwendeten Komponenten werden vom Hersteller aktuell noch mit Patches versehen.

Unser Fazit

Twitter Bootstrap 4 ist eine lang ersehnte neue Version des Frontend-CSS-Frameworks. Die Änderungen und Verbesserungen an der neuen Version sind aus unserer Sicht optimal auf die Anforderungen moderner Webentwicklung ausgerichtet. Insbesondere der Wechsel von Less auf Sass gefällt uns sehr, da durch die umfangreichen Variablen zur Konfiguration der Seite eine Individualisierung von Templates stark erleichtert wird.

Autor: Kevin Goodin

Mario Pöschl

Ihr Ansprechpartner:
Mario Pöschl - Webentwicklung und eCommerce-Lösungen

Kontaktaufnahme »

Weitere Beiträge in dieser Kategorie: