Bootstrap Anleitung für Schüler
Hier lernst du, wie du eine einfache Navbar, Karten und ein Karussell mit Bootstrap erstellst. Folge den Anweisungen und baue die Elemente Schritt für Schritt nach.
Vorbereitungen
- HTML-Datei erstellen: Öffne einen Texteditor (z. B. Visual Studio Code), erstelle eine neue Datei und speichere sie als
index.html. - Bootstrap hinzufügen: Füge diesen Link in den
<head>-Bereich deiner HTML-Datei ein, um Bootstrap zu nutzen:<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">.
1. Container und Grid-System
Verwende einen container, um den Inhalt zentriert anzuordnen. Nutze row und col, um Elemente in Zeilen und Spalten aufzuteilen. Dies hilft, das Layout für verschiedene Bildschirmgrößen flexibel zu gestalten.
2. Abstände: Padding und Margin
Bootstrap-Klassen wie p (Padding) und m (Margin) steuern die Abstände innerhalb und außerhalb von Elementen. Zahlen von 0-5 ändern die Abstandsstärke:
p-3: Padding rund um das Element.py-4: Padding oben und unten.m-2: Margin rund um das Element.mb-4: Margin nur unten.
3. Responsive Spaltenbreiten
col-md-4 zeigt, dass das Element ab mittleren Bildschirmen (ab 768px) ein Drittel der Zeile (also 4 von 12 Spalten) einnimmt. Dies sorgt für ein responsives Layout.
4. Erstelle die Navbar
Die Navbar ist eine Navigationsleiste oben auf der Seite. Hier ist ein Beispiel für eine einfache Navbar:
5. Erstelle Karten (Cards)
Karten sind Boxen, die Text, Bilder und Buttons enthalten. Sie sind praktisch für die Anzeige von Informationen:
6. Erstelle ein Karussell (Carousel)
Ein Karussell ist eine Slideshow-Komponente. Sie zeigt mehrere Bilder oder Inhalte als Folien an: