Was ist Bootstrap

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

Die Geschichte von Bootstrap

Bootstrap wurde 2010 von Twitter unter dem Namen „Twitter Bootstrap“ entwickelt, mit dem Ziel, eine einheitliche Bibliothek für die Gestaltung von Weboberflächen zu schaffen. Das Problem war damals, 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.

Im August 2011 entschloss sich Twitter dazu, das Bootstrap Framework als Open Source Projekt zu veröffentlichen. Damit war der Siegeszug dieses ausgezeichneten und leicht zu bedienenden Frontend-Frameworks zur Webdesign-Gestaltung nicht mehr aufzuhalten.
Inzwischen liegt Bootstrap in der Version 4 vor.

So funktioniert Bootstrap

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

Bootstrap basiert auf der Stylesheet-Sprache 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, wie z. B. Variablen, Schachtelungen von Regeln sowie Funktionen und Operatoren, die mit CSS nicht möglich sind. Dies alles dient dazu, Codewiederholungen im CSS-Code zu vermeiden. Weitere Informationen zu SASS gibt es auf https://sass-lang.com/.

Im Normalfall müssen die Sass-Dateien von Bootstrap nicht angepasst werden, denn du arbeitest einfach mit der fertigen bootstrap.min.css. Wenn du aber grundlegende Anpassungen im Design vornehmen möchtest (z. B. Rasterbreite einstellen), macht es Sinn, direkt die Bootstrap Sass-Dateien zu bearbeiten.

Bootstrap Layout

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

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.

DisplaygrößeSehr kleinKleinMittelGroßSehr groß
 Smartphone(Hochformat)Smartphone (Querformat)TabletDesktop-PCDesktop-PC
CSS-Präfix.col-XX.col-sm-XX.col-md-XX.col-lg-XX.col-xl-XX

In Abbildung 3 sind die verschiedenen CSS-Präfix-Klassen für das Bootstrap-Raster dargestellt, wobei XX einem Wert zwischen 1 und 12 entspricht.

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

Beispiel 1 Einfaches zweispaltiges Layout mit Sidebar und Inhaltsbereich (bsp 1)

Beispiel 2 Unterschiedliche Spaltenbreiten (bsp 2)

Neben den in Abb. 3 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% der Breite einnimmt, auf dem Smartphone die Hälfte des Displays abdecken.

Eine Neuerung in Bootstrap 4 ist die Möglichkeit der horizontalen und vertikalen Anordnung von Zeilen und Spalten innerhalb des Rasters. Dies wird im nachfolgenden Beispiel-Code veranschaulicht.

Beispiel Horizontale und vertikale Anordnung von Zeilen und Spalten (bsp 3)

Alle Besonderheiten des Bootstrap-Rasters in diesem Artikel zu erläutern, würde den Rahmen sprengen. Jedoch stellen folgende Aufgaben beim Layout-Entwurf 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)

Bootstrap Beispiele

Apart
Firma
Agentur
Yoga
Information

Ihre Webseite in 5 Tagen

Gerne dürfen sie mich anrufen oder mailen um nähere Informationen zu erhalten

Scroll to Top