====== 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: [[https://de.wikipedia.org/wiki/Bootstrap_(Framework)|Wikipedia]]). ---- ===== Einbinden in einer HTML-Seite ===== Bootstrap benötigt zwingend HTML5. Daher ist es notwendig folgende Deklaration zu verwenden: ... 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: ---- ===== 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.
---- ===== 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://
...
...
 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.