Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi et Quiz : Application des Concepts de Base de Bootstrap | Concepts de Base
Essentiels de Bootstrap pour les Sites Web Modernes

bookDéfi et Quiz : Application des Concepts de Base de Bootstrap

Tâche : Amélioration de la vitrine du portfolio avec les classes Bootstrap

  • Étape 1 : Ajouter la classe appropriée à l’élément div fourni pour créer un conteneur global.
  • Étape 2 : Ajouter la classe appropriée à l’élément div fourni pour créer une ligne à l’intérieur du conteneur.
  • Étape 3 : Ajouter les classes appropriées aux éléments div fournis pour créer des colonnes pour chaque élément du portfolio. Veiller à ce que les colonnes soient réactives et ajustent leur largeur en conséquence. (Veuillez noter qu’il y a trois éléments div à cette étape.)
  • Étape 4 : Styliser les titres des éléments du portfolio en ajoutant les classes appropriées aux éléments h2 donnés. Centrer les titres dans leurs colonnes respectives.
  • Étape 5 : Rendre les descriptions des éléments du portfolio lisibles et de taille appropriée en ajoutant les classes adéquates aux éléments p fournis. Définir la taille de police sur fs-6.
index.html

index.html

index.css

index.css

copy

Utiliser le système de grille de Bootstrap (container, row, col) pour créer une mise en page réactive pour la vitrine du portfolio. Appliquer les classes de typographie (text-center, h2, fs-6) pour styliser correctement les titres et descriptions des éléments du portfolio.

index.html

index.html

index.css

index.css

copy

1. En combien de colonnes le système de grille de Bootstrap divise-t-il la page ?

2. Quelle classe encapsule et centre le contenu dans un conteneur de largeur fixe ?

3. Quelles classes sont utilisées pour créer un groupe horizontal de colonnes dans le système de grille ?

4. Que représentent les classes sm, md, lg et xl ?

5. Quelles classes sont utilisées pour styliser les titres avec différentes tailles ?

6. Quelles classes sont utilisées pour aligner les éléments de texte ?

7. Quelle classe est utilisée pour empiler verticalement les boutons ?

8. Quelle classe est appliquée aux cases à cocher et aux boutons radio dans un conteneur form-check pour garantir un style cohérent ?

9. Comment le système de grille de Bootstrap contribue-t-il à l'organisation de la mise en page des formulaires ?

question mark

En combien de colonnes le système de grille de Bootstrap divise-t-il la page ?

Select the correct answer

question mark

Quelle classe encapsule et centre le contenu dans un conteneur de largeur fixe ?

Select the correct answer

question mark

Quelles classes sont utilisées pour créer un groupe horizontal de colonnes dans le système de grille ?

Select the correct answer

question mark

Que représentent les classes sm, md, lg et xl ?

Select the correct answer

question mark

Quelles classes sont utilisées pour styliser les titres avec différentes tailles ?

Select the correct answer

question mark

Quelles classes sont utilisées pour aligner les éléments de texte ?

Select the correct answer

question mark

Quelle classe est utilisée pour empiler verticalement les boutons ?

Select the correct answer

question mark

Quelle classe est appliquée aux cases à cocher et aux boutons radio dans un conteneur form-check pour garantir un style cohérent ?

Select the correct answer

question mark

Comment le système de grille de Bootstrap contribue-t-il à l'organisation de la mise en page des formulaires ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 8

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

Suggested prompts:

What are the exact Bootstrap classes I should use for each step?

Can you show an example of how the HTML structure should look after applying these classes?

Can you explain how the Bootstrap grid system ensures responsiveness in this scenario?

Awesome!

Completion rate improved to 3.23

bookDéfi et Quiz : Application des Concepts de Base de Bootstrap

Glissez pour afficher le menu

Tâche : Amélioration de la vitrine du portfolio avec les classes Bootstrap

  • Étape 1 : Ajouter la classe appropriée à l’élément div fourni pour créer un conteneur global.
  • Étape 2 : Ajouter la classe appropriée à l’élément div fourni pour créer une ligne à l’intérieur du conteneur.
  • Étape 3 : Ajouter les classes appropriées aux éléments div fournis pour créer des colonnes pour chaque élément du portfolio. Veiller à ce que les colonnes soient réactives et ajustent leur largeur en conséquence. (Veuillez noter qu’il y a trois éléments div à cette étape.)
  • Étape 4 : Styliser les titres des éléments du portfolio en ajoutant les classes appropriées aux éléments h2 donnés. Centrer les titres dans leurs colonnes respectives.
  • Étape 5 : Rendre les descriptions des éléments du portfolio lisibles et de taille appropriée en ajoutant les classes adéquates aux éléments p fournis. Définir la taille de police sur fs-6.
index.html

index.html

index.css

index.css

copy

Utiliser le système de grille de Bootstrap (container, row, col) pour créer une mise en page réactive pour la vitrine du portfolio. Appliquer les classes de typographie (text-center, h2, fs-6) pour styliser correctement les titres et descriptions des éléments du portfolio.

index.html

index.html

index.css

index.css

copy

1. En combien de colonnes le système de grille de Bootstrap divise-t-il la page ?

2. Quelle classe encapsule et centre le contenu dans un conteneur de largeur fixe ?

3. Quelles classes sont utilisées pour créer un groupe horizontal de colonnes dans le système de grille ?

4. Que représentent les classes sm, md, lg et xl ?

5. Quelles classes sont utilisées pour styliser les titres avec différentes tailles ?

6. Quelles classes sont utilisées pour aligner les éléments de texte ?

7. Quelle classe est utilisée pour empiler verticalement les boutons ?

8. Quelle classe est appliquée aux cases à cocher et aux boutons radio dans un conteneur form-check pour garantir un style cohérent ?

9. Comment le système de grille de Bootstrap contribue-t-il à l'organisation de la mise en page des formulaires ?

question mark

En combien de colonnes le système de grille de Bootstrap divise-t-il la page ?

Select the correct answer

question mark

Quelle classe encapsule et centre le contenu dans un conteneur de largeur fixe ?

Select the correct answer

question mark

Quelles classes sont utilisées pour créer un groupe horizontal de colonnes dans le système de grille ?

Select the correct answer

question mark

Que représentent les classes sm, md, lg et xl ?

Select the correct answer

question mark

Quelles classes sont utilisées pour styliser les titres avec différentes tailles ?

Select the correct answer

question mark

Quelles classes sont utilisées pour aligner les éléments de texte ?

Select the correct answer

question mark

Quelle classe est utilisée pour empiler verticalement les boutons ?

Select the correct answer

question mark

Quelle classe est appliquée aux cases à cocher et aux boutons radio dans un conteneur form-check pour garantir un style cohérent ?

Select the correct answer

question mark

Comment le système de grille de Bootstrap contribue-t-il à l'organisation de la mise en page des formulaires ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 8
some-alt