Herausforderung & Quiz

Aufgabe: Erstellen eines Bootstrap-Modals

Erstellen Sie eine Bootstrap-Modalfenster-Komponente, die Produktdetails anzeigt. Befolgen Sie die Schritte im Anfangscode, um die fehlenden Bootstrap-Klassen auszufüllen und die Modalstruktur zu vervollständigen.

• Schritt 1: Erstellen Sie die Modalstruktur.
  • Wenden Sie die modal-Klasse auf den äußersten Container an;
  • Verwenden Sie die modal-dialog-Klasse für das Dialogfeld;
  • Fügen Sie die modal-content-Klasse für den Inhaltsbereich hinzu;
  • Stellen Sie sicher, dass das Modal vertikal innerhalb des Ansichtsfensters zentriert ist, indem Sie die modal-dialog-centered-Klasse auf den modal-dialog-Container anwenden;
  • Verwenden Sie die modal-title-Klasse für das Titel-Element (<h5>);
  • Wenden Sie die btn-close-Klasse auf die Schaltfläche zum Schließen im Modal-Header an.
• Schritt 2: Fügen Sie Produktdetails hinzu.
  • Fügen Sie das Produktbild im Modal-Körper ein und stellen Sie sicher, dass es sich mit der img-fluid-Klasse angemessen skaliert;
  • Zeigen Sie den Produkttitel mit einem geeigneten Überschriftstag (<h6>) an und wenden Sie die modal-title-Klasse an;
  • Geben Sie eine kurze Produktbeschreibung mit einem Absatz-Element (<p>) und wenden Sie die modal-text-Klasse an.

1. Verwenden Sie die Modal-Komponentenklassen von Bootstrap, um die Modalstruktur zu erstellen:
   • Verwenden Sie die Klasse modal für den äußersten Container;
   • Verwenden Sie die Klasse modal-dialog für das Dialogfeld;
   • Verwenden Sie die Klasse modal-content für den Inhaltsbereich.
2. Zentrieren Sie das Modal vertikal innerhalb des Ansichtsfensters, indem Sie die Klasse modal-dialog-centered auf den modal-dialog-Container anwenden.
3. Stellen Sie sicher, dass der Modaltitel durch Anwenden der Klasse modal-title auf das Titel-Element (<h5>) angemessen gestaltet ist.
4. Verwenden Sie die Klasse btn-close für die Schaltfläche zum Schließen im Modal-Header, um ein konsistentes Styling und Funktionalität zu gewährleisten.
5. Passen Sie die Modalgröße an, indem Sie eine der Größenklassen (modal-lg, modal-xl, etc.) auf den modal-dialog-Container anwenden.