web & mobile DEVELOPER 01 / 2016 – Bootstrap 4

wmd-1601

Bootstrap 4

Knapp 1,5 Jahren nach der Veröffentlichung von Bootstrap 3 setzt das mit Abstand beliebteste Frontend-Framework zum nächsten Versionssprung an. Wir schauen uns die Neuerungen ausführlich an und zeigen auch für Neulinge, wie die ersten Schritte im Framework aussehen.
Von Patrick Lobacher

Bootstrap bezeichnet sich auf selbst als: „…das beliebteste HTML, CSS, und JS Framework in der Welt, um responsive, mobile-first Projekte im Web zu erstellen.”

Der Claim ist zwar selbstbewusst, hat aber natürlich auch eine gewisse Substanz. So ist beispielsweise das ursprünglich von Twitter ins Leben gerufene Framework mittlerweile seit Jahren eines der beliebtesten Repositories auf GitHub und man (z.B. w3techs) geht davon aus, dass 13% aller Websites, die JavaScript verwenden, auch Bootstrap haben. Das sind in etwa 9% aller Websites im Web. Damit ist Bootstrap nach jQuery die beliebteste JavaScript-Bibliothek überhaupt.

bootstrap4_lobacher_01

Das ist Grund genug für die Entwickler diesen Erfolg zu festigen und das schon etwas betagte Framework einer Generalüberholung zu unterziehen.

Zum Zeitpunkt der Erstellung des Artikels war das Framework in der Alpha-Phase – aber im Gegensatz zu herkömmlicher Software kann man diesen Zustand bereits als sehr stabil bezeichnen. Es ist damit zu rechnen, dass die finale Version um den Jahreswechsel herum auf den Markt kommt.

Installation von Bootstrap

Man kann Bootstrap traditionell von http://getbootstrap.com/getting-started/#download laden. Sollte dort die Version 4 noch nicht erhältlich sein, so können Sie auf http://v4-alpha.getbootstrap.com/getting-started/download/ ausweichen.

Grundsätzlich ist es entweder möglich, die Sourcen minifiziert und kompiliert zu laden oder aber komplett (inkl. Dokumentation, Sass-Dateien, …).

Weiterhin ist es möglich, Bootstrap über einen Paket-Manager zu erhalten.

  • Bower
    bower install bootstrap
  • npm
    npm install bootstrap
  • Meteor
    meteor add twbs:bootstrap
  • Composer
    composer require twbs/bootstrap

Zusätzlich gibt es ab sofort 3 Custom-Builds:

  • Reboot
    Enthält variables/mixins, Normalize, und Reboot, aber kein JavaScript
  • Grid only
    Enthält variables/mixins und das Grid System, aber kein JavaScript
  • Flexbox
    Enthält Bootstrap mit aktiviertem Flexbox-Support

Hello World

Um die ersten Schritte mit Bootstrap zu machen, erstellen wir ein Verzeichnis bootstrap und dort zwei weitere Verzeichnisse css und js. In das Verzeichnis css kopieren wir die Datei bootstrap.css aus dem Unterverzeichnis dist/css der Bootstrap Sourcen. Und in das js Verzeichnis schließlich die Datei bootstrap.js aus dem Unterverzeichnis dist/js.


Nun benötigen wir noch jQuery, welches wir unter https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js herunterladen und ebenfalls im js Verzeichnis speichern können.

Nun legen wir eine Datei index.html direct im Verzeichnis bootstrap mit folgendem Inhalt an:

Listing 1: index.html

Hier ist auch gut die Ladereihenfolge der einzelnen Komponenten zu sehen, die man einhalten sollte, damit Bootstrap einwandfrei funktioniert.

bootstrap4_lobacher_02

Generelle Änderungen

Bootstrap 4 unterstützt IE 8 nun nicht mehr und kann daher mit einigen Features aufwarten (z.B. rem Unterstützung), die vorher nicht, nur schwierig oder nur mit Hilfe von Polyfills möglich waren.
Die Komponenten „well“, „panel“ und „thumbnail“ wurden entfernt und durch „cards“ ersetzt.

Glyphicons wurden komplett entfernt, da mit Font Awesome (https://fortawesome.github.io/Font-Awesome/) und Octicons (https://octicons.github.com) leistungsfähige Alternativen zur Verfügung stehen.

Die Primäre CSS-Einheit ist nun “rem” und nicht mehr “px”, die Einheit für die Media Queries “em” (anstellen von “px”). Die globale Font-Größe ist von 14px auf 16px angewachsen.

Konfiguration

Für die Konfiguration des zu erzeugenden CSS gibt es nun die Datei scss/_variables.scss, in der man Einstellungen treffen und dann das CSS erneut kompilieren kann. Dazu zählen:

  • Farben, z.B.
    $gray-dark: #373a3c !default;
  • Optionen, z.B.
    $enable-flex: false !default;
  • Abstände, z.B.
    $spacer: 1rem !default;
  • Einstellungen für das <body> Element, z.B.
    $body-bg: #fff !default;
  • Links, z.B.
    $link-color: $brand-primary !default;
  • Grid Breakpoints
    $grid-breakpoints: (xs: 0, sm: 34em, md: 48em, lg: 62em, xl: 75em) !default;
  • Grid Containers
    $container-max-widths: (sm: 34rem, md: 45rem, lg: 60rem, xl: 72.) !default;
  • Grid Columns, z.B.
    $grid-columns: 12 !default;
  • Typografie
    $font-size-base: 1rem !default;
  • u.v.a.m.

Neue Utility Klassen

Um Abstände und Ränder für beliebiege Elemente festzulegen wurde ein neues Set an Utility Klassen eingeführt. Diese bestehen aus drei Teilen, die mit einem Minus getrennt sind. Margins werden mit „m“, Paddings mit „p“ bezeichnet. Will man alle 4 Seiten ansprechen, verwendet man „a“, ansonsten „t“ für oben, „r“ für rechts, „b“ für unten „l“ für links, „x“ für rechts und links und „y“ für oben und unten. Als dritte Komponente wird entweder „0“ (für den Wert 0) oder aber der Breakpoint-Identifier angeben („xs“, „sm“, …).

Hier die zugehörige Sass-Anweisungen zur besseren Erläuterung:

Listing 3: _utilities-spacing.scss

Sass statt Less

Während Bootstrap 3 noch Less als hauptsächlichen CSS-Präprozessor unterstützte (und ein Sass Port erst nach dem Release von 3.0 auf den markt kam), wurde dies in Bootstrap 4 zugunsten von Sass aufgegeben.

Die Gründe hierfür liegen auf der Hand: Einerseits konnte die Zeit für die Kompilierung dank libSass deutlich reduziert werden und zudem ist die Entwicklergemeinde rund um Sass deutlich größer und aktiver, sodaß zu erwarten ist, dass sich dies positiv auf das Projekt auswirken wird.

Überarbeitetes Grid

Das Grid-System wurde generalüberholt. Die Syntax wurde zwar nahezu beibehalten, intern werden aber jetzt beispielsweise für die Berechnung der Schriftgrößen „rem“ (und nicht mehr „em“) verwendet. Damit ist nun responsive Typographie ernsthaft möglich.

Zusätzlich wurde ein Breakpoint für besonders schmale Displays eingeführt (per Konfiguration unter 480px). Dieser hat nun den Grid-Identifier „xs“ erhalten, alle weiteren („sm“, „md“, „lg“, „xl“) sind daher entsprechend „breiter“ als früher.
Weiterhin gibt es neue Mixins, um schnell Breakpoints zu erzeugen:

Listing 3: Mixins

Flex Box

Obwohl der von Bootstrap 4 unterstützte Internet Explorer 9 Flex Box noch nicht unterstützt, wurden dennoch eine optionale Unterstützung dafür eingebaut. Diese muss allerdings in den Settings mit $enable-flex: true !default; eingeschaltet werden.

Ist die Flexbox-Unterstützung eingeschaltet, werden folgende Änderungen vorgenommen:

  • Das gesamte Gridsystem wird von float auf display: flex; umgestellt
  • Input-Gruppen werden von display: table; auf display: flex; umgestellt
  • Die Media-Komponenten werden ebenfalls von display: table; auf display: flex; umgestellt

Neue Reset-Komponente

Bisher verwendete Bootstrap zum Reset Normalize.css (https://necolas.github.io/normalize.css). Diese wurde nun durch die Eigenentwicklung Reboot.css ersetzt, die auf Normalize basiert, aber nun deutlich eleganter und optimierter. Infos hierzu gibt es unter: http://v4-alpha.getbootstrap.com/content/reboot/.

Card Komponente

Die Komponenten „Panels“, „Wells“ und „Thumbnails“ wurden zugunsten der neuen Komponente „Card“ aufgegeben. Diese konsoldieren die bisherigen Features, sind aber deutlich flexibler.
Schauen wir uns zunächst eine Card an, die möglichst viele Features beinhaltet:
Listing 4: Card – Alle Optionen

Hier kann man gut den strukturellen Aufbau einer Card erkennen – hier eine Auflistung der möglichen Klassen:

  • card
    Container, der die Card beinhaltet
  • card-header / card-footer
    Header und Footer
  • card-block
    Abschnitt in der Card
  • card-text
    Text auf der Card
  • card-img-top / card-img-bottom
    Bild oben bzw. unten
  • card-link
    Auszeichnung für Links
  • card-title / card-subtitle
    Titel und Untertitel

bootstrap4_lobacher_03

Die Komponente ist aber noch deutlich leistungsfähiger. So kann man beispielsweise die Card selbst invertieren und einfärben:
Listing 5: Card – Invertiert und eingefärbt

Verwendet man die Klasse card-primary, erhält man eine blaue Card. Weitere mögliche Klassen an dieser Stelle sind: card-success (grün), card-info (hellblau), card-warning (gelb) und card-danger (rot).

bootstrap4_lobacher_04

Will man mehrere Cards nebeneinander anordnen, so kann man entweder „Card Groups“ (dann gehören die Cards direkt zusammen) oder aber „Card Decks“ (dann werden die Cards individuell behandelt) verwenden:
Listing 6: Card Decks

 

bootstrap4_lobacher_05

Will man zudem Masonry-Style Card Columns (http://masonry.desandro.com) aufbauen, verwendet man schlicht <div class=“card-columns“> aussenherum.

Und schließlich kann man ein Bild auch als Hintergrund verwenden und den Text darüber legen:
Listing 7: Card mit Hintergrundbild

bootstrap4_lobacher_06

Tabellen

In Bootstrap 4 ist es nun möglich, Tabellen sehr einfach zu invertieren – hierzu ist lediglich die Klasse table-inverse notwendig:
Listing 8: Inverse Tabellen

bootstrap4_lobacher_07

Zudem gibt es nun sogenannte Reflow-Tables (hier heisst die Klasse .table-reflow). Damit werden die Spalten und Zeilen vertauscht.
Weiterhin gibt es die folgenden kontextabhängigen Klassen: .table-active, .table-success, .table-info, .table-warning und .table-danger. Damit ist es möglich die Tabelle, Zeilen oder Felder einzufärben.
Schließlich wurden Klassen eingeführt, um den Header zu invertieren (.thead-inverse) und einzufärben (.thead-default).

Eigene Formularelemente

Bootstrap 4 enthält sogenannte „Custom Forms“, mit denen komplett eigene Formular-Elemente erzeugt werden, die einerseits in allen Browsern gleich aussehen sollen und zudem deutlich flexibler im Styling sind. Die originalen Formularelemente werden ausgeblendet:
Listing 9: Eigene Formular-Elemente

bootstrap4_lobacher_08

Fazit

Bootstrap hat seine Hausaufgaben gemacht und das ohnehin schon sehr gute Framework deutlich überarbeitet und modernisiert. Vor allem die Card-Komponente, aber auch die anderen Bestandteile und Änderungen sind gelungen und machen richtig Spaß in der Anwendung.

Links zum Thema

Bootstrap 4 alpha Dokumentation
http://v4-alpha.getbootstrap.com/getting-started/introduction/

Card-Demo Codepen
http://codepen.io/alexdevero/pen/JYpMEO

Unterschiede Bootstrap 3 und 4
http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

Bootstrap 4 Tutorials
http://www.quackit.com/bootstrap/bootstrap_4/tutorial/

Bootstrap 4 Video-Tutorials
https://www.youtube.com/watch?v=buzksTcGxZo

Leave a Comment.