Andreas Weigel Selbstständig

Nach der langen Entwicklungszeit von Bootstrap 4 kann sich das Ergebnis wirklich sehen lassen. Gab es in der Vorgängerversion mit Panels, Wells und Thumbnails noch drei verschiedene Komponenten, um Inhaltsboxen strukturiert darzustellen, wurde durch die Einführung der Card-Komponente eine flexible Lösung geschaffen, die die Coderedundanz verringert.

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 CSSVorlagen 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 CSSCode zu vermeiden. Weitere Informationen zu Sass gibt es online.

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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin Spezial Vol. 15: JavaScript - "JavaScript"

Alle Infos zum Heft
579832677Bootstrap 4 leicht gemacht
X
- Gib Deinen Standort ein -
- or -