© MADSOLAR/Shutterstock.com
Einführung in Bootstrap 4

Bootstrap 4 leicht gemacht


Bootstrap 4 ist da und hat so einiges gegenüber der Vorgängerversion verändert. Was ist neu und wie arbeitet man mit der neuen Version? Dieser Artikel gibt eine praktische Einführung in die verschiedenen Funktionen von Bootstrap 4 und einen Überblick über die Änderungen.

Bootstrap ist ein Frontend-Framework, mit dem man Websites gestalten kann. Es werden HTML- und CSS-Vorlagen bereitgestellt, um unterschiedlichste Websiteelemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation und ein Grid-System für Layouts. Darüber hinaus ist es in Bootstrap durch JavaScript-Module möglich, Interaktionen (z. B. eine Bilder-Slideshow, Tabs und Dialogboxen) in die Website einzubinden. Zudem bietet das Framework alle Voraussetzungen, um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden.

Was ist Bootstrap?

Bootstrap wurde 2010 von Twitter unter dem Namen „Twitter Bootstrap“ entwickelt. Das Ziel war, eine einheitliche Bibliothek für die Gestaltung von Weboberflächen zu schaffen. Das Problem lag zu diesem Zeitpunkt darin, dass für die Designentwicklung bei Twitter viele verschiedene Bibliotheken verwendet wurden. Das führte zu Inkonsistenzen und einem großen Wartungsaufwand. Bootstrap sollte eine gemeinsame Basis schaffen, mit der alle Mitarbeiter arbeiten konnten, um schnell und einfach Websites zu gestalten.

Das Bootstrap-Framework besteht im einfachsten Fall aus einer CSS-Datei (bootstrap.min.css) und einer JavaScript-Datei (bootstrap.min.js). Viele Designelemente können in Bootstrap mit reinen CSS-Regeln umgesetzt werden. Für andere Komponenten, z. B. Dialogboxen, wird JavaScript benötigt.

Bootstrap basiert auf der Stylesheetsprache Sass, die einer Obermenge von CSS entspricht. Jeder CSS-Befehl ist auch ein gültiger Sass-Befehl. Mit Sass lassen sich jedoch noch weitere Programmierparadigmen umsetzen, z. B. Variablen, Schachtelungen von Regeln sowie Funktionen und Operatoren, die mit CSS nicht möglich sind. Das alles dient dazu, Codewiederholungen im CSS-Code zu vermeiden. Weitere Informationen zu Sass gibt es online [1].

Im Normalfall müssen die Sass-Dateien von Bootstrap nicht angepasst werden, da man einfach mit der fertigen bootstrap.min.css-Datei arbeitet. Möchte man aber grundlegende Anpassungen im Design vornehmen und z. B. die Rasterbreite einstellen, ist es sinnvoll, direkt die Bootstrap-Sass-Dateien zu bearbeiten.

Bootstrap besteht aus einzelnen Komponenten, die in eine Website eingefügt werden können. Dabei handelt es sich um HTML-Codes, die mit CSS-Klassen und ggf. JavaScript-Code ausgestattet sind. Bootstrap 4 ist modular aufgebaut und wird in folgende vier Bereiche gegliedert:

  • Layout

  • Inhalt

  • Komponenten

  • Werkzeuge

Layout

Das Herzstück von Bootstrap 4 ist das Raster (Abb. 1). Standardmäßig verwendet Bootstrap ein 12-spaltiges Rasterlayout mit einer Breite von 1 140 Pixel (.container). Dabei wird die Rasterbreite entsprechend der Displaygröße via CSS-Breakpoints angepasst. Eine Alternative bietet die Klasse .container-fluid, die den Container immer über die komplette Displaygröße darstellt.

weigel_bootstrap_1.tif_fmt1.jpgAbb. 1: Das Raster

Ein Raster besteht aus Zeilen (.row) und Spalten (.col), wobei die Spalten mithilfe von CSS-Klassen passend für das jeweilige Endgerät angeordnet werden können. In Tabelle 1 sind die verschiedenen CSS-Präfix-Klassen für das Bootstrap-Raster dargestellt, wobei XX einem Wert zwischen 1 und 12 entspricht. Das HTML für ein einfaches zweispaltiges Layout mit Sidebar sieht wie folgt aus:

<div class="container"> <div class="row"> <div class="col-md-2">Sidebar</div> <div class="col-md-10">Inhalt</div> </div> </div>

Normalerweise sind alle Rasterspalten in Bootstrap gleich groß. Durch Weglassen der Spaltenbreite (XX-Angabe) lassen sich jedoch Layouts mit unterschiedlich breiten Spalten darstellen:

<div class="container"> <div class="row"> <div class="col">Sidebar 1 (.col)</div> <div class="col-7">Inhalt (.col-3)</div> <div class="col">Sidebar 2 (.col)</div> </div> </div>

Neben den in Tabelle 1 dargestellten responsiven Klassen existieren in Bootstrap noch weitere Regeln, um das Raster anzupassen. So ist es möglich, mithilfe der Klasse .w-100 einen Spaltenumbruch zu erzwingen. Ebenso ist eine Vermischung von Klassen möglich. Auf diese Weise kann z. B. eine Sidebar, die auf dem Desktop-PC nur 20 Prozent der Breite einnimmt, auf dem Smartphone die Hälfte des Displays abdecken.

Displaygröße

Sehr klein

Klein

Mittel

Groß

Sehr groß

Smartphone

(Hochformat)

Smartphone (Querformat)

Tablet

Desktop-PC

Desktop-PC

CSS-Präfix

.col-XX

.col-sm-XX

.col-md-XX

.col-lg-XX

.col-xl-XX

Tabelle 1: Rasterklassen in Bootstrap

Eine Neuerung in Bootstrap 4 ist die Möglichkeit der horizontalen und vertikalen Anordnung von Zeilen und Spalten innerhalb des Rasters. Dies wird in Listing 1 veranschaulicht.

Listing 1: Horizontale und vertikale Anordnung von Zeilen und Spalten

<style type="text/css">  /*nur fuer Beispiel, um Hoehe des Containers zu simulieren*/ .test { height:10em; } </style> <div class="container"> <div class="row"> <div class="col"> <h1>Vertikale Ausrichtung (Zeile)</h1> </div> </div> <div class="row align-items-center test"> <div class="col">Sidebar 1 (.col)</div> <div class="col-7">Inhalt (.col-3)</div> <div class="col">Sidebar 2 (.col)</div> </div> <div class="row"> <div class="col"> <h1>Vertikale Ausrichtung (Spalte)</h1> </div> </div> <div class="row test"> <div class="col align-self-start">.col (oben)</div> <div class="col align-self-center">.col (mittig)</div> <div class="col align-self-end">.col (unten)</div> </div> <div class="row"> <div class="col"> <h1>Horizontale Ausrichtung (Zeile)</h1> </div> </div> <div class="row justify-content-start"> <div class="col-2">.col-2 (links)</div> </div> <div class="row justify-content-center"> <div class="col-2">.col-2 (mittig)</div> </div> <div class="row justify-content-end"> <div class="col-2">.col-2 (rechts)</div> </div> <div class="row justify-content-around"> <div class="col-2">.col-2 (ringsherum)</div> <div class="col-2">.col-2 (ringsherum)</div> </div> <div class="row justify-content-between"> <div class="col-2">.col-2 (dazwischen)</div> <div class="col-2">.col-2 (dazwischen)</div> </div> </div>

Alle Besonderheiten des Bootstrap-Rasters in diesem Artikel zu erläutern, würde den Rahmen sprengen. Jedoch stellen folgende Aufgaben beim Layoutentwurf kein Problem dar:

  • Spaltenzwischenräume entfernen (.no-gutters)

  • Spaltenreihenfolge anpassen (.order-XX, .order-first, .order-last)

  • Versatz zwischen Spalten einfügen (z. B. .offset-md-4)

  • Verschachtelungen von Rastern (neue .row einfügen)

Inhalte einfügen

Nun kommen wir zu den Möglichkeiten der Anpassung des Websiteinhalts. Wir konzentrieren uns auf die interessanteren Dinge, z. B. Bilder mit Bildunterschriften sowie Tabellen und deren Umsetzung mit Bootstrap 4.

Von einer gut gemachten Website sind Bilder nicht mehr wegzudenken. Oftmals besteht das Problem darin, dass Bilder nur auf großen Displays wie denen von Desktop-PCs optimal angezeigt werden. Auf kleineren Bildschirmen erscheinen sie dann zu groß, zu klein oder wer...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang