QCM sur Bootstrap – Partie 4

mars 7, 2025mars 7, 2025 Thomas Aucun commentaire

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 d’empêcher un élément de se redimensionner ?

A .resize-none

B .resize-off

C .no-resize

D .resize

La classe .resize-none est utilisée pour empêcher un élément de se redimensionner, notamment les éléments de type textarea. Cela désactive la fonctionnalité de redimensionnement par l’utilisateur.

2. Quelle classe Bootstrap permet de définir une couleur de texte blanche ?

A .text-light

B .white-text

C .text-white

D .color-white

La classe .text-white est utilisée pour définir la couleur du texte en blanc. Bootstrap fournit de nombreuses classes utilitaires pour modifier la couleur du texte (par exemple, .text-primary, .text-success, etc.).

3. Quelle classe Bootstrap est utilisée pour appliquer un padding sur tous les côtés d’un élément ?

A .p-3

B .padding-all-3

C .pad-3

D .padding-3

La classe .p-3 applique un padding de taille 3 sur tous les côtés de l’élément (haut, droite, bas, gauche). Il existe des classes similaires pour définir des padding spécifiques pour chaque côté (par exemple, .pt-3 pour le padding en haut(top)).

4. Quelle classe Bootstrap permet de faire un alignement horizontal de contenu ?

A .align-center

B .center-align

C .justify-content-center

D .horizontal-align

La classe .justify-content-center fait partie du système Flexbox de Bootstrap et permet de centrer horizontalement les éléments à l’intérieur d’un conteneur. Elle est souvent utilisée avec la classe .d-flex pour activer le modèle de disposition Flexbox.

5. Quelle classe Bootstrap permet de définir un tableau avec des rangées alternées colorées ?

A .table-alternate

B .table-striped

C .table-hover

D .table-color

La classe .table-striped est utilisée pour ajouter des bandes de couleur alternées sur les lignes d’un tableau, ce qui améliore la lisibilité. Vous pouvez l’ajouter à un tableau en utilisant class="table table-striped".

6. Quelle classe Bootstrap est utilisée pour créer une barre de progression ?

A .progress-bar

B .progress

C .progress-bar-striped

D .bar-progress

La classe .progress est utilisée pour créer une barre de progression de base. Vous pouvez également ajouter des classes comme .progress-bar pour représenter la progression réelle et .progress-bar-striped pour ajouter des bandes animées à la barre.

7. Quelle classe Bootstrap est utilisée pour créer une carte avec une bordure ?

A .card-bordered

B .card

C .card-border

D .border-card

La classe .card est utilisée pour créer des cartes en Bootstrap, qui sont des conteneurs avec une bordure, des ombres, et éventuellement un en-tête et un pied de page. La bordure est généralement incluse par défaut. Exemple:

<div class="card border-primary" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Titre de la carte</h5>
    <p class="card-text">Ceci est un exemple de carte avec une bordure. Vous pouvez ajouter du contenu personnalisé à l'intérieur.</p>
    <a href="#" class="btn btn-primary">Lire plus</a>
  </div>
</div>

8. Quelle classe Bootstrap permet d’agrandir une image tout en maintenant son ratio d’aspect ?

A .img-responsive

B .img-fluid

C .img-ratio

D .img-scale

La classe .img-fluid rend une image responsive, c’est-à-dire qu’elle s’ajuste automatiquement à la largeur de son conteneur tout en maintenant ses proportions d’origine.

9. Quelle classe Bootstrap permet de créer une grille de 12 colonnes ?

A .row-12

B .col-12

C .container-12

D .col-md-12

La classe .col-12 permet de créer une colonne qui prend toute la largeur du conteneur dans un système de grille de 12 colonnes. Le système de grille de Bootstrap est basé sur 12 colonnes, et .col-12 occupe toute la largeur de la ligne.

10. Quelle classe Bootstrap est utilisée pour aligner un élément à droite ?

A .text-right

B .align-right

C .d-right

D .float-end

La classe .float-end aligne un élément à droite du conteneur. Elle est utilisée dans Bootstrap pour positionner un élément en utilisant la propriété float: right. Notez que .text-right était utilisé dans les anciennes versions de Bootstrap pour aligner le texte à droite.

QCMs qui pourraient vous intéresser :

1. Quelle classe Bootstrap permet d’empêcher un élément de se redimensionner ?

2. Quelle classe Bootstrap permet de définir une couleur de texte blanche ?

3. Quelle classe Bootstrap est utilisée pour appliquer un padding sur tous les côtés d’un élément ?

4. Quelle classe Bootstrap permet de faire un alignement horizontal de contenu ?

5. Quelle classe Bootstrap permet de définir un tableau avec des rangées alternées colorées ?

6. Quelle classe Bootstrap est utilisée pour créer une barre de progression ?

7. Quelle classe Bootstrap est utilisée pour créer une carte avec une bordure ?

8. Quelle classe Bootstrap permet d’agrandir une image tout en maintenant son ratio d’aspect ?

9. Quelle classe Bootstrap permet de créer une grille de 12 colonnes ?

10. Quelle classe Bootstrap est utilisée pour aligner un élément à droite ?

Vous pourrez aussi aimer

QCM sur Bootstrap – Partie 3

QCM sur Bootstrap – Partie 5

QCM sur Bootstrap – Partie 9

Laisser un commentaire Annuler la réponse