QCM sur Bootstrap – Partie 2

mars 6, 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 est utilisée pour définir une couleur de fond ?

A .bg-primary

B .bg-color

C .background-color

D .color-bg

Dans Bootstrap, les classes de couleur de fond sont préfixées par .bg-. Par exemple, .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 ou .bg-danger.

2. Quelle classe Bootstrap est utilisée pour ajouter un espacement à droite d’un élément ?

A .mr-1

B .padding-right-1

C .space-right-1

D .pr-1

La classe .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

B .text-center

C .center-text

D .align-text-center

La classe .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

B .dropdown

C .menu

D .list-dropdown

Le composant .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:

<div class="dropdown">       
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">         
    Dropdown bouton       
  </button>       
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">         
    <li><a class="dropdown-item" href="#">Action</a></li>         
    <li><a class="dropdown-item" href="#">Autre action</a></li>         
    <li><a class="dropdown-item" href="#">Quelque chose d'autre ici</a></li>       
  </ul>     
</div>

Résultat:

5. Quelle classe Bootstrap est utilisée pour créer un bouton de taille petite ?

A .btn-lg

B .btn-xs

C .btn-sm

D .btn-small

La classe .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 pour les boutons grands et .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

B .d-sm-none

C .hidden-sm

D .display-none-sm

La classe .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 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

B .responsive-img

C .resize

D .img-responsive

La classe .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

B .nav-horizontal

C .nav-bar

D .navigation-bar

La classe .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 pour qu’elle s’adapte à la taille de l’écran, ou .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

B .columns

C .grid

D .column

Dans le système de grille de Bootstrap, la classe .row est utilisée pour définir une ligne de colonnes. Ensuite, vous pouvez utiliser des classes comme .col- pour définir la taille des colonnes dans cette ligneExemple:

<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: lightblue; padding: 20px;">
      Colonne 1 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightgreen; padding: 20px;">
      Colonne 2 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightcoral; padding: 20px;">
      Colonne 3 (4 colonnes)
    </div>
  </div>
</div>

Résultat:

10. Quelle est la classe Bootstrap utilisée pour créer un tableau avec des bordures ?

A .table-bordered

B .table-border

C .table-bordered-style

D .table-border-all

La classe .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:

<table class="table table-bordered">...</table>

Résultat:

QCMs qui pourraient vous intéresser :

1. Quelle classe Bootstrap est utilisée pour définir une couleur de fond ?

2. Quelle classe Bootstrap est utilisée pour ajouter un espacement à droite d’un élément ?

3. Quelle est la classe Bootstrap utilisée pour aligner du texte au centre ?

4. Quel composant de Bootstrap permet de créer des menus déroulants ?

5. Quelle classe Bootstrap est utilisée pour créer un bouton de taille petite ?

6. Quelle classe Bootstrap est utilisée pour cacher un élément uniquement sur les écrans de petite taille ?

7. Quelle classe Bootstrap permet de rendre un élément responsive en adaptant sa taille à l’écran ?

8. Quelle classe Bootstrap est utilisée pour créer une barre de navigation horizontale ?

9. Quelle classe Bootstrap est utilisée pour rendre une grille de colonnes ?

10. Quelle est la classe Bootstrap utilisée pour créer un tableau avec des bordures ?

Vous pourrez aussi aimer

QCM sur Bootstrap – Partie 8

QCM sur Bootstrap – Partie 5

QCM sur Bootstrap – Partie 10

Laisser un commentaire Annuler la réponse