Bootstrap (Frontend-CSS-Framework)

Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen (Quelle von diesem Text: Wikipedia).

Einbinden in einer HTML-Seite

Bootstrap benötigt zwingend HTML5. Daher ist es notwendig folgende Deklaration zu verwenden:

<!doctype html>
<html lang="de">
  ...
</html>

Außerdem benötigt Bootstrap jquery und Popper.js.Am einfachsten ist es, Bootstrap über ein CDN (Content Delivery Network) einzubinden. Hierfür muss der Head-Bereich des HTML-Dokuments um eine Zeile für die Styles und drei Zeilen für die Javascript-Dateien ergänzt werden. Hierbei ist die Einhaltung der Reihenfolge wichtig:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Das Grid-System / 12-Spaltensystem

Das äußere Div ist immer ein container. Es können beliebig viele Container in einer Seite angelegt werden. Allerdings dürfen Container nicht in Container verschachtelt werden. Jeder Container muss mindestens eine Reihe „row“ besitzen. In einer „row“ können belieb viele Spalten „col“ enthalten sein. Eine Spalte „col“ kann wiederrum weitere Reihen „row“ enthalten. Die Anzahl der „col“ pro Reihe sollte bei dem 12-Spalten-System die 12 nicht überschreiten.

<div class="container">
	<div class="row">
		<div class="col-x">
	</div>
</div>

Spaltenbreite mit dem Col-Klassen-Präfix (auflösungsabhängige Darstellung)

Die Klassen werden immer in der Reihenfolge „von klein nach groß“ definiert, wobei für die kleinste Auflösung kein Präfix angegeben werden muss.

Pxel	Name	CSS-Klasse	Beispiel
< 576px	Extra small	xs	col-xs-12
>= 576px	Small	sm	col-sm-8
>= 768px	Medium	md	col-md 4
>= 992px	Large	lg	col-lg-3
>= 1200px	Extra large	xl	col-xl-3

Beispiel:

<div class="container">
    <div class="row">
        <div class="d-none d-lg-block col-lg-5">...</div>
        <div class="col-12 col-lg-7">...</div>
    </div>
</div>

In diesem Beispiel werden in den Auflösungen xs, sm und md wird die 1. Spalte mit „d-none“ ausgeblendet und nur die 2. Spalte mit der gesamten Breite „col-12“ angezeigt. In den Auflösungen lg und xl werden beide Spalten angezeigt, wobei die 1. Spalte 5 cols und die 2. Spalte 7. cols einnimmt.

Hier ist zu erkennen, dass nicht alle Auflösungen angegeben werden müssen. Die zwischenliegenden Auflösungen nehmen den Wert der vorher definierten Auflösung an.

Ausrichtung von Spalten

Ausrichtung	CSS-Klasse	Auswirkung	Standardwert
Horizontal	justify-content-start	Richtet den Inhalt einer Reihe linksbündig aus	X
Horizontal	justify-content-center	Zentriert den Inhalt einer Reihe
Horizontal	justify-content-end	Richtet den Inhalt einer Reihe rechtsbündig aus	X
Horizontal	justify-content-around	Jede Spalte hat links und Rechts den gleichen Abstand
Horizontal	justify-content-between	Spalten werden links und rechts gesetzt
Vertikal	align-items-start	Richtet den Inhalt einer Reihe linksbündig aus	X
Vertikal	align-items-center	Zentriert den Inhalt einer Reihe
Vertikal	align-items-end	Richtet den Inhalt einer Reihe rechtsbündig aus	X

Responsive Bilder

Mit der CSS-Klasse „img-fluid“ werden Bilder auflösungsabhängig angepasst.

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis