QCM sur Bootstrap – Partie 7

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 permet de définir un tableau avec des lignes qui changent de couleur lors du survol ?

A .table-hover

B .table-active

C .table-striped

D .table-focus

A
La classe .table-hover est utilisée pour appliquer un effet de survol sur les lignes d’un tableau. Lorsque l’utilisateur passe la souris sur une ligne, celle-ci change de couleur, ce qui permet d’améliorer l’interactivité du tableau.
 

 

 

2. Quelle classe Bootstrap permet de cacher un élément uniquement sur les petits écrans ?

A .d-none d-sm-block

B .d-sm-none

C .hide-sm

D .hidden-small

B
La classe .d-sm-none permet de cacher un élément uniquement sur les petits écrans (inférieurs à 576px de large). Elle fait partie des classes de visibilité de Bootstrap qui permettent de contrôler l’affichage en fonction des tailles d’écran.

 

 

3. Quelle classe Bootstrap permet de définir une couleur de texte rouge ?


A .text-danger

B .text-red

C .text-warning

D .text-error

A
La classe .text-danger est utilisée pour définir une couleur de texte rouge, souvent utilisée pour indiquer des erreurs, des avertissements ou des alertes dans une interface utilisateur.

 

 
 

4. Quelle classe Bootstrap permet de créer un élément avec une bordure visible et arrondie ?

A .border-radius-3

B .border-radius

C .rounded-border

D .border

D
La classe .border est utilisée pour ajouter une bordure autour d’un élément. Pour avoir une bordure arrondie, vous pouvez combiner cette classe avec .rounded.

 

 

5. Quelle classe Bootstrap permet de définir un espacement à droite d’un élément de taille 5 ?

A .mr-5

B .ml-5

C .pr-5

D .m-right-5

A
La classe .mr-5 applique un espacement à droite (margin-right) de taille 5. Bootstrap propose un système de classes utilitaires qui permet de gérer facilement l’espacement autour des éléments.

 

 

6. Quelle classe Bootstrap permet de mettre en évidence un texte (comme pour les citations) ?

A .highlight

B .text-italic

C .text-emphasized

D .text-warning

D
La classe .text-warning est utilisée pour colorier un texte dans une teinte jaune/orange pour attirer l’attention, souvent utilisée pour les messages d’avertissement ou d’importance.
 

 

 
 

7. Quelle classe Bootstrap permet de rendre un élément invisible tout en conservant son espace dans le flux de la page ?

A .invisible

B .hidden

C .d-none

D .opacity-0

A
La classe .invisible permet de rendre un élément invisible tout en conservant son espace dans le flux du document. À l’inverse, .d-none retire complètement l’élément du flux et ne laisse pas d’espace.

 

 

8. Quelle classe Bootstrap permet de créer un menu déroulant avec un bouton ?


A .dropdown-button

B .dropdown-toggle

C .dropdown-list

D .dropdown-menu

B
La classe .dropdown-toggle est utilisée pour créer un bouton qui déclenche l’affichage du menu déroulant. Cette classe est combinée avec d’autres classes comme .dropdown-menu pour créer un menu complet.

 

 

9. Quelle classe Bootstrap est utilisée pour centrer un élément horizontalement dans un conteneur avec une largeur fixe ?


A .mx-auto

B .ml-auto

C .center-block

D .align-center

A
La classe .mx-auto est utilisée pour centrer un élément horizontalement avec des marges automatiques à gauche et à droite. Elle est souvent utilisée pour les éléments à largeur fixe dans un conteneur.

 

 
 

10. Quelle classe Bootstrap permet de définir un padding uniquement en bas d’un élément ?

A .pl-3

B .pt-3

C .pb-3

D .padding-bottom-3

C
La classe .pb-3 applique un padding (espacement interne) uniquement en bas de l’élément. Il existe également des classes similaires comme .pt-3 pour le padding en haut, .pl-3 pour le padding à gauche, et .pr-3 pour le padding à droite.

 

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *