ESTIM – DÉPARTEMENT INFORMATIQUE
DEVOIR - DEUXIÈME ANNÉE
Développement Web - Semestre III
Durée : 2 heures
Documents autorisés : Néant
Barème : 20 points
Nom(s) : MBAMA BILOUATOU
Prénom(s) : DIVIN GUELORD RABBIT
SOLUTIONS DES 10 QUESTIONS SUR BOOTSTRAP
QUESTION 1 (Définition)
Qu'est-ce que Bootstrap et qui l'a créé ? Citez 3 avantages principaux de son
utilisation.
RÉPONSE :
Bootstrap est un framework CSS open-source.
3 avantages principaux :
1. Responsive Design : S'adapte automatiquement à toutes les tailles
d'écran (mobile, tablette, desktop)
2. Gain de temps : Composants prêts à l'emploi (boutons, formulaires,
navigation, etc.)
3. Compatibilité navigateurs : Fonctionne sur tous les navigateurs
modernes
QUESTION 2 (Système de grille)
Expliquez le système de grille Bootstrap. Combien de colonnes comporte une
ligne par défaut ? Donnez un exemple de code.
RÉPONSE :
Le système de grille Bootstrap comporte 12 colonnes par défaut. Il permet de
créer des mises en page responsives en divisant l'espace horizontal.
Exemple de code :
html
<div class="container">
<div class="row">
<div class="col-4">Colonne 1 (4/12)</div>
<div class="col-4">Colonne 2 (4/12)</div>
<div class="col-4">Colonne 3 (4/12)</div>
</div>
</div>
QUESTION 3 (Classes responsive)
Quelle est la différence entre les classes suivantes : col-6, col-md-6, col-lg-6 ?
Sur quelles tailles d'écran s'appliquent-elles ?
RÉPONSE :
Classe Taille d'écran Application
Occupe 6 colonnes sur tous les écrans (mobile,
col-6 Toutes les tailles
tablette, desktop)
col-md- ≥ 768px (tablette
Occupe 6 colonnes à partir de la taille tablette
6 et plus)
Classe Taille d'écran Application
≥ 992px (desktop et
col-lg-6 Occupe 6 colonnes à partir de la taille desktop
plus)
Exemple pratique :
<div class="col-12 col-md-6 col-lg-4">
<!-- Mobile: 12 colonnes (100%)
Tablette: 6 colonnes (50%)
Desktop: 4 colonnes (33%) -->
</div>
QUESTION 4 (Intégration)
Citez et expliquez 2 méthodes différentes pour intégrer Bootstrap dans un
projet HTML.
RÉPONSE :
Méthode 1 : Via CDN (Content Delivery Network)
La plus rapide, pas besoin de télécharger de fichiers.
<!DOCTYPE html>
<html>
<head>
<!-- CSS Bootstrap -->
<link
href="[Link]
" rel="stylesheet">
</head>
<body>
<!-- JS Bootstrap -->
<script
src="[Link]
[Link]"></script>
</body>
</html>
Méthode 2 : Téléchargement local
Télécharger les fichiers Bootstrap et les inclure dans le projet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<script src="js/[Link]"></script>
</body>
</html>
QUESTION 5 (Composants)
Nommez 5 composants Bootstrap prêts à l'emploi et expliquez brièvement
leur utilité.
RÉPONSE :
1. Navbar : Barre de navigation responsive avec menu hamburger sur
mobile
2. Cards : Cartes flexibles pour présenter du contenu (image, titre, texte,
boutons)
3. Buttons : Boutons stylisés avec différentes variantes (primary, danger,
success, etc.)
4. Modal : Fenêtre popup pour afficher du contenu par-dessus la page
5. Carousel : Carrousel d'images ou de contenu avec navigation
automatique ou manuelle
QUESTION 6 (Classes d'espacement)
Expliquez la signification des classes suivantes : mt-3, pb-5, mx-auto, p-4. Que
signifient les lettres et les chiffres ?
RÉPONSE :
Classe Signification Explication
mt-3 Margin Top 3 Marge supérieure de taille 3 (1rem)
pb-5 Padding Bottom 5 Padding inférieur de taille 5 (3rem)
mx- Margin X (horizontal) Marges gauche et droite automatiques
auto auto (centrage)
p-4 Padding 4 Padding de tous les côtés de taille 4 (1.5rem)
Légende des lettres :
• m = margin, p = padding
• t = top, b = bottom, s = start (gauche), e = end (droite), x = horizontal, y =
vertical
Échelle des chiffres : 0, 1, 2, 3, 4, 5 (0 = 0rem, 1 = 0.25rem, 5 = 3rem)
QUESTION 7 (Breakpoints)
Quels sont les 5 breakpoints (points de rupture) par défaut de Bootstrap 5 ?
Donnez les tailles en pixels.
RÉPONSE :
Breakpoint Préfixe Taille Type d'appareil
Extra Small (aucun) < 576px Mobile portrait
Small sm ≥ 576px Mobile paysage
Medium md ≥ 768px Tablette
Large lg ≥ 992px Desktop
Extra Large xl ≥ 1200px Grand écran
Extra Extra Large xxl ≥ 1400px Très grand écran
Note : Bootstrap 5 a 6 breakpoints (xxl ajouté), mais les 5 principaux sont xs,
sm, md, lg, xl.
QUESTION 8 (Classes utilitaires)
Donnez les classes Bootstrap pour :
RÉPONSE :
1. Centrer un texte :
<p class="text-center">Texte centré</p>
2. Mettre un texte en gras :
<p class="fw-bold">Texte en gras</p>
3. Cacher un élément sur mobile uniquement :
<div class="d-none d-md-block">Caché sur mobile, visible sur tablette+</div>
4. Appliquer un fond bleu primaire :
<div class="bg-primary">Fond bleu</div>
QUESTION 9 (Images)
Quelle classe Bootstrap permet de rendre une image responsive ? Donnez un
exemple de code HTML complet avec cette classe et au moins 2 autres classes
Bootstrap pour styliser l'image.
RÉPONSE :
La classe img-fluid rend une image responsive.
Exemple complet :
<img src="images/[Link]"
alt="Description de l'image"
class="img-fluid rounded shadow">
Explication des classes :
• img-fluid : Image responsive (max-width: 100%, height: auto)
• rounded : Arrondit les coins de l'image
• shadow : Ajoute une ombre portée
Autres classes possibles :
• img-thumbnail : Bordure autour de l'image
• rounded-circle : Image circulaire
• float-start / float-end : Alignement gauche/droite
QUESTION 10 (Conteneurs)
Quelle est la différence entre les classes container et container-fluid dans
Bootstrap ? Dans quelles situations utiliseriez-vous l'une plutôt que l'autre ?
RÉPONSE :
container
• Largeur fixe qui s'adapte aux breakpoints
• Marges automatiques à gauche et à droite
• Centré sur la page
• Utilisation : Pour du contenu principal qui ne doit pas occuper toute la
largeur de l'écran (sites web traditionnels, blogs, portfolios)
<div class="container">
<!-- Largeur maximale de 1140px sur grand écran -->
</div>
container-fluid
• Largeur 100% sur toutes les tailles d'écran
• Occupe toute la largeur disponible
• Pas de marges latérales
• Utilisation : Pour des designs pleine largeur (pages d'accueil, galeries
d'images, dashboards, applications web)
<div class="container-fluid">
<!-- Prend toute la largeur de l'écran -->
</div>
Comparaison visuelle :
container: | [====CONTENU====] |
container-fluid: |[=====CONTENU=====]|
BON COURAGE !