Herausforderung & Quiz: Grundlegende Bootstrap-Konzepte Anwenden

Aufgabe: Portfolio-Präsentation mit Bootstrap-Klassen verbessern

Schritt 1: Die passende Klasse zum bereitgestellten div-Element hinzufügen, um einen globalen Container zu erstellen.
Schritt 2: Die passende Klasse zum bereitgestellten div-Element hinzufügen, um eine Zeile innerhalb des Containers zu erstellen.
Schritt 3: Die passenden Klassen zu den bereitgestellten div-Elementen hinzufügen, um Spalten für jedes Portfolio-Element zu erstellen. Sicherstellen, dass die Spalten responsiv sind und ihre Breite entsprechend anpassen. (Bitte beachten, dass es in diesem Schritt drei div-Elemente gibt.)
Schritt 4: Die Titel der Portfolio-Elemente durch Hinzufügen geeigneter Klassen zu den angegebenen h2-Elementen gestalten. Die Titel innerhalb ihrer jeweiligen Spalten zentrieren.
Schritt 5: Die Beschreibungen der Portfolio-Elemente durch Hinzufügen geeigneter Klassen zu den bereitgestellten p-Elementen lesbar und angemessen groß machen. Die Schriftgröße auf fs-6 setzen.

index.html

index.css

Das Grid-System von Bootstrap (container, row, col) verwenden, um ein responsives Layout für die Portfolio-Präsentation zu erstellen. Typografie-Klassen (text-center, h2, fs-6) anwenden, um die Titel und Beschreibungen der Portfolio-Elemente passend zu gestalten.

index.html

index.css

1. In wie viele Spalten unterteilt das Grid-System 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 stellen die Klassen `sm`, `md`, `lg` und `xl` dar?

5. Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

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 einheitliches Styling zu gewährleisten?

9. Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

In wie viele Spalten unterteilt das Grid-System von Bootstrap die Seite?

Select the correct answer

Welche Klasse umschließt und zentriert den Inhalt innerhalb eines Containers mit fester Breite?

Select the correct answer

container-fluid

container-fixed

container

container-centered

Welche Klassen werden verwendet, um eine horizontale Gruppe von Spalten im Rastersystem zu erstellen?

Select the correct answer

row-group

row

col

col-row

Was stellen die Klassen sm, md, lg und xl dar?

Select the correct answer

Schriftgrößen.

Farben.

Bildschirmgrößen.

Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

Select the correct answer

font-size-*

heading-size-*

fs-*

h-*

Welche Klassen werden verwendet, um Textelemente auszurichten?

Select the correct answer

text-align

text-center

text-align-center

text-center-align

Welche Klasse wird verwendet, um Schaltflächen vertikal zu stapeln?

Select the correct answer

btn-stack

btn-group-vertical

btn-group-stack

Welche Klasse wird auf Checkbox- und Radiobutton-Eingaben innerhalb eines form-check Containers angewendet, um ein einheitliches Styling zu gewährleisten?

Select the correct answer

input-control

form-control

form-check-input

check-input

Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

Select the correct answer

Durch das automatische Anpassen von Formularelementen basierend auf Bildschirmgrößen.

Durch die Möglichkeit für Entwickler, Schriftgrößen für Formularelemente festzulegen.

Durch die Bereitstellung einer Reihe vordefinierter Formularlayouts.

Durch die Ermöglichung der Erstellung von mehrspaltigen Layouts mithilfe von Rasterklassen.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 8

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.23

Herausforderung & Quiz: Grundlegende Bootstrap-Konzepte Anwenden

Swipe um das Menü anzuzeigen

Aufgabe: Portfolio-Präsentation mit Bootstrap-Klassen verbessern

Schritt 1: Die passende Klasse zum bereitgestellten div-Element hinzufügen, um einen globalen Container zu erstellen.
Schritt 2: Die passende Klasse zum bereitgestellten div-Element hinzufügen, um eine Zeile innerhalb des Containers zu erstellen.
Schritt 3: Die passenden Klassen zu den bereitgestellten div-Elementen hinzufügen, um Spalten für jedes Portfolio-Element zu erstellen. Sicherstellen, dass die Spalten responsiv sind und ihre Breite entsprechend anpassen. (Bitte beachten, dass es in diesem Schritt drei div-Elemente gibt.)
Schritt 4: Die Titel der Portfolio-Elemente durch Hinzufügen geeigneter Klassen zu den angegebenen h2-Elementen gestalten. Die Titel innerhalb ihrer jeweiligen Spalten zentrieren.
Schritt 5: Die Beschreibungen der Portfolio-Elemente durch Hinzufügen geeigneter Klassen zu den bereitgestellten p-Elementen lesbar und angemessen groß machen. Die Schriftgröße auf fs-6 setzen.

index.html

index.css

index.html

index.css

1. In wie viele Spalten unterteilt das Grid-System 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 stellen die Klassen `sm`, `md`, `lg` und `xl` dar?

5. Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

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 einheitliches Styling zu gewährleisten?

9. Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

In wie viele Spalten unterteilt das Grid-System von Bootstrap die Seite?

Select the correct answer

Welche Klasse umschließt und zentriert den Inhalt innerhalb eines Containers mit fester Breite?

Select the correct answer

container-fluid

container-fixed

container

container-centered

Welche Klassen werden verwendet, um eine horizontale Gruppe von Spalten im Rastersystem zu erstellen?

Select the correct answer

row-group

row

col

col-row

Was stellen die Klassen sm, md, lg und xl dar?

Select the correct answer

Schriftgrößen.

Farben.

Bildschirmgrößen.

Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

Select the correct answer

font-size-*

heading-size-*

fs-*

h-*

Welche Klassen werden verwendet, um Textelemente auszurichten?

Select the correct answer

text-align

text-center

text-align-center

text-center-align

Welche Klasse wird verwendet, um Schaltflächen vertikal zu stapeln?

Select the correct answer

btn-stack

btn-group-vertical

btn-group-stack

Welche Klasse wird auf Checkbox- und Radiobutton-Eingaben innerhalb eines form-check Containers angewendet, um ein einheitliches Styling zu gewährleisten?

Select the correct answer

input-control

form-control

form-check-input

check-input

Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

Select the correct answer

Durch das automatische Anpassen von Formularelementen basierend auf Bildschirmgrößen.

Durch die Möglichkeit für Entwickler, Schriftgrößen für Formularelemente festzulegen.

Durch die Bereitstellung einer Reihe vordefinierter Formularlayouts.

Durch die Ermöglichung der Erstellung von mehrspaltigen Layouts mithilfe von Rasterklassen.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 8

Herausforderung & Quiz: Grundlegende Bootstrap-Konzepte Anwenden

Aufgabe: Portfolio-Präsentation mit Bootstrap-Klassen verbessern

1. In wie viele Spalten unterteilt das Grid-System 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 stellen die Klassen sm, md, lg und xl dar?

5. Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

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 einheitliches Styling zu gewährleisten?

9. Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

Awesome!

Herausforderung & Quiz: Grundlegende Bootstrap-Konzepte Anwenden

Aufgabe: Portfolio-Präsentation mit Bootstrap-Klassen verbessern

1. In wie viele Spalten unterteilt das Grid-System 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 stellen die Klassen sm, md, lg und xl dar?

5. Welche Klassen werden verwendet, um Überschriften mit unterschiedlichen Größen zu gestalten?

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 einheitliches Styling zu gewährleisten?

9. Wie trägt das Rastersystem von Bootstrap zur Organisation von Formularlayouts bei?

4. Was stellen die Klassen `sm`, `md`, `lg` und `xl` dar?

8. Welche Klasse wird auf Checkbox- und Radiobutton-Eingaben innerhalb eines `form-check` Containers angewendet, um ein einheitliches Styling zu gewährleisten?

4. Was stellen die Klassen `sm`, `md`, `lg` und `xl` dar?

8. Welche Klasse wird auf Checkbox- und Radiobutton-Eingaben innerhalb eines `form-check` Containers angewendet, um ein einheitliches Styling zu gewährleisten?