Vous souhaitez évaluer vos compétences en Bootstrap, le framework CSS le plus utilisé pour créer des sites web réactifs et modernes ? Dans cet article, nous vous proposons un QCM sur Bootstrap pour tester vos connaissances et vous perfectionner dans l’utilisation de ce puissant outil. Que vous soyez débutant ou développeur expérimenté, ce quiz vous aidera à mieux comprendre les concepts clés de Bootstrap, de la grille responsive aux composants avancés. Préparez-vous à améliorer vos compétences en développement web et à maîtriser Bootstrap grâce à ce QCM interactif !
1. Quelle classe Bootstrap est utilisée pour définir une couleur de fond ?
A
.bg-primary
.bg-primary
B
.bg-color
.bg-color
C
.background-color
.background-color
D
.color-bg
.color-bg
A
Dans Bootstrap, les classes de couleur de fond sont préfixées par
.bg-
.bg-. Par exemple,
.bg-primary
.bg-primary applique la couleur de fond primaire définie dans le thème Bootstrap. D’autres classes similaires existent pour d’autres couleurs, comme
.bg-success
.bg-success ou
.bg-danger
.bg-danger.
2. Quelle classe Bootstrap est utilisée pour ajouter un espacement à droite d’un élément ?
A
.mr-1
.mr-1
B
.padding-right-1
.padding-right-1
C
.space-right-1
.space-right-1
D
.pr-1
.pr-1
D
La classe
.pr-1
.pr-1 applique un padding à droite de l’élément avec une taille correspondant à la valeur 1 de l’échelle de Bootstrap. L’abréviation « pr » signifie « padding-right », et les valeurs de l’échelle vont de 0 à 5, en augmentant de 0.25 rem à chaque fois.
3. Quelle est la classe Bootstrap utilisée pour aligner du texte au centre ?
A
.text-align-center
.text-align-center
B
.text-center
.text-center
C
.center-text
.center-text
D
.align-text-center
.align-text-center
B
La classe
.text-center
.text-center de Bootstrap est utilisée pour centrer le texte horizontalement à l’intérieur de son conteneur. Cette classe fait partie des utilitaires de typographie fournis par Bootstrap pour la gestion de l’alignement du texte.
4. Quel composant de Bootstrap permet de créer des menus déroulants ?
A
.nav-dropdown
.nav-dropdown
B
.dropdown
.dropdown
C
.menu
.menu
D
.list-dropdown
.list-dropdown
B
Le composant
.dropdown
.dropdown est utilisé pour créer un menu déroulant en Bootstrap. Il peut contenir des liens ou des boutons et s’affiche lorsque l’utilisateur interagit avec le composant (par exemple, en cliquant sur un bouton). Ce composant nécessite également l’utilisation de JavaScript pour afficher correctement le menu lorsqu’il est activé. Exemple:
5. Quelle classe Bootstrap est utilisée pour créer un bouton de taille petite ?
A
.btn-lg
.btn-lg
B
.btn-xs
.btn-xs
C
.btn-sm
.btn-sm
D
.btn-small
.btn-small
C
La classe
.btn-sm
.btn-sm est utilisée pour appliquer une taille petite à un bouton dans Bootstrap. Il existe également d’autres classes pour définir la taille des boutons, comme
.btn-lg
.btn-lg pour les boutons grands et
.btn
.btn pour les boutons de taille par défaut.
6. Quelle classe Bootstrap est utilisée pour cacher un élément uniquement sur les écrans de petite taille ?
A
.d-none
.d-none
B
.d-sm-none
.d-sm-none
C
.hidden-sm
.hidden-sm
D
.display-none-sm
.display-none-sm
B
La classe
.d-sm-none
.d-sm-none cache un élément lorsque l’écran est de taille « small » (SM) ou inférieure (telles que les tablettes ou les téléphones mobiles). Les classes de visibilité en Bootstrap sont basées sur les tailles d’écran (par exemple,
.d-md-none
.d-md-none pour cacher un élément à partir de la taille « medium »).
7. Quelle classe Bootstrap permet de rendre un élément responsive en adaptant sa taille à l’écran ?
A
.img-fluid
.img-fluid
B
.responsive-img
.responsive-img
C
.resize
.resize
D
.img-responsive
.img-responsive
A
La classe
.img-fluid
.img-fluid est utilisée pour rendre une image responsive, c’est-à-dire qu’elle s’ajuste automatiquement à la largeur de son conteneur tout en maintenant ses proportions. Cela permet à l’image de bien s’adapter aux différents types d’écrans.
8. Quelle classe Bootstrap est utilisée pour créer une barre de navigation horizontale ?
A
.navbar
.navbar
B
.nav-horizontal
.nav-horizontal
C
.nav-bar
.nav-bar
D
.navigation-bar
.navigation-bar
A
La classe
.navbar
.navbar est utilisée pour créer une barre de navigation. Pour en faire une barre de navigation horizontale, vous pouvez également ajouter des classes supplémentaires comme
.navbar-expand-lg
.navbar-expand-lg pour qu’elle s’adapte à la taille de l’écran, ou
.navbar-light
.navbar-light pour les couleurs de fond et du texte.
9. Quelle classe Bootstrap est utilisée pour rendre une grille de colonnes ?
A
.row
.row
B
.columns
.columns
C
.grid
.grid
D
.column
.column
A
Dans le système de grille de Bootstrap, la classe
.row
.row est utilisée pour définir une ligne de colonnes. Ensuite, vous pouvez utiliser des classes comme
.col-
.col- pour définir la taille des colonnes dans cette ligneExemple:
10. Quelle est la classe Bootstrap utilisée pour créer un tableau avec des bordures ?
A
.table-bordered
.table-bordered
B
.table-border
.table-border
C
.table-bordered-style
.table-bordered-style
D
.table-border-all
.table-border-all
A
La classe
.table-bordered
.table-bordered est utilisée pour ajouter des bordures à un tableau dans Bootstrap. Elle applique des bordures autour de chaque cellule du tableau, ce qui améliore la lisibilité et la présentation des données. Exemple:
