Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:bootstrap

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.

css/bootstrap.txt · Zuletzt geändert: 2020/04/20 22:55 von webproducer