QCM sur Bootstrap – Partie 3
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 centrer un élément verticalement ?
A
.align-items-center
B .vertical-center
C .center-vertically
D .v-center
A
La classe
.align-items-center fait partie du système de flexbox de Bootstrap. Elle permet de centrer verticalement les éléments dans un conteneur en utilisant la propriété align-items: center. Cela fonctionne sur les éléments enfants d’un conteneur avec la classe .d-flex.
2. Quelle classe Bootstrap est utilisée pour masquer un élément uniquement sur les écrans larges ?
A .d-lg-none
B .d-xl-none
C .d-md-none
D .d-sm-none
A
La classe
.d-lg-none permet de masquer un élément sur les écrans de taille large et au-delà (large, extra large). Elle utilise le système de classes de visibilité de Bootstrap, où vous pouvez masquer ou afficher un élément en fonction de la taille de l’écran.
3. Quelle classe Bootstrap est utilisée pour appliquer une bordure arrondie à un élément ?
A
.round-border
B .border-radius
C .border-round
D .rounded
D
La classe
.rounded de Bootstrap permet d’appliquer une bordure arrondie à un élément. Vous pouvez l’utiliser pour des éléments comme des images, des boutons ou des cartes. Il existe aussi des variantes comme .rounded-circle pour des bordures complètement circulaires ou .rounded-pill pour des bords très arrondis. Exemple:
<div class="container mt-5">
<div class="p-3 border rounded">
<h2>Exemple avec bordure arrondie</h2>
<p>Ceci est un exemple d'un élément avec une bordure arrondie appliquée à l'aide de la classe .rounded.</p>
</div>
</div>
Résultat:
4. Quelle classe Bootstrap est utilisée pour rendre un élément invisible sans le retirer du flux de la page ?
A .invisible
B .hidden
C .d-none
D .visibility-hidden
A
La classe
.invisible rend un élément invisible, mais il reste dans le flux du document, ce qui signifie qu’il occupe toujours de l’espace. La classe .d-none (qui cache complètement l’élément et le retire du flux) est différente de celle-ci.
5. Quelle classe Bootstrap est utilisée pour définir une largeur de 100% sur un élément ?
A .full-width
B .w-100
C .width-100
D .width-full
B
La classe
.w-100 permet de définir la largeur d’un élément à 100 % de la largeur de son conteneur parent. C’est une classe utilitaire très pratique pour créer des éléments réactifs.
6. Quelle classe Bootstrap est utilisée pour ajouter une ombre portée à un élément ?
A
.shadow-lg
B .box-shadow
C .shadow
D .drop-shadow
C
La classe
.shadow est utilisée pour ajouter une ombre portée légère à un élément. Bootstrap offre également d’autres variantes comme .shadow-sm (ombre plus petite) et .shadow-lg (ombre plus grande) pour personnaliser l’effet Exemple:
<div class="container mt-5">
<div class="p-5 bg-light border shadow">
<h2>Exemple avec une ombre portée</h2>
<p>Cette boîte a une ombre portée grâce à la classe .shadow de Bootstrap.</p>
</div>
</div>
Résultat:
7. Quelle classe Bootstrap est utilisée pour créer un bouton qui change de couleur lorsque l’on survole ?
A
.btn-hover
B .btn-outline-primary
C .btn-primary
D .btn-active
B
La classe
.btn-outline-primary est un type de bouton qui n’a pas de fond par défaut. Lorsqu’on survole ce bouton, sa couleur de fond change en fonction du thème de couleur primaire (généralement défini dans le CSS de Bootstrap).
8. Quelle est la classe Bootstrap utilisée pour définir la hauteur d’un élément à 100vh (la hauteur de la fenêtre) ?
A .h-100
B .vh-100
C .height-100
D .full-height
B
La classe
.vh-100 définit la hauteur d’un élément à 100 % de la hauteur de la fenêtre d’affichage (viewport). C’est une unité pratique pour rendre des éléments qui couvrent toute la hauteur de l’écran.
9. Quel composant de Bootstrap permet de créer un carrousel d’images ?
A
.carousel
B .image-slider
C .image-carousel
D .slider
A
Le composant
.carousel est utilisé pour créer un carrousel d’images ou de contenu en Bootstrap. Il permet de faire défiler des éléments, généralement des images, automatiquement ou manuellement.
10. Quelle classe Bootstrap est utilisée pour appliquer un espacement à gauche d’un élément ?
A .ml-1
B .pl-1
C .space-left-1
D .ml-1px
A
La classe
.ml-1 applique un margin à gauche de l’élément avec une valeur correspondant à la première unité de l’échelle de marges de Bootstrap. La classe .ml est l’abréviation de « margin-left ». Il existe également des variantes comme .ml-2, .ml-3, etc., pour ajuster l’espacement.
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
