Wissensarchiv für Entwickler

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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:

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

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:

<code html>
<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>
</code>

----

===== 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.


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

----

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

Die Klassen werden immer in der Reihenfolge "von klein nach groß" definiert.

^ 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 |

----

===== 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

Seiten-Werkzeuge
