Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi et Quiz : Maîtriser les Fonctionnalités Avancées de Bootstrap | Concepts Avancés
Essentiels de Bootstrap pour les Sites Web Modernes

bookDéfi et Quiz : Maîtriser les Fonctionnalités Avancées de Bootstrap

Tâche : Création d'une fenêtre modale Bootstrap

Créer un composant de fenêtre modale Bootstrap affichant les détails d'un produit. Suivre les étapes fournies dans le code initial pour compléter les classes Bootstrap manquantes et finaliser la structure de la modale.

  • Étape 1 : Créer la structure de la modale.
    • Appliquer la classe modal au conteneur principal ;
    • Utiliser la classe modal-dialog pour la boîte de dialogue ;
    • Ajouter la classe modal-content pour la zone de contenu ;
    • S'assurer que la modale est centrée verticalement dans la fenêtre en appliquant la classe modal-dialog-centered au conteneur modal-dialog ;
    • Utiliser la classe modal-title pour l'élément de titre (<h5>) ;
    • Appliquer 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érer l'image du produit dans le corps de la modale et garantir son adaptation à l'aide de la classe img-fluid ;
    • Afficher le titre du produit avec une balise de titre appropriée (<h6>) et appliquer la classe modal-title ;
    • Fournir une brève description du produit à l'aide d'un élément paragraphe (<p>) et appliquer la classe modal-text.
index.html

index.html

copy
  1. Utiliser les classes de composant modale de Bootstrap pour créer la structure de la modale :
    • Utiliser la classe modal pour le conteneur principal ;
    • Utiliser la classe modal-dialog pour la boîte de dialogue ;
    • Utiliser la classe modal-content pour la zone de contenu.
  2. Centrer la modale verticalement dans la fenêtre en appliquant la classe modal-dialog-centered au conteneur modal-dialog.
  3. S'assurer que le titre de la modale est correctement stylisé en appliquant la classe modal-title à l'élément de titre (<h5>).
  4. Utiliser la classe btn-close pour le bouton de fermeture dans l'en-tête de la modale afin d'assurer une cohérence de style et de fonctionnalité.
  5. Personnaliser la taille de la modale en appliquant l'une des classes de taille (modal-lg, modal-xl, etc.) au conteneur modal-dialog.
index.html

index.html

copy

1. Quel est le principal objectif des barres de navigation (Navbars) de Bootstrap ?

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

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

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

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

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

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

question mark

Quel est le principal objectif des barres de navigation (Navbars) de Bootstrap ?

Select the correct answer

question mark

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

Select the correct answer

question mark

Quelle classe doit être appliquée aux images pour les rendre responsives ?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

Quel composant Bootstrap est utilisé pour créer des carrousels d’images interactifs ?

Select the correct answer

question mark

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

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.23

bookDéfi et Quiz : Maîtriser les Fonctionnalités Avancées de Bootstrap

Glissez pour afficher le menu

Tâche : Création d'une fenêtre modale Bootstrap

Créer un composant de fenêtre modale Bootstrap affichant les détails d'un produit. Suivre les étapes fournies dans le code initial pour compléter les classes Bootstrap manquantes et finaliser la structure de la modale.

  • Étape 1 : Créer la structure de la modale.
    • Appliquer la classe modal au conteneur principal ;
    • Utiliser la classe modal-dialog pour la boîte de dialogue ;
    • Ajouter la classe modal-content pour la zone de contenu ;
    • S'assurer que la modale est centrée verticalement dans la fenêtre en appliquant la classe modal-dialog-centered au conteneur modal-dialog ;
    • Utiliser la classe modal-title pour l'élément de titre (<h5>) ;
    • Appliquer 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érer l'image du produit dans le corps de la modale et garantir son adaptation à l'aide de la classe img-fluid ;
    • Afficher le titre du produit avec une balise de titre appropriée (<h6>) et appliquer la classe modal-title ;
    • Fournir une brève description du produit à l'aide d'un élément paragraphe (<p>) et appliquer la classe modal-text.
index.html

index.html

copy
  1. Utiliser les classes de composant modale de Bootstrap pour créer la structure de la modale :
    • Utiliser la classe modal pour le conteneur principal ;
    • Utiliser la classe modal-dialog pour la boîte de dialogue ;
    • Utiliser la classe modal-content pour la zone de contenu.
  2. Centrer la modale verticalement dans la fenêtre en appliquant la classe modal-dialog-centered au conteneur modal-dialog.
  3. S'assurer que le titre de la modale est correctement stylisé en appliquant la classe modal-title à l'élément de titre (<h5>).
  4. Utiliser la classe btn-close pour le bouton de fermeture dans l'en-tête de la modale afin d'assurer une cohérence de style et de fonctionnalité.
  5. Personnaliser la taille de la modale en appliquant l'une des classes de taille (modal-lg, modal-xl, etc.) au conteneur modal-dialog.
index.html

index.html

copy

1. Quel est le principal objectif des barres de navigation (Navbars) de Bootstrap ?

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

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

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

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

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

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

question mark

Quel est le principal objectif des barres de navigation (Navbars) de Bootstrap ?

Select the correct answer

question mark

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

Select the correct answer

question mark

Quelle classe doit être appliquée aux images pour les rendre responsives ?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

Quel composant Bootstrap est utilisé pour créer des carrousels d’images interactifs ?

Select the correct answer

question mark

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

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6
some-alt