Responsive image

Download Bootstrap

Bootstrap kann man auf 2 Arten installieren. Zum einen kann man alle Dateien lokal auf dem Computer speichern oder man kann die Dokumente auf der Online Datenbank benutzen.

Um die Bootstrap Dateien, die lokal gespeichert sind, einzubinden, muss man den Dateipfad in einem link Element eingeben. Das kann so aussehen:-link href="bootstrap.min.css" rel="stylesheet"-

Um die Dateien auf der Online Datenbank zu nutzen, muss man den Link dieser Seite angeben. Das wird so aussehen:-link href="https://getbootstrap.com/docs/4.1/examples/carousel/carousel.css" rel="stylesheet"-

Grid-System

Das Grid-system bei Bootstrap hat insgesamt 12 Spalten. Dies ist eine statische Nummer die sich nie verändert.

Um das Grid jetzt fertig zu erstellen, kann man immer zuerst eine row erstellen: -div class="row"- In dieser Row kann man nun die 12 Spalten unterteilen. Falls man x Spalten zusammenfügen will, kann man angeben: -div class="col-x"-.
Die gesamte Anzahl der x muss schlussendlich einfach weniger als 12 sein. Um eine neue row zu starten kann man einfach wieder eingeben: -div class="row"-

Responsive image
Responsive image

Komponenten anwenden

Um verschiedene Komponenten zu finden, braucht man einfach den Namen der Komponenten z.B. Karusell. Diesen Namen muss man mit dem Begriff bootstrap googeln. Somit kommt man auf die offizielle Bootstrap page. Da wird die Komponente ganz genau beschrieben und alle benötigten Klassen und Skripts angegeben.