Défi & Quiz

Tâche : Créer une fenêtre modale Bootstrap

Créez un composant de fenêtre modale Bootstrap qui affiche les détails du produit. Suivez les étapes fournies dans le code initial pour remplir les classes Bootstrap manquantes et compléter la structure de la modale.

Étape 1 : Créer la structure de la modale.
- Appliquez la classe modal au conteneur le plus externe ;
- Utilisez la classe modal-dialog pour la boîte de dialogue ;
- Ajoutez la classe modal-content pour la zone de contenu ;
- Assurez-vous que la modale est centrée verticalement dans la fenêtre en appliquant la classe modal-dialog-centered au conteneur modal-dialog ;
- Utilisez la classe modal-title pour l'élément de titre (<h5>);
- Appliquez la classe btn-close au bouton de fermeture dans l'en-tête de la modale.
Étape 2 : Ajouter les détails du produit.
- Insérez l'image du produit dans le corps de la modale et assurez-vous qu'elle s'adapte correctement en utilisant la classe img-fluid ;
- Affichez le titre du produit en utilisant une balise de titre appropriée (<h6>) et appliquez la classe modal-title ;
- Fournissez une brève description du produit en utilisant un élément de paragraphe (<p>) et appliquez la classe modal-text.

index.html

Utilisez les classes de composant modal de Bootstrap pour créer la structure du modal :
- Utilisez la classe modal pour le conteneur le plus externe ;
- Utilisez la classe modal-dialog pour la boîte de dialogue ;
- Utilisez la classe modal-content pour la zone de contenu.
Centrez le modal verticalement dans la fenêtre d'affichage en appliquant la classe modal-dialog-centered au conteneur modal-dialog.
Assurez-vous que le titre du modal est correctement stylé en appliquant la classe modal-title à l'élément titre (<h5>).
Utilisez la classe btn-close pour le bouton de fermeture dans l'en-tête du modal afin d'assurer un style et une fonctionnalité cohérents.
Personnalisez la taille du modal en appliquant l'une des classes de taille (modal-lg, modal-xl, etc.) au conteneur modal-dialog.

index.html

1. Quel est le but principal des barres de navigation de Bootstrap ?

2. Quelle classe doit être utilisée pour créer une structure de barre de navigation de base ?

3. Quelle classe doit être appliquée aux images pour les rendre réactives ?

4. Quelles classes supplémentaires peuvent être utilisées pour styliser les images en tant que vignettes ?

5. Quel composant Bootstrap est adapté pour présenter des articles, des profils d'utilisateurs et des produits de manière structurée ?

6. Quel composant Bootstrap est utilisé pour créer des curseurs d'images interactifs ?

7. Quelle classe doit être appliquée à l'élément conteneur d'un carrousel ?

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 6