Partie 3 - Maîtriser Bootstrap

Développement web front-end
80 heures
PARTIE 4
Maitriser Bootstrap
Dans ce module, vous allez :

• Maitriser des différentes composantes de Bootstrap
• Réaliser une production adaptée d’une page web avec
Bootstrap
• Maitriser des classes CSS de Bootstrap
• Réaliser une production aisée d’une page web
responsive
25 heures
CHAPITRE 1
INTÉGRER BOOTSTRAP
Ce que vous allez apprendre dans ce chapitre :
• Découvrir Bootstrap
• Utiliser le système de grille
5 heures
CHAPITRE 1
INTÉGRER BOOTSTRAP
1. Introduction au Bootstrap (versions, avantages…)

2. Système de grille
01- INTÉGRER BOOTSTRAP
Introduction au Bootstrap
C’est quoi Bootstrap ?

Bootstrap est un framework gratuit conçu pour permettre un développement plus rapide et plus facile des pages
web réactives
Bootstrap comprend des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les
boutons, les tableaux, la navigation, les images, …
Bootstrap 5 (sortie en 2021) est la dernière version de Bootstrap (première sortie en en 2013)
Bootstrap 5 propose de nouveaux composants, une feuille de style plus rapide et plus de réactivité. Il prend
également en charge les dernières versions stables des principaux navigateurs et plates-formes.
PARTIE 4
5
Avantages Bootstrap
• Facile à utiliser : par les développeurs ayant des connaissances de base en HTML et CSS.
• Fonctionnalités réactives : le CSS réactif de Bootstrap s'adapte aux différents médias (téléphones, tablettes et
ordinateurs de bureau).
• Approche mobile first : les styles mobile first font partie du framework de base.
• Compatibilité du navigateur : Bootstrap 5 est compatible avec tous les navigateurs modernes (Chrome,
Firefox, Edge, Safari et Opera).
PARTIE 4
6
Obtenir Bootstrap
Pour utiliser Bootstrap 5 sur le site Web, on peut :
• Inclure Bootstrap 5 à partir d'un CDN (Content Delivery Network).
• Téléchargez Bootstrap 5 sur getbootstrap.com et l’associer aux pages web comme une feuille de style CSS.
Bootstrap 5 à partir de CDN

Ajouter les liens suivants dans le <head> du document HTML. jsDelivr fournit un support CDN pour les CSS et JavaScript de
Bootstrap :


<link href="https
://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">


PARTIE 4
<script src="https ://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></

script>
7
CHAPITRE 1
INTÉGRER BOOTSTRAP
1. Introduction au Bootstrap (versions, avantages…)

2. Système de grille
Système de grille
Les conteneurs
Les conteneurs (containers) sont l'élément de mise en page le plus basique dans Bootstrap. Ils sont utilisés par le système de
grille (grid) par défaut.
Le rôle des conteneurs est de contenir, remplir et (parfois) centrer le contenu trouvé à leur intérieur.
Bien que les conteneurs puissent être imbriqués, la plupart des mises en page ne nécessitent pas de conteneur imbriqué [8]
Il existe deux classes de conteneurs disponibles :
• La classe .container fournit un conteneur de largeur fixe réactif.
• La classe .container-fluid fournit un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.
Exemple :
<div class="container"> <div class="container-fluid">

PARTIE 4
<h1>My First Bootstrap Page</h1> <h1>My First Bootstrap Page</h1>

<p>This is some text.</p> <p>This is some text.</p>
</div> </div>
9
Système de grille
Le padding du conteneur
Par défaut, les conteneurs ont un remplissage à gauche et à droite, sans remplissage en haut ou en bas. Par conséquent, les
utilitaires d'espacement tels que des marges et des marges supplémentaires sont utilisés pour leur mise en forme.
Par exemple, .pt-5 signifie "ajouter un grand padding supérieur" :
Exemple :
<div class="container pt-5"></div>
Bordure et couleur du conteneur

D'autres utilitaires, tels que les bordures et les couleurs, sont également souvent utilisés avec les conteneurs.
Exemple :
<div class="container p-5 my-5 border"></div>
PARTIE 4
<div class="container p-5 my-5 bg-dark text-white"></div>

<div class="container p-5 my-5 bg-primary text-white"></div>
10
Système de grille
Les conteneurs réactifs

Il s’agit des classes .container-sm|md|lg|xl
Le max-width du conteneur changera selon les différentes tailles d'écran/fenêtre :
Classe Super petit Petit Moyen Grand Extra large XXL

≥576 px 768 px ≥992 px ≥1200 px ≥1400 px
.container-sm 100 % 540 px 720 px 960 px 1140 px 1320 px
.container-md 100 % 100 % 720 px 960 px 1140 px 1320 px
.container-lg 100 % 100 % 100 % 960 px 1140 px 1320 px
.container-xl 100 % 100 % 100 % 100 % 1140 px 1320 px
PARTIE 4
.container-xxl 100 % 100 % 100 % 100 % 100 % 1320 px
11
Système de grille
Système de grille Bootstrap 5

Le système de grille de base de Bootstrap est conçu avec FlexBox et propose jusqu'à 12 colonnes sur la page.
Il est possible de regrouper les colonnes pour créer des colonnes plus larges :
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
Le système de grille est réactif et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran.
PARTIE 4
12
Système de grille
Les classes du Système de grille Bootstrap 5

Le système de grille Bootstrap 5 comporte six classes :
• .col- (très petits appareils - largeur d'écran inférieure à 576 px)
• .col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576 px)
• .col-md- (appareils moyens - largeur d'écran égale ou supérieure à 768 px)
• .col-lg- (grands appareils - largeur d'écran égale ou supérieure à 992 px)
• .col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1200 px)
• .col-xxl- (appareils xxlarge - largeur d'écran égale ou supérieure à 1400 px)

PARTIE 4
13
Système de grille
Exemple 1

<div class="row">
La première étoile (*) représente la réactivité : sm, md, lg,
<div class="col-*-*"></div>
xl ou xxl,
tandis que la deuxième étoile représente un nombre qui
</div>
doit totaliser 12 pour chaque ligne.
<div class="row">
</div>
Au lieu d'ajouter un nombre à chaque col, laissez

gérer la mise en page pour créer des colonnes
PARTIE 4
<div class="row"> de largeur égale.

<div class="col"></div>
</div>
14
Système de grille
Exemple 2 : Quatre colonnes de même largeur

L'exemple 2 montre comment créer quatre colonnes de largeur égale en commençant par les tablettes et en évoluant vers de grands bureaux. Sur les téléphones
portables ou les écrans de moins de 576 px de large, les colonnes s'empilent automatiquement les unes sur les autres :
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
</div>
Exemple 3 : Deux colonnes réactives inégales
L'exemple 3 montre comment obtenir deux colonnes de largeurs différentes en commençant par les tablettes et en évoluant vers les supports plus grands:
PARTIE 4
<div class="row">
</div>
15
CHAPITRE 2
MAITRISER LES CLASSES CSS DE BASE
• Gérer la typographie et les liens

• Mettre en place des tableaux
• Concevoir de formulaires et contrôles supportés
• Créer des boutons
10 heures
CHAPITRE 2
1. Typographie et liens
2. Tableaux
3. Éléments de formulaires et contrôles supportés
4. Boutons
02- MAITRISER LES CLASSES CSS DE BASE
Typographie et liens (texte/typographie)
Le texte avec Bootstarp

Bootstrap 5 utilise par défaut une valeur font-size de 1 rem (16 px par défaut) et sa valeur line-heightest de 1,5.
De plus, tous les éléments de type <p> ont un margin-top : 0 et un margin-bottom : 1 rem (16 px par défaut).
On peut également utiliser des classes .h1 et .h6 sur d'autres éléments les forcer à se comporter comme des titres:
<p class="h1">h1 Bootstrap heading</p>

PARTIE 4
18
Typographie et liens (texte/typographie)
La balise <mark>
L’élément .mark de Bootstrap 5 a pour effet une couleur de fond jaune.
<p>Utiliser l'élément mark (ou la classe .mark) pour <mark>mettre en évidence</mark>

text.</p>
La balise <abbr>
L’élément Bootstrap 5 <abbr> a pour effet une bordure en pointillé en bas et un curseur avec un point d'interrogation au survol :
<div class="container mt-3">

<h1>Abbreviations</h1>
<p>
L'élément abbr est utilisé pour baliser une abréviation ou un acronyme :</p>
PARTIE 4
<p>Le <abbr title="Java Script">JS</abbr> est un langage de programmation</p>

</div>
19
Typographie et liens (couleurs du texte)
Les couleurs du texte

Les classes pour les couleurs du texte sont : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-
danger, .text-secondary, .text-white, .text-dark, .text-body (couleur du corps par défaut, souvent noir) et .text-light :
<div class="conteneur mt-3"> On peut aussi ajouter 50 %

<h2>Couleurs contextuelles</h2> d'opacité pour le texte noir ou
<p class="text-muted">Ce texte est coupé.</p> blanc avec les classes .text-
<p class="text-primary">Ce texte est important.</p> black-50 ou .text-white-50.
<p class="text-success">Ce texte indique le succès.</p>
<p class="text-info">Ce texte représente une information.</p>
<p class="text-warning">Ce texte représente un avertissement.</p>
<p class="text-danger">Ce texte représente un danger.</p>
<p class="text-secondaire">Texte secondaire.</p>
<p class="text-dark">Ce texte est gris foncé.</p>
PARTIE 4
<p class="text-body">Couleur du corps par défaut (souvent noir).</p>

<p class="text-light">Ce texte est en gris clair (sur fond blanc).</p>
<p class="text-white">Ce texte est blanc (sur fond blanc).</p>
</div>
20
Typographie et liens (couleurs d'arrière-plan)
Les couleurs d’arrière plan

Les classes à utiliser pour les couleurs d'arrière-plan sont : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-darket .bg-light.
Remarque: les couleurs d'arrière-plan ne définissent pas la couleur du texte, on peut dans ce cas utiliser la classe .text-*.
<div class="conteneur mt-3">

<h2>Arrière-plans contextuels</h2>
<p>Notez que vous pouvez également ajouter une classe .text-* si vous souhaitez une couleur de texte
différente :</p>
<p class="bg-primary text-white">Ce texte est important.</p>
<p class="bg-success text-white">Ce texte indique le succès.</p>
<p class="bg-info text-white">Ce texte représente une information.</p>
<p class="bg-warning text-white">Ce texte représente un avertissement.</p>
<p class="bg-danger text-white">Ce texte représente un danger.</p>
PARTIE 4
<p class="bg- Secondary text-white">Couleur d'arrière-plan secondaire.</p>

<p class="bg-dark text-white">Couleur de fond gris foncé.</p>
<p class="bg-light text-dark">Couleur de fond gris clair.</p>
</div>
21
CHAPITRE 2
2. Tableaux
4. Boutons
Les tableaux
Les tableaux
Une table Bootstrap 5 de base a un padding léger et des séparateurs horizontaux. La classe .table ajoute un style
de base à une table : <table class="table">
<thead>
<tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Mohamed</td><td>KINANI</td><td>25</td></tr>
<tr><td>Laila</td><td>SAFIR</td><td>23</td></tr>
<tr><td>Sami</td><td>MANSOURI</td><td>24</td></tr>
</tbody>
</table>
PARTIE 4
Figure 57 : Exemple de table avec Bootstrap
23
Les tableaux
Les lignes rayées

<table class="table table-striped">
<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 58 : Exemple de lignes rayées avec Bootstrap
24
Les tableaux
Les bordures
<table class="table table-bordered">
<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 59 : Exemple de table avec bordure de lignes
25
Les tableaux
Survoler les lignes

La classe .table-hover ajoute un effet de survol (couleur de fond gris) sur les lignes du tableau :
<table class="table table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 60 : Exemple de table avec survol des ligens
26
Les tableaux
Tableau avec mode dark (foncé)

La classe .table-dark ajoute un fond noir au tableau :
<table class="table table-dark">

<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 61 : Exemple de table mode foncé
27
Les tableaux
Tableau à rayures foncées

Les classes .table-dark et .table-striped peuvent être combinées pour créer une table sombre et rayée :
<table class="table table-dark table-striped">

<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 62 : Exemple de tableau à rayures foncées

28
Les tableaux
Tableau sans bordure

<table class="table table-borderless">
<thead>
</thead>
<tbody>
</tbody>
</table>
PARTIE 4
Figure 63 : Exemple de tableau sans bordure
29
Les tableaux
Les classes contextuelles

Les classes contextuelles peuvent être utilisées pour colorer l'ensemble du tableau (<table>), les lignes du tableau
(<tr>) ou les cellules du tableau ( <td>).
Classe La description
.table-primary Bleu : indique une action importante
.table-success Vert : indique une action réussie ou positive
.table-danger Rouge : indique une action dangereuse ou potentiellement négative
.table-info Bleu clair : indique une action ou un changement informatif neutre
.table-warning Orange : indique un avertissement qui peut nécessiter votre attention
.table-active Gris : applique la couleur de survol à la ligne ou à la cellule du tableau
.table-secondary Gris : Indique une action un peu moins importante
PARTIE 4
.table-light Fond de table ou de rangée de table gris clair

.table-dark Fond de table ou de rangée de table gris foncé
30
Les tableaux
Les tableaux réactifs

La classe .table-responsive ajoute une barre de défilement au tableau en cas de besoin (si le tableau est grand
horizontalement) :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
On peut également décider quand le tableau doit avoir une barre de défilement en fonction de la largeur de
l'écran : Classe Largeur de l'écran
.table-responsive-sm < 576 px
PARTIE 4
.table-responsive-md < 768 px

.table-responsive-lg < 992 px
.table-responsive-xl < 1200 px
.table-responsive-xxl < 1400 px
31
Les images
Coins arrondis
La classe .rounded ajoute des coins arrondis à une image :
<img src="animal.jpg" class="rounded" alt="animaI">
Cercle
La classe .rounded-circle façonne l'image en cercle :
<img src="animal.jpg" class="rounded-circle" alt="animaI">
La vignette
PARTIE 4
La classe .img-thumbnail façonne l'image en une vignette :

<img src="animal.jpg" class="img-thumbnail" alt="animaI">
Figure 64 :coins arrondis
32
Les images
Alignement des images

Les classes .float-start et .float-end permettent de faire flotter une image à gauche ou à droite.
<img src="mosquee.jpg" class="float-start" alt="Mosquée <img src="mosquee.jpg" class="float-start" alt="Mosquée

Hassan II"> Hassan II">
Figure 66 : Alignement à droite

Figure 65 :Alignement à gauche
Image centrée
PARTIE 4
Centrer une image en ajoutant les classes utilitaires .mx-auto(margin :auto) et .d-block(display :block) à l'image :
<img src="mosquee.jpg" class="mx-auto d-block" alt="Mosquée Hassan II">
33
Les images
Les images réactives

Les images réactives s'ajustent automatiquement pour s'adapter à la taille de l'écran.
On peut créer des images responsives en ajoutant une classe .img-fluid à la la balise <img>. L'image s'adaptera alors à l'élément
parent.
La classe .img-fluid donne : max-width : 100 % et height : auto à l'image :
<img src="mosquee.jpg" class="img-fluid" alt="Mosquée Hassan II">

PARTIE 4
34
CHAPITRE 2
2. Tableaux
4. Boutons
Éléments de formulaires et contrôles supportés
La forme empilée
La classe .form-control permet aux éléments textuels <input> et <textarea> d’obtenir un style empilé dans un formulaire :
Figure 67 : forme empilée
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email :</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
PARTIE 4
<div class="form-check mb-3">

<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
36
Formulaire inline
Les classes .row et .col permettent aux éléments du formulaire d’apparaitre les uns à côté des autres:
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
PARTIE 4
Figure 68 : forme inline
37
Taille du contrôle de formulaire

On peut modifier la taille des entrées en utilisant .form-control avec .form-control-lg ou .form-control-sm :
<input type="text" class="form-control form-control-lg" placeholder="Large input">

<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">
PARTIE 4
Figure 69 : taille des contrôles
38
Contrôle désactivé et en lecture seule

Ls attributs disabled et/ou readonly permettent de désactiver le champ de saisie :
<input type="text" class="form-control" placeholder="Normal input">

<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>
Figure 70 : contrôles désactivés / en lecture seule

PARTIE 4
39
Les listes
Pour associer un style Bootstrap 5 à une liste de sélection, on utilise la classe .form-select à l'élément <select> :
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option> Figure 71 : Liste <select> avec choix unique
<option>4</option>
</select>
<select multiple class="form-select">

<option>1</option>
<option>2</option>
PARTIE 4
<option>3</option>
<option>4</option>
</select> Figure 72 : Liste <select> avec choix multiple
40
La taille de la liste <select>

La classe .form-select-lg ou .form-select-sm permet de modifier la taille de la liste:
<select class="form-select form-select-lg">

<select class="form-select">
<select class="form-select form-select-sm">
PARTIE 4
Figure 73 : Taille de la liste <select>
41
Les liste de données <datalist>

Bootstrap permet d’associer un style aux listes de données, qui sont une liste d'options prédéfinies pour un
élément <input> :
<label for="browser" class="form-label">Choose your browser from the
list :</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
PARTIE 4
Figure 74 : Style de dataList
42
Cases à cocher
La classe .form-switch avec le conteneur .form-check ajoute un style d’interrupteur à bascule pour une case à
cocher.
<div class="form-check form-switch">

<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes"
checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
Figure 75 : Style des cases à cocher

PARTIE 4
43
Validation du formulaire
<form action="/action_page.php" class="was-validated">

<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username :</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
PARTIE 4
<button type="submit" class="btn btn-primary">Submit</button>

</form>
Figure 76 : Validation des formulaires
44
CHAPITRE 2
2. Tableaux
4. Boutons
Les boutons
Styles de boutons
Bootstrap 5 propose différents styles de boutons. Les classes de boutons peuvent être utilisées sur les éléments <a>, <button>
ou <input>.
<button type="button" class="btn">De base</button>

<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-light">Léger</button>
<button type="button" class="btn btn-link">Relier</button>
PARTIE 4
Figure 77 : Styles de boutons
46
Les boutons
Contour du bouton
Bootstrap 5 fournit également huit types de contours des boutons :
<button type="button" class="btn btn-outline-primary">Primaire</button>

<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Avertissement</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<button type="button" class="btn btn-outline-light text-dark">Léger</button>
PARTIE 4
Figure 78 : Contour des boutons
47
CHAPITRE 3
UTILISER LES COMPOSANTS BOOTSTRAP
• Créer des barres de navigation et des menus

déroulants
• Mettre en place la pagination
• Réaliser des barres de progression et des cartes
10 heures
CHAPITRE 3
1. Barres de navigation
2. Menus déroulants
3. Pagination, badges et alertes
4. Barres de progression
5. Cartes (cards)
03- UTILISER LES COMPOSANTS BOOTSTRAP
Barres de navigation
Barre de navigation standard

La classe .navbar, suivie de la classe de .navbar-expand-xxl|xl|lg|md|sm permet de créer une barre de navigation standard
Les éléments de barre de navigation seront emplipés verticalement sur des écrans xx large, extra large, large, moyen ou petit).
Pour ajouter des liens dans la barre de navigation, on utilise un élément <ul> (ou un <div>) avec la class="navbar-nav".
Les éléments <li> avec une classe .nav-item suivis d'un élément <a> avec une classe .nav-link permettent de définir les options
de navigation:
<nav class="navbar navbar-expand-sm bg-light">

<div class="container-fluid">

<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
Figure 79 : Barre de navigation standard
PARTIE 4
</ul>
</div>
</nav>y
50
Barre de navigation verticale

Une barre de navigation verticale peut être obtenue en supprimant la classe .navbar-expand-* :

<nav class="navbar navbar-expand-sm bg-light"> Lien 1
<div class="container-fluid"> Lien 2
 Lien 3
<li class="nav-item"> Figure 80 : Barre de navigation verticale
<a class="nav-link" href="#">Lien 1</a>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
PARTIE 4

</li>
</ul>
</div>
</nav>
51
Barre de navigation centrée

La classe .justify-content-center permet centrer la barre de navigation :
<nav class="navbar navbar-expand-sm bg-light justify-

content-center">
...
</nav>
Figure 81 : Barre de navigation centrée

PARTIE 4
52
Barre de navigation coloriée

Les classes . navbar-light et navbar-dark permettent de colorer la barre de navigation :

<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
</nav>
PARTIE 4


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>


<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
53
CHAPITRE 3
5. Cartes (cards)
Les menus déroulants
Menu déroulant avec bouton simple
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false"> Menu déroulant <span class="caret"></span>
<button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" title="Lien 4">Lien 4></a></li>
</ul>
</div>
PARTIE 4
Figure 82 : Menu déroulant avec bouton simple
55
Les menus déroulants
Menu déroulant avec bouton divisé
<div class="btn-group">
<button type="button" class="btn btn-default">Menu déroulant</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li role="separator" class="divider"</li>
PARTIE 4
</ul>
</div>
Figure 83 : Menu déroulant avec bouton divisé
56
CHAPITRE 3
5. Cartes (cards)
Pagination, badges et alertes
Les alertes
Les alertes sont créées avec la classe .alert, suivie de l'une des classes contextuelles .alert-success, .alert-info, .alert-
warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightou .alert-dark :
<div class="alert alert-success">

<strong> Succès!</strong> Indique une action réussie ou positive.</div>
Succès ! Cette boîte d’alerte peut indiquer une action réussie ou positive.
Info ! Cette boîte d’alerte pourrait indiquer un changement ou une action informative
neutre.
Avertissement ! Cette boîte d’alerte peut indiquer un avertissement qui peut nécessiter
PARTIE 4
votre attention.
Figure 84 : Les alertes
58
Les liens d’alertes

La classe .alert-link, ajoutée aux liens à l'intérieur de la boite d'alerte, permet de créer des "liens de
couleur assortie" :
<div class="alert alert-success">

<strong> Succès!</strong> Vous deviez<a href="#" class="alert-link"> lire ce message</a>.
</div>
Succès ! Vous devriez lire ce message.
Info ! Vous devriez lire ce message.

PARTIE 4
Avertissement ! Vous devriez lire ce message.

Figure 85 : Liens d’alertes
59
Fermeture d’alertes
Pour fermer le message d'alerte, on utilise la classe .alert-dismissible au conteneur d'alerte.
Pour fermer l’alerte, utilisez les classes class="btn-close" et data-bs-dismiss="alert" à un lien ou à un élément de bouton.
<div class="alert alert-success alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Succès!</strong> Cette boite d'alerte peut indiquer une action réussie ou positive.
</div>
Figure 86 : fermeture d’alerte
Alertes animées
Les classes .fade et .show ajoutent un effet de décoloration lors de la fermeture du message d'alerte :
PARTIE 4
<div class="alert alert-danger alert-dismissible fade show">
60
Pagination
La pagination permet de structurer le contenu des pages (les résultats d’une opération de recherche par exemple)
Pour créer une pagination de base, ajouter la classe .pagination à un élément <ul>. Ajouter aussi la classe .page-item (associée
aux éléments <li>) et la classe .page-link associée à chaque lien à l'intérieur <li> :
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
PARTIE 4
Figure 87 : Pagination
61
Pagination (état actif)

La classe .active est utilisée pour « surligner » la page en cours :
<ul class="pagination">
<li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>
Figure 88 : état actif d’une pagination

PARTIE 4
62
Dimensionnement de la pagination
Les blocs de pagination peuvent également être dimensionnés à une taille plus grande ou plus petite.
Ajouter la classe .pagination-lg pour les grands blocs ou .pagination-sm pour les petits blocs.
<ul class="pagination pagination-lg">

<li class="page-item"><a class="page-link" href="#">Next</a></li> Figure 89 : dimensionnement d’une pagination
</ul>
<ul class="pagination pagination-sm">
PARTIE 4

</ul>
63
Alignement de la pagination
Les classes utilitaires permettent de modifier l'alignement de la pagination :

<ul class="pagination" style="margin :20px 0">
<li class="page-item">...</li>
</ul>

<ul class="pagination justify-content-center" style="margin :20px 0">
</ul>

<ul class="pagination justify-content-end" style="margin :20px 0">
</ul>
PARTIE 4
Figure 90 : Alignement d’une pagination
64
Breadcrumbs
Une autre forme de pagination est le fil d'Ariane :
Les classes .breadcrumb et .breadcrumb-item indiquent l'emplacement de la page actuelle dans une hiérarchie de
navigation :
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
PARTIE 4
65
Breadcrumbs
La classe .badge en combinaison avec une classe contextuelle (comme .bg-secondary) dans les éléments <span> permet de
créer des badges rectangulaires. Ces badges s'adaptent à la taille de l'élément parent :
<h1>Exemple<span class="badge bg-secondary">Nouveau</span></h1>

<span class="badge bg-primary">Primaire</span>
Badges contextuels <span class="badge bg-secondary">Secondaire</span>
Utilisation des classes contextuelles ( .bg-*) pour <span class="badge bg-success">Succès</span>
changer la couleur d'un badge : <span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Avertissement</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Léger</span>
<span class="badge bg-dark">Sombre</span>
PARTIE 4
Primaire Secondaire Succès Danger Avertissement Info Léger Sombre
Figure 91 : Breadcrumbs
66
CHAPITRE 3
5. Cartes (cards)
Barre de progression
Pour créer une barre de progression par défaut, on utilise la classe .progress à un élément conteneur et on ajoute la
classe .progress-bar à son élément enfant :
<div class="progress">
<div class="progress-bar" style="width :70%"></div>
</div>
Figure 92 : Barre de progression
Hauteur de la barre de progression
<div class="progress" style="height :20px">

<div class="progress-bar" style="width :40%;height :20px"></div>
</div>
PARTIE 4
Figure 93 : hauteur de la barre de progression
68
Étiquettes de barre de progression

Ajouter un texte à l'intérieur de la barre de progression pour afficher le pourcentage visible :
<div class="progress-bar" style="width :70%">70%</div>
</div>
70 %
Figure 94 : étiquette de la barre de progression
Barres de progression colorées


<div class="progress"><div class="progress-bar" style="width :10%"></div></div>

PARTIE 4
<div class="progress"><div class="progress-bar bg-success" style="width :20%"></div></div>


<div class="progress"><div class="progress-bar bg-info" style="width :30%"></div></div>

<div class="progress"><div class="progress-bar bg-warning" style="width :40%"></div></div>
69
Barre de progression rayée

La classe .progress-bar-striped permet d’ajouter des rayures aux barres de progression :
<div class="progress-bar progress-bar-striped" style="width
:40%"></div>
</div>
Figure 95 : barre de progression rayée
Barre de progression animée

<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width :40%"> </div>
PARTIE 4
70
CHAPITRE 3
5. Cartes (cards)
Cartes
Cartes
Une carte dans Bootstrap 5 est une boite bordée avec un peu de rembourrage autour de son contenu. Il comprend des options
pour les entêtes, les pieds de page, le contenu, les couleurs, etc.
Carte de base
Une carte de base est créée avec la classe .card et le contenu à l'intérieur de la carte a une classe .card-body :
<div class="card">
<div class="card-body">Carte de base</div>
</div>
Figure 96 : carte de base

PARTIE 4
72
Cartes
Entête et pied de carte

La classe .card-header ajoute une entête à la carte et la classe .card-footer ajoute un pied de page à la carte.
Pour ajouter une couleur d'arrière-plan à la carte, utilisez des classes contextuelles ( .bg-primary, .bg-success, .bg-
info, .bg˗warning, .bg-danger, .bg-secondary, .bg-darket, .bg-light).
<div class="card">
<div class="card-header">Entête</div>
<div class="card-body">Teneur</div>
<div class="card-footer">Base de page</div>
</div>
PARTIE 4
Figure 97 : entête et pieds de carte
73
Cartes
Titres, texte et liens des cartes

Pour ajouter des titres de carte à n'importe quel élément de titre on utilise la classe .card-title.
La classe .card-text est utilisée pour supprimer les marges inférieures d'un élément <p> s'il s'agit du dernier enfant (ou du
seul) à l'intérieur de .card-body. La classe .card-link ajoute une couleur bleue à n'importe quel lien et un effet de survol :
<div class="card">
<div class="card-body">
<h4 class="card-title">Titre de la carte</h4>
<p class="card-text">Quelques exemples de texte. Quelques exemples de texte.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
PARTIE 4
Figure 98 : titres, liens et texte des cartes
74
Cartes
Images des cartes

On utilise les classes .card-img-top ou .card-img-bottom avec une balise <img> pour placer l'image en haut ou en bas à
l'intérieur de la carte.
<div class="card" style="width :400px">

<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Sami LAMRINI</h4>
<p class="card-text">Quelques exemples de textes.</p>
<a href="#" class="btn btn-primary">Voir Profil</a>
</div>
</div>
PARTIE 4
75
Cartes
Superposition des images des cartes
Il est possible de transformer une image en arrière-plan de carte et utiliser la classe .card-img-overlay pour ajouter du texte au-
dessus de l'image :
<div class="card" style="width :500px">

<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Sami LAMRINI</h4>
<p class="card-text">Quelques exemples de textes.</p>
<a href="#" class="btn btn-primary">Voir Profil</a>
</div>
</div>
PARTIE 4
76

Partie 3 - Maîtriser Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

Partie 3 - Maîtriser Bootstrap

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Partie 3 - Maîtriser Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

Développement web front-end

Dans ce module, vous allez :

Ce que vous allez apprendre dans ce chapitre :

1. Introduction au Bootstrap (versions, avantages…)

C’est quoi Bootstrap ?

Bootstrap 5 à partir de CDN

<script src="https ://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></

1. Introduction au Bootstrap (versions, avantages…)

<div class="container"> <div class="container-fluid">

<h1>My First Bootstrap Page</h1> <h1>My First Bootstrap Page</h1>

Bordure et couleur du conteneur

<div class="container p-5 my-5 bg-dark text-white"></div>

Les conteneurs réactifs

Classe Super petit Petit Moyen Grand Extra large XXL

.container-xxl 100 % 100 % 100 % 100 % 100 % 1320 px

Système de grille Bootstrap 5

Les classes du Système de grille Bootstrap 5

• .col- (très petits appareils - largeur d'écran inférieure à 576 px)

• .col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576 px)

• .col-md- (appareils moyens - largeur d'écran égale ou supérieure à 768 px)

• .col-lg- (grands appareils - largeur d'écran égale ou supérieure à 992 px)

• .col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1200 px)

• .col-xxl- (appareils xxlarge - largeur d'écran égale ou supérieure à 1400 px)

<div class="row"> de largeur égale.

Exemple 2 : Quatre colonnes de même largeur

Exemple 3 : Deux colonnes réactives inégales

Ce que vous allez apprendre dans ce chapitre :

• Gérer la typographie et les liens

Typographie et liens (texte/typographie)

Le texte avec Bootstarp

<p class="h1">h1 Bootstrap heading</p>

Typographie et liens (texte/typographie)

<p>Utiliser l'élément mark (ou la classe .mark) pour <mark>mettre en évidence</mark>

<div class="container mt-3">

<p>Le <abbr title="Java Script">JS</abbr> est un langage de programmation</p>

Typographie et liens (couleurs du texte)

Les couleurs du texte

<div class="conteneur mt-3"> On peut aussi ajouter 50 %

<p class="text-body">Couleur du corps par défaut (souvent noir).</p>

Typographie et liens (couleurs d'arrière-plan)

Les couleurs d’arrière plan

<div class="conteneur mt-3">

<p class="bg- Secondary text-white">Couleur d'arrière-plan secondaire.</p>

Figure 57 : Exemple de table avec Bootstrap

Les lignes rayées

Figure 58 : Exemple de lignes rayées avec Bootstrap

Figure 59 : Exemple de table avec bordure de lignes

Survoler les lignes

Figure 60 : Exemple de table avec survol des ligens

Tableau avec mode dark (foncé)

<table class="table table-dark">

Figure 61 : Exemple de table mode foncé

Tableau à rayures foncées

<table class="table table-dark table-striped">

Figure 62 : Exemple de tableau à rayures foncées

Tableau sans bordure

Figure 63 : Exemple de tableau sans bordure