Kursinhalt
Bootstrap-Grundlagen für Moderne Websites
Bootstrap-Grundlagen für Moderne Websites
1. Verständnis von Bootstrap
2. Einrichtung der Umgebung
4. Fortgeschrittene Konzepte
Herausforderung & Quiz
Aufgabe: Verbesserung der Portfolio-Präsentation mit Bootstrap-Klassen
- Schritt 1: Fügen Sie die entsprechende Klasse zum bereitgestellten
div-Element hinzu, um einen globalen Container zu erstellen. - Schritt 2: Fügen Sie die entsprechende Klasse zum bereitgestellten
div-Element hinzu, um eine Zeile innerhalb des Containers zu erstellen. - Schritt 3: Fügen Sie die entsprechenden Klassen zu den bereitgestellten
div-Elementen hinzu, um Spalten für jedes Portfolio-Element zu erstellen. Stellen Sie sicher, dass die Spalten responsiv sind und ihre Breite entsprechend anpassen. (Bitte denken Sie daran, dass es in diesem Schritt dreidiv-Elemente gibt.). - Schritt 4: Gestalten Sie die Titel der Portfolio-Elemente, indem Sie den gegebenen
h2-Elementen entsprechende Klassen hinzufügen. Zentrieren Sie die Titel innerhalb ihrer jeweiligen Spalten. - Schritt 5: Machen Sie die Beschreibungen der Portfolio-Elemente lesbar und angemessen groß, indem Sie geeignete Klassen zu den bereitgestellten
p-Elementen hinzufügen. Setzen Sie die Schriftgröße auffs-6.
index.html
index.css
Nutzen Sie das Rastersystem von Bootstrap (container, row, col), um ein responsives Layout für die Portfolio-Präsentation zu erstellen. Wenden Sie Typografie-Klassen (text-center, h2, fs-6) an, um die Titel und Beschreibungen der Portfolio-Elemente angemessen zu gestalten.
index.html
index.css
1. In wie viele Spalten teilt das Rastersystem von Bootstrap die Seite?
2. Welche Klasse umschließt und zentriert den Inhalt innerhalb eines Containers mit fester Breite?
3. Welche Klassen werden verwendet, um eine horizontale Gruppe von Spalten im Rastersystem zu erstellen?
4. Was repräsentieren die Klassen sm, md, lg und xl?
5. Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu stylen?
6. Welche Klassen werden verwendet, um Textelemente auszurichten?
7. Welche Klasse wird verwendet, um Schaltflächen vertikal zu stapeln?
8. Welche Klasse wird auf Checkbox- und Radiobutton-Eingaben innerhalb eines form-check Containers angewendet, um ein konsistentes Styling zu gewährleisten?
9. Wie trägt das Rastersystem von Bootstrap zur Organisation des Formularlayouts bei?
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 8
