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 !
A Un langage de programmation
B Une bibliothèque JavaScript
C Un outil de gestion de base de données
D Un framework CSS
A bootstrap.css
B bootstrap.js
C bootstrap.min.css
D index.html
A Fournir une bibliothèque JavaScript pour l’animation
B Créer un design responsive et mobile-first pour les sites web
C Gérer les bases de données des sites web
D Ajouter des effets de transition CSS aux pages web
A 4 colonnes
B 6 colonnes
C 12 colonnes
D 50% de la largeur du conteneur
A En utilisant la classe .container
B En utilisant la classe .row et .col-*
C En utilisant la classe .grid
D En utilisant la classe .box
Connexion<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:
A .btn
B .button
C .btn-style
D .btn-class
.btn de Bootstrap permet de créer des boutons stylisés. Vous pouvez également ajouter des classes supplémentaires pour modifier la couleur ou le type du bouton, comme .btn-primary, .btn-success, etc. Exemple:
<button class="btn btn-primary">Bouton</button>
A mt-3
B ml-3
C m-3
D margin-top-3
btn-default
B btn-primary
C btn-success
D btn-info
btn-primary permet de créer un bouton avec la couleur primaire définie par la palette de Bootstrap (généralement bleu).
B Modal
C Tooltip
D Toast
B .text-center
C .d-flex et .justify-content-center
D .center
.d-flex pour activer le mode flexbox, puis utiliser .justify-content-center pour centrer horizontalement et .align-items-center pour centrer verticalement. Exemple :
<div class="d-flex justify-content-center align-items-center">
<p>Texte centré</p>
</div>
A .d-none
B .d-md-block
C .d-lg-none
D .d-md-none
.d-md-block permet d’afficher un élément seulement sur les écrans moyens (≥ 768px) et plus grands. Les classes d-*-none et d-*-block sont utilisées pour contrôler la visibilité en fonction de la taille de l’écran.
A d-flex
B flex-item
C flexbox
D display-flex
d-flex de Bootstrap applique le modèle Flexbox à un élément, permettant un agencement flexible de ses enfants.
A navbar-fixed
B navbar-sticky-top
C navbar-fixed-top
D navbar-static-top
navbar-fixed-top permet de rendre la barre de navigation fixe en haut de la page. Cela fait en sorte que la navbar reste visible même lorsque l’utilisateur fait défiler la page.
A card
B container-card
C box-card
D panel-card
card de Bootstrap permet de créer des éléments de type « carte », qui peuvent contenir des images, des titres, du texte, et d’autres composants.
A .font-weight-bold
B .text-bold
C .strong-text
D .bold
.font-weight-bold est utilisée pour rendre le texte en gras. C’est une classe de Bootstrap qui modifie le poids de la police.
L’article QCM sur Bootstrap – Partie 1 est apparu en premier sur WayToLearnX.
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 !
A .bg-primary
B .bg-color
C .background-color
D .color-bg
.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.
A .mr-1
B .padding-right-1
C .space-right-1
D .pr-1
.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.
.text-align-center
B .text-center
C .center-text
D .align-text-center
.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.
A .nav-dropdown
B .dropdown
C .menu
D .list-dropdown
.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:
A .btn-lg
B .btn-xs
C .btn-sm
D .btn-small
.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.
A .d-none
B .d-sm-none
C .hidden-sm
D .display-none-sm
.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 »).
A .img-fluid
B .responsive-img
C .resize
D .img-responsive
.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.
A .navbar
B .nav-horizontal
C .nav-bar
D .navigation-bar
.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.
A .row
B .columns
C .grid
D .column
.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:
A .table-bordered
B .table-border
C .table-bordered-style
D .table-border-all
.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:
L’article QCM sur Bootstrap – Partie 2 est apparu en premier sur WayToLearnX.
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 !
.align-items-center
B .vertical-center
C .center-vertically
D .v-center
.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.
A .d-lg-none
B .d-xl-none
C .d-md-none
D .d-sm-none
.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.
.round-border
B .border-radius
C .border-round
D .rounded
.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:
A .invisible
B .hidden
C .d-none
D .visibility-hidden
.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.
A .full-width
B .w-100
C .width-100
D .width-full
.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.
.shadow-lg
B .box-shadow
C .shadow
D .drop-shadow
.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:
.btn-hover
B .btn-outline-primary
C .btn-primary
D .btn-active
.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).
A .h-100
B .vh-100
C .height-100
D .full-height
.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.
.carousel
B .image-slider
C .image-carousel
D .slider
.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.
A .ml-1
B .pl-1
C .space-left-1
D .ml-1px
.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.
L’article QCM sur Bootstrap – Partie 3 est apparu en premier sur WayToLearnX.
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 !
A .resize-none
B .resize-off
C .no-resize
D .resize
.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.
A .text-light
B .white-text
C .text-white
D .color-white
.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.).
A .p-3
B .padding-all-3
C .pad-3
D .padding-3
.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)).
.align-center
B .center-align
C .justify-content-center
D .horizontal-align
.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.
.table-alternate
B .table-striped
C .table-hover
D .table-color
.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".
.progress-bar
B .progress
C .progress-bar-striped
D .bar-progress
.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.
.card-bordered
B .card
C .card-border
D .border-card
.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>
A .img-responsive
B .img-fluid
C .img-ratio
D .img-scale
.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.
A .row-12
B .col-12
C .container-12
D .col-md-12
.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.
.text-right
B .align-right
C .d-right
D .float-end
.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.
L’article QCM sur Bootstrap – Partie 4 est apparu en premier sur WayToLearnX.