Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung & Quiz: Fortgeschrittene Bootstrap-Funktionen Beherrschen | Fortgeschrittene Konzepte
Bootstrap-Grundlagen für Moderne Websites

bookHerausforderung & Quiz: Fortgeschrittene Bootstrap-Funktionen Beherrschen

Aufgabe: Erstellen eines Bootstrap-Modals

Erstellen einer Bootstrap-Modal-Komponente, die Produktdetails anzeigt. Die im Anfangscode bereitgestellten Schritte befolgen, um die fehlenden Bootstrap-Klassen zu ergänzen und die Modal-Struktur zu vervollständigen.

  • Schritt 1: Modal-Struktur erstellen.
    • Die Klasse modal auf den äußersten Container anwenden;
    • Die Klasse modal-dialog für das Dialogfeld verwenden;
    • Die Klasse modal-content für den Inhaltsbereich hinzufügen;
    • Sicherstellen, dass das Modal vertikal im Ansichtsfenster zentriert ist, indem die Klasse modal-dialog-centered auf den modal-dialog-Container angewendet wird;
    • Die Klasse modal-title für das Titel-Element (<h5>) verwenden;
    • Die Klasse btn-close auf die Schaltfläche zum Schließen im Modal-Header anwenden.
  • Schritt 2: Produktdetails hinzufügen.
    • Das Produktbild im Modal-Body einfügen und sicherstellen, dass es mit der Klasse img-fluid korrekt skaliert wird;
    • Den Produkttitel mit einem geeigneten Überschriften-Tag (<h6>) anzeigen und die Klasse modal-title anwenden;
    • Eine kurze Produktbeschreibung mit einem Absatz-Element (<p>) bereitstellen und die Klasse modal-text anwenden.
index.html

index.html

copy
  1. Die Modal-Komponentenklassen von Bootstrap verwenden, um die Modal-Struktur zu erstellen:
    • Die Klasse modal für den äußersten Container verwenden;
    • Die Klasse modal-dialog für das Dialogfeld verwenden;
    • Die Klasse modal-content für den Inhaltsbereich verwenden.
  2. Das Modal vertikal im Ansichtsfenster zentrieren, indem die Klasse modal-dialog-centered auf den modal-dialog-Container angewendet wird.
  3. Sicherstellen, dass der Modaltitel korrekt formatiert ist, indem die Klasse modal-title auf das Titel-Element (<h5>) angewendet wird.
  4. Die Klasse btn-close für die Schaltfläche zum Schließen im Modal-Header verwenden, um ein einheitliches Design und Funktionalität zu gewährleisten.
  5. Die Modalgröße anpassen, indem eine der Größenklassen (modal-lg, modal-xl, etc.) auf den modal-dialog-Container angewendet wird.
index.html

index.html

copy

1. Was ist der Hauptzweck von Bootstraps Navbars?

2. Welche Klasse sollte verwendet werden, um eine grundlegende Navbar-Struktur zu erstellen?

3. Welche Klasse sollte auf Bilder angewendet werden, um sie responsiv zu machen?

4. Welche zusätzlichen Klassen können verwendet werden, um Bilder als Thumbnails zu gestalten?

5. Welcher Bootstrap-Komponente eignet sich zur strukturierten Darstellung von Artikeln, Benutzerprofilen und Produkten?

6. Welcher Bootstrap-Komponente wird verwendet, um interaktive Bild-Slider zu erstellen?

7. Welche Klasse sollte auf das Containerelement eines Karussells angewendet werden?

question mark

Was ist der Hauptzweck von Bootstraps Navbars?

Select the correct answer

question mark

Welche Klasse sollte verwendet werden, um eine grundlegende Navbar-Struktur zu erstellen?

Select the correct answer

question mark

Welche Klasse sollte auf Bilder angewendet werden, um sie responsiv zu machen?

Select the correct answer

question mark

Welche zusätzlichen Klassen können verwendet werden, um Bilder als Thumbnails zu gestalten?

Select the correct answer

question mark

Welcher Bootstrap-Komponente eignet sich zur strukturierten Darstellung von Artikeln, Benutzerprofilen und Produkten?

Select the correct answer

question mark

Welcher Bootstrap-Komponente wird verwendet, um interaktive Bild-Slider zu erstellen?

Select the correct answer

question mark

Welche Klasse sollte auf das Containerelement eines Karussells angewendet werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Suggested prompts:

Can you provide an example of the complete modal HTML structure?

What are the required Bootstrap CSS and JS files to include for the modal to work?

How do I trigger the modal to open and close?

Awesome!

Completion rate improved to 3.23

bookHerausforderung & Quiz: Fortgeschrittene Bootstrap-Funktionen Beherrschen

Swipe um das Menü anzuzeigen

Aufgabe: Erstellen eines Bootstrap-Modals

Erstellen einer Bootstrap-Modal-Komponente, die Produktdetails anzeigt. Die im Anfangscode bereitgestellten Schritte befolgen, um die fehlenden Bootstrap-Klassen zu ergänzen und die Modal-Struktur zu vervollständigen.

  • Schritt 1: Modal-Struktur erstellen.
    • Die Klasse modal auf den äußersten Container anwenden;
    • Die Klasse modal-dialog für das Dialogfeld verwenden;
    • Die Klasse modal-content für den Inhaltsbereich hinzufügen;
    • Sicherstellen, dass das Modal vertikal im Ansichtsfenster zentriert ist, indem die Klasse modal-dialog-centered auf den modal-dialog-Container angewendet wird;
    • Die Klasse modal-title für das Titel-Element (<h5>) verwenden;
    • Die Klasse btn-close auf die Schaltfläche zum Schließen im Modal-Header anwenden.
  • Schritt 2: Produktdetails hinzufügen.
    • Das Produktbild im Modal-Body einfügen und sicherstellen, dass es mit der Klasse img-fluid korrekt skaliert wird;
    • Den Produkttitel mit einem geeigneten Überschriften-Tag (<h6>) anzeigen und die Klasse modal-title anwenden;
    • Eine kurze Produktbeschreibung mit einem Absatz-Element (<p>) bereitstellen und die Klasse modal-text anwenden.
index.html

index.html

copy
  1. Die Modal-Komponentenklassen von Bootstrap verwenden, um die Modal-Struktur zu erstellen:
    • Die Klasse modal für den äußersten Container verwenden;
    • Die Klasse modal-dialog für das Dialogfeld verwenden;
    • Die Klasse modal-content für den Inhaltsbereich verwenden.
  2. Das Modal vertikal im Ansichtsfenster zentrieren, indem die Klasse modal-dialog-centered auf den modal-dialog-Container angewendet wird.
  3. Sicherstellen, dass der Modaltitel korrekt formatiert ist, indem die Klasse modal-title auf das Titel-Element (<h5>) angewendet wird.
  4. Die Klasse btn-close für die Schaltfläche zum Schließen im Modal-Header verwenden, um ein einheitliches Design und Funktionalität zu gewährleisten.
  5. Die Modalgröße anpassen, indem eine der Größenklassen (modal-lg, modal-xl, etc.) auf den modal-dialog-Container angewendet wird.
index.html

index.html

copy

1. Was ist der Hauptzweck von Bootstraps Navbars?

2. Welche Klasse sollte verwendet werden, um eine grundlegende Navbar-Struktur zu erstellen?

3. Welche Klasse sollte auf Bilder angewendet werden, um sie responsiv zu machen?

4. Welche zusätzlichen Klassen können verwendet werden, um Bilder als Thumbnails zu gestalten?

5. Welcher Bootstrap-Komponente eignet sich zur strukturierten Darstellung von Artikeln, Benutzerprofilen und Produkten?

6. Welcher Bootstrap-Komponente wird verwendet, um interaktive Bild-Slider zu erstellen?

7. Welche Klasse sollte auf das Containerelement eines Karussells angewendet werden?

question mark

Was ist der Hauptzweck von Bootstraps Navbars?

Select the correct answer

question mark

Welche Klasse sollte verwendet werden, um eine grundlegende Navbar-Struktur zu erstellen?

Select the correct answer

question mark

Welche Klasse sollte auf Bilder angewendet werden, um sie responsiv zu machen?

Select the correct answer

question mark

Welche zusätzlichen Klassen können verwendet werden, um Bilder als Thumbnails zu gestalten?

Select the correct answer

question mark

Welcher Bootstrap-Komponente eignet sich zur strukturierten Darstellung von Artikeln, Benutzerprofilen und Produkten?

Select the correct answer

question mark

Welcher Bootstrap-Komponente wird verwendet, um interaktive Bild-Slider zu erstellen?

Select the correct answer

question mark

Welche Klasse sollte auf das Containerelement eines Karussells angewendet werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 6
some-alt