QCM sur Bootstrap – Partie 5

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 fond de couleur rouge pour un élément ?


A .bg-danger

B .bg-red

C .background-danger

D .danger-bg

A
La classe .bg-danger définit un fond rouge pour l’élément, en utilisant la couleur associée à l’état « danger » dans Bootstrap, souvent utilisée pour signaler des erreurs ou des avertissements.

 

 

2. Quelle classe Bootstrap permet de rendre une barre de navigation transparente ?


A .navbar-light

B .navbar-transparent

C .navbar

D .navbar-bg-transparent

B
La classe .navbar-transparent est utilisée pour rendre une barre de navigation transparente. Cela permet de personnaliser l’apparence de la barre de navigation en la rendant invisible ou en lui appliquant un fond transparent.

 

 

3. Quelle classe Bootstrap permet de masquer un élément à partir d’un certain point d’écran (par exemple, au-dessus de 768px) ?

A .d-none d-md-block

B .hidden-md

C .d-md-none

D .hidden-lg

A
La classe .d-none d-md-block cache un élément sur les écrans de petite taille et l’affiche à partir de la taille « medium » (≥ 768px). Le système de classes de Bootstrap permet de contrôler la visibilité des éléments en fonction des tailles d’écran.

 

 
 

4. Quelle classe Bootstrap permet de définir un fond de couleur verte pour un élément ?


A .background-success

B .bg-green

C .bg-vert

D .bg-success

D
La classe .bg-success est utilisée pour donner un fond de couleur verte à un élément, généralement pour signaler une action réussie, comme une confirmation ou une réussite.

 

 

5. Quelle classe Bootstrap permet de créer une zone de texte avec une bordure arrondie ?

A .input-rounded

B .form-control-rounded

C .rounded

D .form-control

B
La classe .form-control-rounded est utilisée pour donner une bordure arrondie à des éléments de formulaire comme les zones de texte ou les champs de saisie. Cette classe est une variante de la classe .form-control.
 

 

 

6. Quelle classe Bootstrap permet de créer un bouton de type « outline » (bordure) ?


A .btn-outline

B .btn-outline-primary

C .outline-btn

D .btn-border

B
La classe .btn-outline-primary crée un bouton avec une bordure de couleur primaire, mais sans fond. Lorsqu’on survole ce bouton, il prend la couleur de fond primaire définie dans le thème de Bootstrap. Il existe d’autres variantes pour différentes couleurs (par exemple, .btn-outline-danger).

 

 
 

7. Quelle classe Bootstrap permet d’afficher une image sous forme de cercle ?


A .rounded-circle

B .circle-img

C .img-circle

D .round-img

A
La classe .rounded-circle est utilisée pour rendre une image circulaire en appliquant une bordure arrondie à l’image, de manière à ce que ses bords soient complètement arrondis.

 

 

8. Quelle classe Bootstrap permet d’appliquer un fond de couleur bleu clair ?


A .bg-light

B .bg-primary

C .bg-info

D .bg-soft-blue

C
La classe .bg-info applique un fond de couleur bleu clair (souvent utilisé pour indiquer des informations générales ou des messages informatifs dans une interface utilisateur).

 

 

9. Quelle classe Bootstrap permet d’afficher un élément sous forme de « badge » ?


A .badge

B .label

C .tag

D .badge-item

A
La classe .badge est utilisée pour créer des badges dans Bootstrap. Les badges sont souvent utilisés pour afficher des nombres ou des informations contextuelles dans une interface utilisateur.

 

 
 

10. Quelle classe Bootstrap permet de créer un tableau avec une barre de défilement horizontale si le contenu est trop large ?

A .table-responsive

B .table-scroll

C .scroll-table

D .table-overflow

A
La classe .table-responsive est utilisée pour rendre un tableau responsive. Elle ajoute une barre de défilement horizontale lorsque le contenu du tableau est trop large pour l’écran. Cela permet au tableau de s’adapter à des tailles d’écran plus petites sans perdre en lisibilité.
 

 

 

Laisser un commentaire

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