Cours Bootstrap 5

Bootstrap 5
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
[email protected]
H & H: Research and Training 1 / 76

Plan
1 Introduction
2 Intégration
3 Variables CSS
4 Couleurs
5 Breakpoint
6 Conteneur Bootstrap

Plan
7 Grille Bootstrap
col-{breakpoint}
col-*
row-cols-*
offset-* et offset-{breakpoint}-*
order-*

Plan
8 Alignement avec des propriétés de Flex

align-items
align-self
justify-content
align-content
9 Marges extérieure et intérieure
10 Autres classes Bootstrap
11 Autres frameworks CSS

Introduction
Bootstrap
Framework
Plusieurs traductions
cadriciel
H I ©
environnement de développement
UEL
O
cadre d’applications
f E LM
...
ch r e
©A
Ensemble de composants logiciels
Facilitant la réalisation d’une (partie de l’) application
Imposant une certaine structure, logique, syntaxe...

Introduction
Bootstrap
Plusieurs types de Framework
Frameworks applicatifs pour le développement d’applications web :
Angular pour JavaScript,

Spring pour Java,
H I ©
Symfony pour PHP
U EL
...
O
f E LM
Frameworks de présentation de contenu web :
ch r e
©A
Bootstrap pour CSS
...
Frameworks de persistance
Frameworks de logging
...

Introduction
Bootstrap
Bootstrap
Framework CSS
H I ©
UEL
Open source depuis 2012 O
f E LM
r e
Conçu par des développeurs Twitter Mark Otto et Jacob Thornton
ch
©A
Utilisant flexbox depuis la version 4 (float dans les versions
précédentes)

Introduction
Bootstrap
Documentation officielle
H I ©
EL
http://getbootstrap.com/
O U
f E LM
ch r e
©A

Introduction
Bootstrap
Documentation officielle
H I ©
EL
http://getbootstrap.com/
O U
f E LM
Documentation sur w3schools
ch r e
©A
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Introduction
Bootstrap
Framework : avantages
Gain de temps
H I ©
Meilleure organisation de projet
UEL
O
Respect de bonnes pratiques
f E LM
Meilleure efficacité
ch r e
©A
Faciliter le travail d’équipe
...

Introduction
Bootstrap
Bootstrap : inconvénients
H I ©
Similarité UEL
O
Apprentissage
f E LM
... ch r e
©A

Intégration
Bootstrap
Plusieurs façons différentes pour intégrer Bootstrap

H I ©
EL
en faisant référence à un fichier bootstrap.min.css, situé sur
U
O
le site de Bootstrap, dans la balise link (Content Delivery
Network : CDN)
f E LM
ch r e
en téléchargeant Bootstrap et en référençant
©A
bootstrap.min.css dans la balise style

Intégration
Bootstrap
Dans la suite, on va utiliser une CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5
.0.0-beta3/dist/css/bootstrap.min.css" rel="
stylesheet">
H I ©
UEL
O
f E LM
ch r e
©A

Intégration
Bootstrap
Dans la suite, on va utiliser une CDN

stylesheet">
H I ©
EL
M OU
E L peut aussi ajouter les deux
Pour des raisons de sécurité, on
f
attributs integrity etre
A c h crossorigin
©
stylesheet" integrity="sha384-eOJMYsd53ii+scO/
bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">

Intégration
Bootstrap
Explication
H I ©
crossorigin : pour autoriser ou interdire
U L origines
Edes
différentes.
L MO
integrity : contenant
r e f Evaleur de hachage d’une ressource et
la
permettant au c
A h de vérifier la source du fichier.
navigateur
©

Intégration
Bootstrap
Comment obtenir une valeur de hachage ?

H I ©
Aller à https://www.srihash.org/
UEL
O
f E LM
Saisir https://cdn.jsdelivr.net/npm/[email protected].
r e
0-beta3/dist/css/bootstrap.min.css
chla balise générée
A
Copier et utiliser
©

Intégration
Bootstrap
En utilisant une fausse valeur pour integrity, le résultat est
H I ©
UEL
O
f E LM
ch r e
©A

Intégration
Bootstrap
Pour utiliser les animations Bootstrap, il faut inclure
H I ©
EL
Une librairie JavaScript de Bootstrap.
Cette librairie nécessite :
M OU
f
Une librairie JavaScript E Lremplace la librairie jQuery des
qui
versions préch
c r e
édentes.
A
© : moteur de positionnement écrit en ES6
Popper

Intégration
Bootstrap
Avant la fermeture du body de la page HTML, on ajoute donc dans l’ordre les trois balises
script suivantes
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd
/popper.min.js" integrity="sha384-
SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
H I ©
U EL
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js
O
LM
/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+
Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
</script>
r e f E
ch
©A

Intégration
Bootstrap
Avant la fermeture du body de la page HTML, on ajoute donc dans l’ordre les trois balises
script suivantes
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd
/popper.min.js" integrity="sha384-
SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
H I ©
U EL
O
LM
/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+
Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
</script>
r e f E
ch
©A
Ou un bundle Bootstrap qui les remplace
/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+
pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="
anonymous"></script>

Intégration
Bootstrap
Quelques remarques
I ©
Bootstrap 5 nécessite la présence de l’indicateur DOCTYPE de
H
HTML 5.
UEL
O
f E LM
Pour garantir un affichage responsive, vérifiez la présence de
<meta name="viewport" ch r e
cette balise dans l’entête du document HTML :
©A
content="width=device-width, initial-scale=1">

Variables CSS
Bootstrap
Quelques variables CSS pour les couleurs
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
H I ©
EL
--bs-yellow: #ffc107;
--bs-green: #198754;
O U
LM
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
r e f E
ch
--bs-gray: #6c757d;
©A
--bs-gray-dark: #343a40;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;

Couleurs
Bootstrap
Classes Bootstrap pour les couleurs * peut être remplacé par
*-primary text pour colorier un texte
*-secondary
H I ©
bg pour colorier le fond
EL
*-success
M ObtnUpour colorier un bouton
*-info
f E L border pour colorier une bordure
ch r e ...
©A
*-warning
*-danger
*-light
*-dark

Couleurs
Bootstrap
Quelques classes CSS pour la couleur du texte

text-primary
H I ©
EL
text-secondary
text-success
O U
text-info
text-warning f E LM
text-danger
ch r e
text-light
text-dark
©A

Couleurs
Bootstrap
Exemple avec les boutons
H I ©
UEL
O
f E LM
ch r e
©A

Breakpoint
Bootstrap
Les constantes Bootstrap 5 relatives à la largeur : Breakpoints

xs : 0
H I ©
sm : 576px
UEL
O
md : 768px
f E LM
lg : 992px
ch r e
xl : 1200px ©A
xxl : 1400px

Conteneur Bootstrap
Bootstrap
Conteneur Bootstrap 5
Bootstrap fournit un ensemble de classes CSS pour la majorité des balises HTML.
Cependant, il utilise un élément conteneur pour envelopper le contenu du site.
Il propose trois types de classes conteneurs :

H I ©
container : fixe un max-width pour chaque
U EL breakpoint.
container-fluid : prend laM O de la page quelle que soit la
largeur
largeur de la page.
f E L
r e
chspécifié.
container-{breakpoint} : prend la largeur de la page jusqu’à
© A
le breakpoint

Conteneur Bootstrap
Bootstrap
Conteneur Bootstrap 5
Bootstrap fournit un ensemble de classes CSS pour la majorité des balises HTML.
Cependant, il utilise un élément conteneur pour envelopper le contenu du site.
Il propose trois types de classes conteneurs :

H I ©
container : fixe un max-width pour chaque
U EL breakpoint.
container-fluid : prend laM O de la page quelle que soit la
largeur
largeur de la page.
f E L
r e
chspécifié.
container-{breakpoint} : prend la largeur de la page jusqu’à
© A
le breakpoint
container container-fluid

Conteneur Bootstrap
Bootstrap
H I ©
UEL
O
f E LM
ch r e
©A
Source : Documentation officielle de Bootstrap

Conteneur Bootstrap
Bootstrap
Commençons par créer un fichier style.css ensuite le

référencer après Bootstrap dans index.html
H I ©
div {
UEL
O
border: 1px black solid;
text-align: center;
f E LM
ch
background-color: gainsboro; r e
}
©A

Conteneur Bootstrap
Bootstrap
Ajoutons les deux conteneurs suivants pour voir la différence entre container et
container-fluid
<div class=container>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
H I ©
EL
Aliquam velit cumque excepturi veniam! Quisquam est expedita rerum?
U
Nam ex, facilis voluptatum nostrum quis repudiandae doloremque,
O
LM
suscipit id, placeat aliquam distinctio.
</div>
r e f E
ch
<div class=container-fluid>
©A
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam velit cumque excepturi veniam! Quisquam est expedita rerum?
Nam ex, facilis voluptatum nostrum quis repudiandae doloremque,
suscipit id, placeat aliquam distinctio.
</div>

Grille Bootstrap
Bootstrap
Grille de Bootstrap (6= Grid)
H I ©
EL
Dans un conteneur Bootstrap, on peut déclarer plusieurs lignes
(row).
M OU
Chaque ligne est composEéeL
de 12 colonnes (col).
e f
A chr la nouvelle sous-ligne sera aussi composée
En cas d’imbrication,
©
de 12 colonnes.

Grille Bootstrap
Bootstrap
container
row
col col
. . .
H I ©
UEL
O
f E LM
ch r e
A
© row

Grille Bootstrap col-{breakpoint}
Bootstrap
Modifions le contenu du fichier style.css

H I ©
p {
U EL
O
text-align: center;
f E LM
r e
background-color: gainsboro;
ch
©A
}

Bootstrap
Si la largeur d’écran est supérieure à 768px, les paragraphes occupent
respectivement 6, 2 et colonnes. Sinon chaque paragraphe sera affiché
sur une nouvelle ligne.
<div class=row>
H I ©
<p class=col-md-6>
U EL
Bonjour
O
</p>
<p class=col-md-2>
f E LM
Bonjour
ch r e
</p>
©A
<p class=col-md-4>
Bonjour
</p>
</div>
</div>

Bootstrap
Des colonnes définies par rapport au type de média
col : très petits écrans de largeur inférieure à 576px.
H I ©
col-sm : petits écrans de largeur supérieure ou égale à 576px.
EL
OU
col-md : écrans de largeur supérieure ou égale à 768px.
M
f
col-lg : grands écrans E
de L supérieure ou égale à 992px.
largeur
e
chr écrans de largeur supérieure ou égale à
A
col-xl : très grands
1200px.©
col-xxl : très très grands écrans de largeur supérieure ou égale
à 1400px.

Bootstrap
Remarques
H I ©
Il est possible de combiner ces propriétésE
U L adapter l’affichage
pour
aux différents médias.
L MO
r e
En spécifiant seulement f E largeur pour sm, alors cette valeur
une
sera appliquéec
A h pour md, lg, xl et xxl.
aussi
©

Bootstrap
Exemple en combinant les classes
<div class=row>
<p class="col-md-6 col-lg-4">
Bonjour
</p>
H I ©
Bonjour
U EL
</p>
O
LM
Bonjour
</p>
r e f E
</div>
ch
©A
</div>

Bootstrap
Exemple en combinant les classes
<div class=row>
Bonjour
</p>
H I ©
Bonjour
U EL
</p>
O
LM
Bonjour
</p>
r e f E
</div>
ch
©A
</div>
Vérifiez que pour une largeur d’écran inférieure à 768px, les paragraphes s’affichent
verticalement.

Grille Bootstrap col-*
Bootstrap
Pour imposer un nombre de colonnes aux paragraphes quelle
que soit la largeur d’écran
<div class=row>
<p class=col-6>
H I ©
Bonjour
UEL
O
LM
</p>
<p class=col-2>
r e f E
ch
Bonjour
</p>
<p class=col-4> ©A
Bonjour
</p>
</div>
</div>

Bootstrap
Si le nombre total de colonnes est inférieur à 12, alors les
colonnes manquantes seront à gauche
<div class=row>
<p class=col-6>
H I ©
Bonjour
UEL
O
LM
</p>
<p class=col-2>
r e f E
ch
Bonjour
</p>
<p class=col-2> ©A
Bonjour
</p>
</div>
</div>

Bootstrap
Pour que tous les paragraphes aient la même largeur
<div class=row>
<p class=col>
H I ©
EL
Bonjour
</p>
O U
<p class=col>
Bonjour f E LM
</p>
ch r e
<p class=col>
Bonjour
©A
</p>
</div>
</div>

Bootstrap
Le deuxième div occupe 6 colonnes, le premier et le troisième
partagent l’espace restant
<div class="container">
<div class="row">
<p class="col">
H I ©
premier
UEL
O
LM
</p>
<p class="col-6">
r e f E
ch
deuxième
</p>
©A
<p class="col">
troisième
</p>
</div>
</div>

Grille Bootstrap row-cols-*
Bootstrap
On peut aussi indiquer le nombre de colonne à placer par ligne (chaque
paragraphe occupe 6 colonnes de la grille Bootstrap et a donc la classe
col-6)
<div class="row row-cols-2">
<p class="col">Bonjour</p>
H I ©
U EL
<p class="col">Bonjour</p> O
f E LM
</div>
ch r e
©A
</div>

Bootstrap
On peut aussi indiquer le nombre de colonne à placer par ligne (chaque
paragraphe occupe 6 colonnes de la grille Bootstrap et a donc la classe
col-6)
H I ©
U EL
f E LM
</div>
ch r e
©A
</div>
Bonjour Bonjour
Bonjour Bonjour

Bootstrap
Exemple 2 : chaque paragraphe occupe 4 colonnes de la grille
Bootstrap et a donc la classe col-4
H I ©
U EL
</div>
f E LM
</div>
ch r e
©A

Bootstrap
Exemple 2 : chaque paragraphe occupe 4 colonnes de la grille
Bootstrap et a donc la classe col-4
H I ©
U EL
</div>
f E LM
</div>
ch r e
©A
Bonjour Bonjour Bonjour
Bonjour

Bootstrap
Pour placer les paragraphes selon leurs contenus

<div class="row row-cols-auto">
H I ©
U EL
<p class="col">Bonjour tout le monde</p>
O
</div>
f E LM
</div>
ch r e
©A

Bootstrap

<div class="row row-cols-auto">
H I ©
U EL
<p class="col">Bonjour tout le monde</p>
O
</div>
f E LM
</div>
ch r e
©A
Bonjour Bonjour Bonjour tout le monde

Bootstrap
<p class="col-6">Bonjour</p>
H I ©
U EL
<p class="col-5">Bonjour</p> O
f E LM
</div>
ch r e
©A
</div>

Bootstrap
H I ©
U EL
<p class="col-5">Bonjour</p> O
f E LM
</div>
ch r e
©A
</div>
Bonjour Bonjour

Bootstrap
Si le paragraphe ne rentre pas dans l’espace restant, il sera à la ligne et l’espace
restant ne sera pas occupé
H I ©
<p class="col-5">Bonjour</p> U EL
O
LM
</div>
r e f E
ch
</div>
©A

Bootstrap
Si le paragraphe ne rentre pas dans l’espace restant, il sera à la ligne et l’espace
restant ne sera pas occupé
H I ©
<p class="col-5">Bonjour</p> U EL
O
LM
</div>
r e f E
ch
</div>
©A
Bonjour Bonjour

Grille Bootstrap offset-* et offset-{breakpoint}-*
Bootstrap
Pour placer un espace occupant une colonne, on utilise offset
<p class="offset-1 col-6">Bonjour</p>
H I ©
U EL
O
</div>
</div>
f E LM
ch r e
©A

Grille Bootstrap offset-* et offset-{breakpoint}-*
Bootstrap
Pour placer un espace occupant une colonne, on utilise offset
<p class="offset-1 col-6">Bonjour</p>
H I ©
U EL
O
</div>
</div>
f E LM
ch r e
©A
Bonjour Bonjour

Grille Bootstrap order-*
Bootstrap
On peut aussi indiquer l’ordre de nos paragraphes
<p class="col-4 order-2">Bonjour 1</p>
H I ©
<p class="col-3">Bonjour 3</p>
UEL
O
LM
<p class="col order-1">Bonjour 4</p>
</div>
r e f E
</div>
ch
©A

Grille Bootstrap order-*
Bootstrap
On peut aussi indiquer l’ordre de nos paragraphes
H I ©
<p class="col-3">Bonjour 3</p>
UEL
O
LM
<p class="col order-1">Bonjour 4</p>
</div>
r e f E
</div>
ch
©A
Bonjour 3 Bonjour 4 Bonjour 1 Bonjour 2

Alignement avec des propriétés de Flex
Bootstrap
Propriétés d’alignement
align-items : alignement vertical pour des boı̂tes flexibles

H I ©
EL
mono-ligne.
O
align-self : alignement vertical personnalisé pour chaqueU
boı̂te flexible.
f E LM
r e
ch : alignement horizontal.
A
justify-content
©
align-content : alignement vertical pour des boı̂tes flexibles
multi-lignes.

Alignement avec des propriétés de Flex
Bootstrap
Modifions le contenu du fichier style.css

div.row {
H I ©
height: 150px;
UEL
}
O
f E LM
div.col, div.col-4 {
ch r e
©A
text-align: center;
background-color: gainsboro;
}

Alignement avec des propriétés de Flex align-items
Bootstrap
Exemple avec la valeur stretch (par défaut) pour align-items
<div class="row align-items-stretch">
<div class="col">Bonjour</div>
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur stretch (par défaut) pour align-items
<div class="row align-items-stretch">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
© A Bonjour Bonjour Bonjour

Bootstrap
Exemple avec la valeur start pour align-items
<div class="row align-items-start">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur start pour align-items
<div class="row align-items-start">
H I ©
</div>
U EL
</div> O
f E LM
ch r e

Bootstrap
Exemple avec la valeur center pour align-items
<div class="row align-items-center">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur center pour align-items
<div class="row align-items-center">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur end pour align-items
<div class="row align-items-end">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur end pour align-items
<div class="row align-items-end">
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Alignement avec des propriétés de Flex align-self
Bootstrap
Exemple avec la valeur start, center et end pour align-self
<div class="row">
<div class="col align-self-start">Bonjour</div>
<div class="col align-self-center">Bonjour</div>
<div class="col align-self-end">Bonjour</div>
H I ©
</div>
U EL
</div> O
f E LM
ch r e
©A

Alignement avec des propriétés de Flex align-self
Bootstrap
Exemple avec la valeur start, center et end pour align-self
<div class="row">
<div class="col align-self-start">Bonjour</div>
<div class="col align-self-center">Bonjour</div>
<div class="col align-self-end">Bonjour</div>
H I ©
</div>
U EL
</div> O
f E LM
ch r e
© A Bonjour
Bonjour
Bonjour

Alignement avec des propriétés de Flex justify-content
Bootstrap
Exemple avec la valeur start (par défaut) pour justify-content

<div class="row justify-content-start">
<div class="col-4">Bonjour</div>
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur start (par défaut) pour justify-content

<div class="row justify-content-start">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Bootstrap
Exemple avec la valeur end pour justify-content

<div class="row justify-content-end">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur end pour justify-content

<div class="row justify-content-end">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Bootstrap
Exemple avec la valeur center pour justify-content

<div class="row justify-content-center">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur center pour justify-content

<div class="row justify-content-center">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Bootstrap
Exemple avec la valeur between pour justify-content

<div class="row justify-content-between">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur between pour justify-content

<div class="row justify-content-between">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Bootstrap
Exemple avec la valeur around pour justify-content

<div class="row justify-content-around">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur around pour justify-content

<div class="row justify-content-around">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Bootstrap
Exemple avec la valeur evenly pour justify-content

<div class="row justify-content-evenly">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A

Bootstrap
Exemple avec la valeur evenly pour justify-content

<div class="row justify-content-evenly">
H I ©
U EL
O
LM
</div>
</div>
r e f E
ch
©A
Bonjour Bonjour

Alignement avec des propriétés de Flex align-content
Bootstrap
Exemple avec la valeur start (par défaut) pour align-content
<div class="row align-content-start">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur start (par défaut) pour align-content
<div class="row align-content-start">
H I ©
EL
</div>
</div>
O U
f EBonjour LM
ch r e
Bonjour Bonjour
© A Bonjour

Bootstrap
Exemple avec la valeur end pour align-content
<div class="row align-content-end">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur end pour align-content
<div class="row align-content-end">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A
Bonjour

Bootstrap
Exemple avec la valeur center pour align-content
<div class="row align-content-center">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur center pour align-content
<div class="row align-content-center">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
Bonjour

Bootstrap
Exemple avec la valeur between pour align-content
<div class="row align-content-between">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur between pour align-content
<div class="row align-content-between">
H I ©
EL
</div>
</div>
O U
f EBonjour LM
ch r e
Bonjour Bonjour
©A
Bonjour

Bootstrap
Exemple avec la valeur around pour align-content
<div class="row align-content-around">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur around pour align-content
<div class="row align-content-around">
H I ©
EL
</div>
</div>
O U
f E LM
h r e
cBonjour Bonjour Bonjour
©A
Bonjour

Bootstrap
Exemple avec la valeur stretch pour align-content
<div class="row align-content-stretch">
H I ©
EL
</div>
</div>
O U
f E LM
ch r e
©A

Bootstrap
Exemple avec la valeur stretch pour align-content
<div class="row align-content-stretch">
H I ©
EL
</div>
</div>
O U
f EBonjour LM
ch r e
Bonjour Bonjour
©A
Bonjour

Marges extérieure et intérieure
Bootstrap
Deux types de marges H I ©

UEL
margin (marge extérieure) O
f E LM
padding (marge intérieure)
ch r e
©A

Bootstrap
Marge extérieure (margin) : espace entre les boites
Signification Classes Bootstrap

marge m-{size} et m-{breakpoint}-{size}
marge en haut mt-{size} et mt-{breakpoint}-{size}
marge en bas I ©
mb-{size} et mb-{breakpoint}-{size}
H
marge à gauche pour LTR
EL
ms-{size} et ms-{breakpoint}-{size}
U
marge à droite pour RTL (s pour start)
O
marge à droite pour LTR
marge à gauche pour RTL
f E (e pour end) LM
me-{size} et me-{breakpoint}-{size}
marge à droite et à gauche

ch r e mx-{size} et mx-{breakpoint}-{size}
©A
marge en hat en bas my-{size} et my-{breakpoint}-{size}

Bootstrap
Marge extérieure (margin) : espace entre les boites

marge m-{size} et m-{breakpoint}-{size}
marge en haut mt-{size} et mt-{breakpoint}-{size}
marge en bas I ©
mb-{size} et mb-{breakpoint}-{size}
H
EL
ms-{size} et ms-{breakpoint}-{size}
U
marge à droite pour RTL (s pour start)
O
marge à droite pour LTR
f E (e pour end) LM
me-{size} et me-{breakpoint}-{size}

ch r e mx-{size} et mx-{breakpoint}-{size}
©A
marge en hat en bas my-{size} et my-{breakpoint}-{size}
RTL (right to left) : si la langue du contenu s’écrit de droite à gauche.
LTR (left to right) : si la langue du contenu s’écrit de gauche à droite.

Bootstrap
Marge intérieure (padding) : espace entre le contenu et la limite de la boite

H I ©
EL
marge p-{size} et p-{breakpoint}-{size}
marge en haut
U
pt-{size} et pt-{breakpoint}-{size}
O
LM
marge en bas pb-{size} et pb-{breakpoint}-{size}
marge à droite pour RTL
r e f E ps-{size} et ps-{breakpoint}-{size}
(s pour start)
marge à droite pour LTR ch pe-{size} et pe-{breakpoint}-{size}
©A
(e pour end)
px-{size} et px-{breakpoint}-{size}
marge en hat en bas py-{size} et py-{breakpoint}-{size}

Bootstrap
Valeurs de la constante size
Valeur Effet
H I ©
0 affecte margin ou padding à 0
UEL
1
O
affecte margin ou padding à .25rem (4px si font-size est 16px)
2
LM
affecte margin ou padding à .5rem (8px si font-size est 16px)
f E
3
4
ch r e
affecte margin ou padding à 1rem (16px si font-size est 16px)
affecte margin ou padding à 1.5rem (24px si font-size est 16px)
5
auto ©A
affecte margin ou padding à 3rem (48px si font-size est 16px)
affecte margin à auto

Autres classes Bootstrap
Bootstrap
Classes Bootstrap 5 : dimension

width : w-25, w-50, w-75, w-100, w-auto et vw-100
H I ©
height : h-25, h-50, h-75, h-100, h-auto et vh-100
UEL
O
f E LM
ch r e
©A

Bootstrap
Classes Bootstrap 5 : dimension

width : w-25, w-50, w-75, w-100, w-auto et vw-100
H I ©
height : h-25, h-50, h-75, h-100, h-auto et vh-100
UEL
O
f E LM
r e
c5h: affichage
A
Classes Bootstrap
©
Classes : d-{valeur} et d-{breakpoint}-{valeur}
Valeurs = none, inline, block, inline-block...

Bootstrap
Classes Bootstrap 5 : dépassement
Classes : overflow-{valeur}
H I ©
Valeurs = auto, visible, hidden et scroll
UEL
O
f E LM
ch r e
©A

Bootstrap
Classes Bootstrap 5 : dépassement
Classes : overflow-{valeur}
H I ©
Valeurs = auto, visible, hidden et scroll
UEL
O
f E LM
Classes Bootstrapc5h
r e
© A : position
Classes : position-{valeur}
Valeurs = static, relative, absolute, fixed et sticky

Bootstrap
Classes Bootstrap 5 : visibilité
visible
invisible
H I ©
UEL
O
f E LM
ch r e
©A

Bootstrap
Classes Bootstrap 5 : visibilité
visible
invisible
H I ©
UEL
O
Classes Bootstrap 5 : bordure
f E LM
ch r e
©A
Couleur : border-{couleur}
Épaisseur : border-{valeur} avec valeur = 1, 2, 3, 4 ou 5
Coté : border, border-end, border-start, border-top et border-bottom
Arrondi : rounded, rounded-end, rounded-start, rounded-top,

rounded-bottom, rounded-circle et rounded-pill

Classes Bootstrap 5 : alignement horizontale du texte
Classes : text-{valeur}
Valeurs = start, end et center
H I ©
UEL
O
f E LM
ch r e
©A

H I ©
Classes Bootstrap 5 : alignement vertical du texte
UEL
O
LM
Classes : align-{valeur}
e f
Valeurs = bottom, top et middle
r E
ch
©A

H I ©
Classes Bootstrap 5 : alignement vertical du texte
UEL
O
LM
Classes : align-{valeur}
e f
Valeurs = bottom, top et middle
r E
ch
©A
Classes Bootstrap 5 : conversion du texte
Valeurs = lowercase, uppercase et capitalize

Bootstrap
Classes Bootstrap 5 : titre
Classes : h{valeur}
H I ©
Valeurs = 1, 2, 3, 4, 5 et 6
UEL
O
f E LM
ch r e
©A

Bootstrap
Classes Bootstrap 5 : titre
Classes : h{valeur}
H I ©
Valeurs = 1, 2, 3, 4, 5 et 6
UEL
O
f E LM
Classes Bootstrapc5h
r e
© A : font-size
Classes : fs-{valeur}
Valeurs = 1, 2, 3, 4, 5 et 6

CSS : Cascading Style Sheets
Équivalent en pixels
fs-1 et h1 : par défaut 40px

H I ©
UEL
fs-3 et h3 : par défaut 28px L M
O
r e f E
fs-4 et h4 : parc
A h
défaut 24px
©

Classes Bootstrap 5 : font-weight
Classes : fw-{valeur}
Valeurs = normal, bold, bolder, light et lighter
H I ©
UEL
O
f E LM
ch r e
©A

H I ©
Classes Bootstrap 5 : font-style
UEL
O
LM
Classes : fst-{valeur}
Valeurs = italic et normal

r e f E
ch
©A

H I ©
Classes Bootstrap 5 : font-style
UEL
O
LM
Classes : fst-{valeur}
Valeurs = italic et normal

r e f E
ch
©A
Classes Bootstrap 5 : text-decoration
Classes : text-decoration-{valeur}
Valeurs = underline, line-through et none

Autres frameworks CSS
Bootstrap
Autres frameworks CSS

Semantic UI : https://semantic-ui.com/
Foundation : https://foundation.zurb.com/ H I ©
UEL
Bulma : https://bulma.io/ O
f E LM
ch r e
UIKit : https://getuikit.com/
©A
Material UI : http://www.material-ui.com/#/
KNACSS : https://knacss.com/
...

Cours Bootstrap 5

Transféré par

Droits d'auteur :

Formats disponibles

Cours Bootstrap 5

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

Cours Bootstrap 5

Transféré par

Droits d'auteur :

Formats disponibles

Bootstrap 5

Docteur de l’université d’Aix-Marseille

H & H: Research and Training 1 / 76

H & H: Research and Training 2 / 76

H & H: Research and Training 3 / 76

8 Alignement avec des propriétés de Flex

9 Marges extérieure et intérieure

10 Autres classes Bootstrap

11 Autres frameworks CSS

H & H: Research and Training 4 / 76

H & H: Research and Training 5 / 76

Frameworks applicatifs pour le développement d’applications web :

Angular pour JavaScript,

H & H: Research and Training 6 / 76

H & H: Research and Training 7 / 76

H & H: Research and Training 8 / 76

H & H: Research and Training 8 / 76

H & H: Research and Training 9 / 76

H & H: Research and Training 10 / 76

Plusieurs façons différentes pour intégrer Bootstrap

H & H: Research and Training 11 / 76

Dans la suite, on va utiliser une CDN

H & H: Research and Training 12 / 76

Dans la suite, on va utiliser une CDN

H & H: Research and Training 12 / 76

H & H: Research and Training 13 / 76

Comment obtenir une valeur de hachage ?

H & H: Research and Training 14 / 76

En utilisant une fausse valeur pour integrity, le résultat est

H & H: Research and Training 15 / 76

Pour utiliser les animations Bootstrap, il faut inclure

H & H: Research and Training 16 / 76

H & H: Research and Training 17 / 76

H & H: Research and Training 17 / 76

H & H: Research and Training 18 / 76

H & H: Research and Training 19 / 76

Classes Bootstrap pour les couleurs * peut être remplacé par

*-primary text pour colorier un texte

H & H: Research and Training 20 / 76

Quelques classes CSS pour la couleur du texte

H & H: Research and Training 21 / 76

H & H: Research and Training 22 / 76

Les constantes Bootstrap 5 relatives à la largeur : Breakpoints

H & H: Research and Training 23 / 76

Cependant, il utilise un élément conteneur pour envelopper le contenu du site.

Il propose trois types de classes conteneurs :

H & H: Research and Training 24 / 76

Cependant, il utilise un élément conteneur pour envelopper le contenu du site.

Il propose trois types de classes conteneurs :

H & H: Research and Training 24 / 76

Source : Documentation officielle de Bootstrap

Commençons par créer un fichier style.css ensuite le

H & H: Research and Training 26 / 76

H & H: Research and Training 27 / 76

Grille de Bootstrap (6= Grid)

H & H: Research and Training 28 / 76

H & H: Research and Training 29 / 76

Modifions le contenu du fichier style.css

H & H: Research and Training 30 / 76