© MADSOLAR/Shutterstock.com
JavaScript Kompendium
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.

Andreas Weigel


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 Das Herzstück von Bootstrap 4...

JavaScript Kompendium
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.

Andreas Weigel


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 Das Herzstück von Bootstrap 4...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang