Im zweiten Teil meiner Artikelserie zum Vergleich von CSS Frameworks geht es um das Bootstrap 4 CSS Framework. Ich habe so lange mit diesem Artikel gewartet, weil ich die finale Fassung der Version 4 dieses Frameworks abwarten wollte. Diese ist erst am 18.01.2018 veröffentlicht worden. Somit kann ich mich gleich mit den neuesten Änderungen und Erweiterung auseinandersetzen und sie hier beschreiben.
Bei Bootstrap handelt es sich um ein sogenanntes Applikationsframework und ist eines der beliebtesten und am weitesten verbreiteten CSS Frameworks. Neben einem responsiven CSS-Raster verfügt Bootstrap über umfangreiche Bibliotheken mit diversen Bedienoberflächenelementen, wie etwa Navigationselementen, Tabellen, Formularen, Buttons oder typografischen Vorgaben. Zusätzlich gibt es Javascript-Plugins, mit denen sich Animationen, Tooltips, Dialogboxen oder zusammenfaltbare Menüs realisieren lassen.
In der neuen Version 4 wurden noch einige weitere Elemente hinzugefügt, Detailverbesserungen vorgenommen, das responsive Design verbessert und auch einige überholte Komponenten wieder entfernt. Wie schon bei der Vorstellung des Materialize CSS Frameworks werde ich über die Dokumentation streifen und einzelne Elemente und Komponenten, die mir wichtig erscheinen, hervorheben und genauer beschreiben.
Layout
Für ein mit dem Bootstrap 4 CSS Framework erstelltes Layout benötigt man in der Regel ein Container Element, welches alle weiteren Seitenelemente beinhaltet und auf eine mittige Ausrichtung der Seite achtet und ein Raster (Grid) System, welches aus bis zu 12 Spalten besteht. Dieses Raster System sorgt für das “Responsive Web Design”, also für eine optimale Anzeige auf Geräten mit unterschiedlichen Bildschirmbreiten und -auflösungen.
Eine der vielen Neuerungen von Bootstrap 4 ist der Einsatz von Flexbox als Layoutsystem. Ein Flexbox-Layout besteht aus zwei Arten von Elementen, einem äußeren Container, der den Rahmen aufspannt, in dem sich die Elemente per Flexbox steuern lassen und den einzelnen darin enthaltenen Boxen. Die Container Klasse habe ich bereits erwähnt.
Das Spaltenraster (Grid) enthält spezielle Klassen, um die “Breakpoints” zu setzen, also die Bildschirmbreite, an welcher von einem Gerät auf ein anderes, ein anderer Seitenaufbau zu gestalten ist, um eine optimale Darstellung zu gewährleisten. Hierzu kennt Bootstrap 4 neuerdings fünf Klassen (in der Version 3 waren es noch vier Klassen).
| Klassenkürzel | Beschreibung |
|---|---|
| xs | Extra kleine Geräte (Mobiltelefone im Hochkantformat, < 576px) |
| sm | Kleine Geräte (Mobiltelefone im Querformat, < 768px) |
| md | Mittelgroße Geräte (Tablets, < 992px) |
| lg | Große Geräte (Notebooks, < 1200px) |
| xl | Extra große Geräte (Desktop PCs mit großen Bildschirmen) |
Möchte man z.B. auf einem Tablet PC eine Zeile mit zwei Spalten darstellen, dann gestaltet man dies so:
Neu im Bootstrap 4 CSS Framework sind die sogenannten Auto-Columns. Man muss nicht mehr die Spaltenbreite explizit festlegen. Alleine durch die Anzahl der Spalten legt Bootstrap die Spaltenbreite fest. Mit diesem Code wird eine Zeile mit drei gleich breiten Spalten dargestellt:
Ebenfalls neu hinzugekommen zum Bootstrap 4 CSS Framework ist das Medienobjekt. Damit lässt sich ein Bild mit zugehörigem Text nebeneinander darstellen. Ein solches Konstrukt sieht dann wie folgt aus:
Media heading
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin.
Diese Medienobjekte lassen sich verschachteln und die Anordnung des Bildes lässt sich einstellen. Ferner lassen sich Medienlisten anlegen, wie man sie aus den Kommentarzeilen von sozialen Netzwerken oder Blogs her kennt. Dies entspricht den Collections beim Materialize CSS Framework.
Über den Einsatz von normalize.css hinaus, wurden weitere Normalisierungen für HTML Elemente in einer Datei namens Reboot zusammengefasst. Was alles damit stilistisch überarbeitet wurde, kann man in der Dokumentation zu Bootstrap 4 nachlesen.
Für die Typographie wurde die bisherige Standardsschrift durch einen sogenannten “native font stack” ersetzt. Dadurch wird für unterschiedliche Betriebssysteme, eine jeweils optimale Schrift verwendet. Im Gegensatz zu dem Materialize CSS Framework stellt Bootstrap 4 keine Klasse zur Verfügung, um eine responsive Typographie zu ermöglichen. Es wird zwar in der Dokumentation gezeigt, wie man dies selbst machen kann, aber ein entsprechendes Feature hätte ich als hilfreich empfunden.
Zur Tabellendarstellung sind neue Klassen hinzugekommen, um die Tabellen durch Farben etwas eleganter gestalten zu können. So z.B. durch die Klasse “table-dark”. Generell wird die Formatierung einer HTML Tabelle mit der Klasse table eingeleitet. Für unterschiedliche Darstellungen dienen die Klassen table-striped für wechselnde Zeilenfarben, table-bordered für umrandete Tabellen und table-hover für Tabellen mit einem Hover-Effekt beim Darüberfahren mit der Maus.
Komponenten
Zu den Komponenten gehören zunächst die Klassen navbar und nav, die zur Erstellung einer responsiven Seitennavigation dienen. Dann gibt es die Klassen breadcrump und pagination. Die eine ermöglicht eine sogenannte Brotkrumen-navigation und die andere erzeugt eine Seitennummerierung.
Für die Darstellung von Knöpfen oder Neudeutsch Buttons gibt es die Klassen btn und btn-group. Buttons können auch anstelle von Radiobuttons und Checkbuttons in Formularen verwendet werden. Mit Button-Groups lassen sich recht einfach Toolbars realisieren.
Weiter wäre die Klasse list-group zu erwähnen, mit welcher man HTML-Listen übersichtlich in vertikaler Form darstellen kann. Neu hinzugekommen in Bootstrap 4 ist die Klasse list-group-flush, womit die äußeren Ränder entfernen können, um die Komponente in einem übergeordneten Konstrukt besser einbinden zu können.
Zu erwähnen wären noch die badge Klasse zum Etikettieren von Listeneinträgen, die Klasse tooltips, dessen Bedeutung selbsterklärend sein dürfte und das Plugin popover, mit welcher man ein Kontextmenü realisieren kann.
In einer weiteren Gruppe möchte ich die Klassen alert (zur Anzeige von Meldungen), progress (Fortschrittsanzeige) und jumbotron (zur Anzeige von großformatigen Marketingflächen) erwähnen.
Sehr umfangreiche CSS Formatierungen für die HTML Formulare hat Bootstrap 4 ebenfalls zu bieten. Die wichtigsten Klassen hierzu sind form-group, form-control und input-group. Für die Ausrichtung der einzelnen Formularelemente können die Raster Klassen (row, col und form-row) verwendet werden. In der neuen Bootstrap Version sind die Auszeichnungen von Meldungen zur Formularvalidierung um neue Klassen erweitert worden.
Es gibt auch eine Slideshow Komponente in der Klasse carousel, die jedoch eine feste Größe hat, was die Einsatzmöglichkeiten etwas einschränken.
Wesentlich erweitert wurde in Bootstrap 4 die Modal Komponente. Damit lassen sich Fenster in einer Lightbox darstellen. Neu hinzugekommen sind verschiedene Größen dieser Fenster, aber auch inhaltlich mehr Möglichkeiten innerhalb der Fenster. So lassen sich jetzt die Raster Klassen zur Ausrichtung des Inhalts innerhalb eines Fensters verwenden, per Data-Tags Daten an das Modal-Fenster übergeben, Tooltips und Popovers innerhalb eines Fensters anzeigen oder durch längere Texte innerhalb eines Fensters zu scrollen.
Mit dem Javascript Plugin Scrollspy lässt sich die Scroll Position innerhalb eines Navigationsmenüs oder einer Liste optisch anzeigen.
Und schließlich wurde mit dem Bootstrap 4 CSS Framework eine neue Komponente namens “Card” eingeführt, welche die früheren Komponenten Panels, Wells und Thumbnails ersetzt. Mit dieser Komponente gleicht sich Bootstrap an Foundation und dem Materialize CSS Framework an, die beide eine ähnliche Komponente bereits länger anbieten. “Cards” stellt einen Content Container dar, der sowohl Bild-, als auch Textinformationen enthalten kann. Es handelt sich um eine sehr universelle Komponente, die sowohl in der Anzahl der möglichen Contentarten, als auch in der Ausgestaltung der Darstellung recht flexibel ist. Die Komponente kann Header, Footer, Titelzeilen, Bilder, Listen oder ganze Navigationsbereiche und sogar eine Vielzahl an Kombinationen der vorgenannten Elemente enthalten. Ferner kann man die Raster Klassen zur Ausrichtung der jeweiligen Elemente ebenso verwenden, wie Farben und Rahmen anpassen. Auch die Größe einer Card lässt sich individuell festlegen. Was allerdings im Vergleich zum Materialize CSS Framework fehlt, ist der Effekt, die Karte umzudrehen und damit zusätzliche Informationen zu der Vorderseite der Karte anzuzeigen.
Utilities
Unter dem Oberbegriff “Utilities” sind eine Reihe von Klassen zusammengefasst, die sowohl im Zusammenhang mit den anderen Komponenten aus dem Bootstrap 4 CSS Framework, als auch generell für die Formatierung von HTML5 Elementen Verwendung finden.
Eine Reihe von CSS Eigenschaften kann man in Bootstrap 4 einfach mit einer Klasse abbilden. Hierzu gehören border, clearfix, color, display, float, position, sizing, spacing, vertical-align und visible.
Am Beispiel von Border will ich hierzu ein paar Beispiele demonstrieren:
// Rahmen um alle Seiten setzen
// Rahmen um obere Seite löschen
// Rahmenfarbe setzen
// alle vier Rahmenecken abrunden (Radius: 75px)
Mit der Klasse embed lassen sich Videos als responsive Elemente in eine HTML Seite einbinden.
Für die Textdarstellung gibt es ebenfalls einige Klassen für die Textausrichtung, Schriftgröße oder Kursivschrift. Ferner für die Texttransformation (Groß- oder Kleinschrift, Kapitälchen) und das Text Wrapping. Einen interessanten Effekt erzielt man mit der Klasse text-truncate. Zusammen mit einer Grid-Klasse lässt sich die Länge eines längeren Textes beschränken und mit drei Punkten am Ende versehen.
Es gibt auch eine Klasse um bestimmte Informationen nur von Screenreadern berücksichtigen zu lassen, während sie optisch ausgeblendet werden (sr-only).
Mit der Klasse text-hide lässt sich ein Image-Replacement realisieren. Das heißt, auf der Seite wird zwar eine Grafik angezeigt, jedoch steht für das SEO ein beschreibender Text zur Verfügung (besonders bei Überschriften hilfreich!).
Wie bereits oben erwähnt wird im Bootstrap 4 CSS Framework neuerdings auf das Layoutsystem Flexbox gesetzt. Hierzu wurde ein ganzes Paket an Klassen neu eingeführt, welche hier zu beschreiben den Rahmen sprengen würde. Am besten lesen Sie sich hierzu die entsprechende Seite in der Bootstrap Dokumentation durch.
Diese Änderung geht Hand in Hand mit dem Wegfall der Unterstützung vom Internet Explorer Version < 10 (Der Internet Explorer 9 unterstützt das Flexbox Kastensystem noch nicht). Wenn Sie Ihre Projekte von Bootstrap 3 auf Boostrap 4 migrieren wollen, lohnt sich in jedem Fall ein Blick in die Migrationshinweise in der Bootstrap Dokumentation.
Icons
Während Bootstrap 3 noch den Icon Font Glyphicons mitlieferte, wird die neue Version ohne einen speziellen Icon Font ausgeliefert. Jedoch sind sowohl Font Awesome, als auch andere Icon Fonts weiterhin einsetzbar. Da das Bootstrap 4 CSS Framework den Präprozessor SASS unterstützt, können Icon Fonts, die evenfalls SASS Files anbieten, in einer CSS Datei zusammengefasst werden.
Fazit
Bootstrap hat mit der neuen Version 4 zahlreiche Detailverbesserungen und Erweiterungen erfahren, die im praktischen Einsatz neue Möglichkeiten eröffnen. Man muss jedoch verstehen, dass die Einbindung des gesamten Frameworks selbst in komprimierter Form mit 141 KB zu Buche schlägt. Für die Optimierung der Ladezeiten ist es unerlässlich, dass man sich über den Präprozessor SASS eine individuelle Version mit ledglich denjenigen Komponenten und Plugins zusammenstellt, die man tatsächlich in seinem Projekt verwendet.
Ich setze persönlich Bootstrap seit ein paar Jahren ein, weil ich als Informatiker immer recht wenig Lust hatte, mich mit dem Layout von Webseiten zu beschäftigen. In größeren Projekten hatte ich dafür Web Designer oder Art Directors, welche die Vorlagen lieferten und ich konnte mich um das Backend und die Dynamisierung der Frontend Seiten kümmern. Bei kleineren Projekten musste ich dann doch selbst Hand an das Layout setzen, was nicht immer optimal gelangt. Doch seitdem es CSS Frameworks wie Bootstrap gibt, gelingen selbst Design Legastheniker wie mir recht ansprechende Layouts. Auch wenn es – wie man an diesem Blog sieht – immer noch Optimierungspotentiale gibt.
Bootstrap ist im Vergleich zum Materialize CSS Framework wesentlich umfangreicher und hat auch die bessere Dokumentation. Allerdings wartet Materialize mit einigen Feinheiten auf, welche Bootstrap missen lässt. Dazu gehört der vorhin angesprochene Effekt bei den Cards ebenso, wie der Parallax Effekt bei Materialize CSS, um nur ein paar Beispiele zu nennen. Da beide Frameworks mit dem Präprozessor SASS erstellt wurden, könnte ich mir vorstellen, dass man sich aus beiden Frameworks die jeweils nützlichsten Komponenten heraussuchen und in eine CSS Datei zusammenlegen könnte. Womöglich wären einige optische Anpassungen erforderlich. Das werden ich zu gegebener Zeit einmal ausprobieren und dann in diesem Blog das Ergebnis vorstellen.
Fragen oder Feedback zu diesem Artikel