4 Bootstrap

ROYAUME DU MAROC
‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE : Développer des sites Web statiques
DÉVELOPPER DES SITES WEB STATIQUES
2021-2022
Introduction
Bootstrap est un framework CSS. Un framework correspond à un ensemble de
librairies regroupées dans un but précis et possédant des règles internes que doivent
suivre les utilisateurs.
En d’autres termes, et pour le dire très simplement, Bootstrap est un ensemble de
fichiers CSS et JavaScript fonctionnant ensemble et qu’on va pouvoir l’utiliser pour
créer des design complexes de manière relativement simple.
Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui
contiennent des règles prédéfinies. Ces ensembles de règles sont enfermés dans des
classes et nous n’aurons donc qu’à utiliser les classes qui nous intéressent afin
d’appliquer un ensemble de styles à tel ou tel élément HTML.
Avantages
Bootstrap possède trois grands avantages notables par rapport aux autres solutions à
notre portée qui se limitent concrètement à écrire tout son code soi-même ou à avoir
recours à un autre framework ou librairie CSS.
Ces avantages sont :
Un gain de temps de développement qui peut être conséquent ;
Une certaine robustesse dans l’architecture globale du code ;
Un framework appartenant à une grande société (Twitter).

Intégration de Bootstrap
Bootstrap est un framework, c’est-à-dire un ensemble de fichiers. Pour utiliser
Bootstrap, nous allons donc simplement devoir utiliser ces fichiers. On va pouvoir
faire cela de deux façons. On peut :
Télécharger les fichiers Bootstrap (CSS et JavaScript) sur le
site https://getbootstrap.com/ puis les lier à nos fichiers HTML comme n’importe
quel autre fichier CSS et JavaScript ;
Utiliser un CDN (Content Delivery Network ou réseau de distribution de contenu) et
inclure le lien vers les fichiers dans nos fichiers HTML.

Système de grilles de Bootstrap
Bootstrap utilise un système de « grille » à 12 colonnes de base reposant sur le
modèle des boites flexibles (flexbox) comme système de disposition principal.
Pour utiliser ce système de grilles Bootstrap, nous allons avant tout devoir définir un
élément conteneur dans notre page HTML auquel on passera un
attribut class="container" ou class="container-fluid".

La classe .container va permettre de définir un conteneur adaptable ou « responsive »
de taille fixe, ce qui signifie que notre conteneur aura toujours la même taille pour un
breakpoint donné et changera de taille à chaque breakpoint.
La largeur d’un conteneur défini avec .container va être la suivante entre chaque
breakpoint :
La classe .container-fluid permet de définir un conteneur de taille fluide, c’est-à-dire
un conteneur dont la taille va changer en même temps que celle de la fenêtre de vos
visiteurs. Un conteneur défini avec .container-fluid occupera toujours 100% de la
largeur disponible.
Regardez plutôt les exemples ci-dessous pour bien comprendre comment fonctionnent
les classes .container et .container-fluid.

Les règles générales de structure des grilles Bootstrap:
Lorsqu’on utilise Bootstrap avec nos fichiers HTML, on commencera toujours par
définir un ou plusieurs conteneurs avec les classes .container ou .container-
fluid dans lesquels on placera le reste de notre contenu HTML. Ces conteneurs, qui
seront généralement des éléments div ou des éléments HTML structurants.
Pour définir une nouvelle ligne de grille, on va utiliser la classe .row.
Dans le système de grille de Bootstrap, les lignes doivent absolument être placées
dans des conteneurs et ne sont utilisées que dans le but de servir elles-mêmes de
conteneurs pour les colonnes de la grille.
Pour chaque nouvelle ligne, on va pouvoir décider du nombre de colonnes dont la
ligne va disposer à partir des 12 de base grâce à des classes .col-*. Ici, il est important
de bien comprendre que les grilles Bootstrap disposent automatiquement toujours de
12 colonnes de base qui sont définies implicitement. On va ensuite pouvoir « grouper
» certaines de ces 12 colonnes de base ensemble dans chaque ligne pour former de
nouvelles colonnes personnalisées.
Les règles évoquée ci-dessus se comprend bien lorsqu’on regarde de plus près les
propriétés CSS attachées aux classes .row et .col et notamment les styles suivants :
Créer des colonnes dans les grilles
Bootstrap et gérer leur taille
Création d’une grille avec des colonnes de même largeur
Pour créer une grille, il suffit de définir un élément conteneur en passant l’une des
classes .container ou .container-fluid à un élément HTML puis de définir une ligne
en passant une classe .row à un autre élément dans le conteneur. On va ensuite
pouvoir personnaliser nos lignes et notamment créer des colonnes personnalisées
grâce aux classes de type .col-*.
Commençons par créer une grille très simple avec une ligne et trois colonnes qui vont
occuper la même largeur. La classe .col permet de définir des colonnes personnalisées
pour une ligne sans indiquer de taille explicite pour ces colonnes.
Création d’une grille avec des colonnes de tailles différentes
On va pouvoir faire cela en indiquant le nombre de colonnes de base que doit occuper
chaque colonne qu’on va créer dans la ligne.
Pour indiquer explicitement le nombre de colonnes de base que doivent occuper nos
colonnes personnalisées, nous allons plutôt utiliser les classes .col-1, .col-2… .col-12.
En passant une classe .col-1 à un élément, on indique qu’on souhaite créer une
colonne d’une taille équivalente à celle d’une colonne de base des grilles
Bootstrap. En passant .col-2 on va créer une colonne qui va occuper l’espace de deux
colonnes de base et etc.

Bien évidemment, une ligne ne peut pas par définition contenir plus de 12 colonnes
puisque nos colonnes personnalisées sont construites à partir des 12 colonnes de base
des grilles Bootstrap.
Dans le cas où on essaie de créer des colonnes dans une ligne en utilisant plus de 12
colonnes de base, alors les colonnes personnalisées ne rentrant pas dans la ligne iront
se positionner en dessous des précédentes.

Notez qu’il est tout à fait possible d’utiliser un mélange d’éléments
utilisant .col et .col-1, .col-2… .col-12 dans une même ligne. Dans ce cas-là, les
colonnes créées dont la taille est explicitement mentionnée occuperont l’espace en
premier puis l’espace restant sera distribué entre les colonnes définies avec la
classe .col.
Modifier la disposition des colonnes en fonction des écrans : le responsive
On pourra vouloir qu’un élément occupe une largeur égale à 3 colonnes de base pour
un grand écran puis à 6 colonnes pour une taille d’écran 2 fois plus petite par exemple
afin que la taille effective de l’élément ne soit pas modifiée
Pour faire cela, on va pouvoir utiliser les classes .col-sm, .col-md, .col-lg et .col-xl en
plus de .col.
Ces classes sont liées aux breakpoints définis par Bootstrap. L’idée ici est très simple :
selon la taille de la fenêtre, les styles d’une classe vont être appliqués prioritairement
par rapport à ceux des autres.

Ces classes vont s’appliquer pour les tailles de fenêtre suivantes :
Exemple :
On passe ici des classes .col-md-* à nos éléments de ligne. Cela signifie qu’on crée
des colonnes personnalisées bien pour un affichage dans des fenêtres de taille
supérieure à 768px. Pour ces fenêtres là, la deuxième colonne personnalisée
occupera 6 colonnes de base et les 6 colonnes restantes seront réparties équitablement
entre la 1ère et la 3ème colonne de la ligne. Pour des fenêtres de taille inférieure à
768px, en revanche, aucune taille ni comportement n’a été explicitement définie pour
nos colonnes personnalisées. Pour ces tailles de fenêtre, chaque colonne personnalisée
occupera donc par défaut tout l’espace disponible dans la ligne ce qui signifie que
chaque colonne poussera les suivantes à la ligne.

En revanche, si maintenant on attribue deux classes .col-sm- et .col-lg- par exemple
pour définir nos colonnes, alors la taille de ces colonnes (le nombre de colonnes de
base occupées par chacune d’entre elles) sera définie par la classe .col-sm- pour les
écrans de taille supérieure à 576px jusqu’au breakpoint de 992px où c’est la
classe .col-lg- qui va être prioritaire et indiquer les nouvelles dimensions des
colonnes.
Définir automatiquement la largeur des colonnes en fonction de leur contenu
Si on souhaite que la place prise par les colonnes créées soit calculée
automatiquement en fonction de leur contenu, on peut également utiliser les
classes .col-{breakpoint}-auto plutôt que d’utiliser des classes avec des numéros.
Gérer l’alignement et l’espacement
des colonnes des grilles Bootstrap
Gérer l’alignement vertical des colonnes dans une ligne
Par défaut, les colonnes vont occuper toute la hauteur d’une ligne. On va cependant
pouvoir demander aux colonnes de n’occuper que la place nécessaire à leur contenu et
de s’aligner soit au début, soit au milieu, soit en fin de ligne selon l’axe vertical.
Bootstrap va nous fournir deux grandes façons d’aligner nos colonnes verticalement
dans une ligne :
nous allons soit pouvoir aligner toutes les colonnes en même temps,
soit pouvoir aligner les colonnes une par une de manière différente.
Pour aligner toutes les colonnes en même temps par rapport à une ligne, nous allons
appliquer les classes .align-items-* à nos lignes. Nous pouvons choisir parmi trois
classes qui représentent trois positions différentes :
.align-items-start : les colonnes seront alignées en début (en haut) de la ligne ;
.align-items-center : les colonnes vont être alignées au centre de la ligne ;
.align-items-end : les colonnes seront alignées en fin (en bas) de la ligne.

Pour aligner chaque colonne individuellement, nous allons cette fois-ci plutôt utiliser
les classes .align-self-* qu’on va utiliser avec chaque élément cette fois-ci. Là encore,
nous pouvons choisir parmi trois classes :
.align-self-start : la colonne sera alignée en début (en haut) de la ligne ;
.align-self-center : la colonne va être alignée au centre de la ligne ;
.align-self-end : la colonne sera alignée en fin (en bas) de la ligne.

Gérer l’alignement horizontal des colonnes dans une ligne
On va principalement vouloir aligner horizontalement des colonnes dans une ligne
dans le cas où les colonnes créées n’occupent pas tout l’espace de la ligne, c’est-à-
dire dans le cas où il reste de l’espace à distribuer entre les colonnes. Cela va être le
cas si on utilise des classes .col-{nombre} pour chaque colonne de la ligne et que la
somme des nombres fait moins de 12.
On va pouvoir aligner horizontalement nos colonne dans la ligne grâce aux
classes .justify-content-* qu’on va devoir appliquer à la ligne en soi. Nous allons
pouvoir utiliser les classes suivantes :

.justify-content-start : les colonnes vont se positionner en début de ligne ;
.justify-content-center : les colonnes vont se positionner au milieu de la ligne ;
.justify-content-end : les colonnes vont se positionner en fin de ligne ;
.justify-content-around : les colonnes vont être réparties équitablement dans la ligne.
Chaque colonne va posséder le même écart à droite et à gauche, même celles situées
contre les bords de la ligne;
.justify-content-between : les colonnes vont être réparties équitablement dans la
ligne. La première colonne va être collée contre le début de la ligne et la dernière va
être collée contre la fin de celle-ci.

La normalisation des styles des
éléments HTML
Styles généraux de la page
Tous les éléments reçoivent par défaut un box-sizing : border-box, le box-sizing :
border-box permet de s’assurer qu’un élément ne dépasse jamais sa taille déclarée
avec width et height puisque le padding et border sont alors intégrés dans le calcul de
la taille de l’élément.
Ils ont également définit quelques styles dans le sélecteur body et notamment la
famille, la taille et l’épaisseur de la police +
la taille des interlignes + l’alignement et la couleur du texte + une couleur de fond +
des marges externes comme ceci :

éléments HTML
éléments HTML
Les styles des paragraphes et des titres
Les paragraphes et les titres ont une marge externe haute nulle et des marges externes
basses respectivement égales à 1rem et 0.5rem.

éléments HTML
Bootstrap ne définit pas de taille de police pour les titres et les paragraphes. La
plupart des navigateurs appliquent une taille de 1rem pour les paragraphes et les
tailles suivantes pour les titres :
• h1 : font-size : 2.5rem, c’est-à-dire 2,5 * 16px = 40px par défaut ;
• h2 : font-size : 2rem ou 32px par défaut ;
• h3 : font-size : 1.75rem ou 28px par défaut ;
• h6 : font-size : 1rem soit 16px par défaut.

éléments HTML
Les styles des liens
Dans leur état de base, les liens ont une couleur bleu clair et ne possède pas de trait de
soulignement (text-decoration : none).
Au survol (:hover), la couleur change vers un bleu plus foncé et un trait de
soulignement de même couleur apparait.

éléments HTML
Les styles des listes
Les listes ont également une marge externe haute nulle. La taille de la marge externe
basse est fixée à 1rem sauf dans le cas de listes imbriquées auquel cas la marge
externe basse des listes imbriquées sera nulle.

Les classes CSS de base
Les classes .display-1, .display-2, .display-3 et .display-4 permettent de faire
ressortir visuellement un titre par rapport au reste du contenu. On va pouvoir
appliquer ces classes à nos éléments h afin de les styliser davantage.
Pour faire ressortir visuellement un paragraphe, on utilisera plutôt la classe .lead.
Enfin, Bootstrap met à notre disposition les classes .h1, .h2… .h6 qui vont nous
permettre d’appliquer des styles similaires aux titres à n’importe quel autre contenu
textuel.
Modifier le poids d’une police
Pour modifier le poids d’une police, c’est-à-dire son épaisseur, on va pouvoir utiliser
l’une des classes suivantes :
.fw-lighter pour obtenir un texte très fin ;
.fw-light pour obtenir un texte fin ;
.fw-normal pour obtenir un texte normal ;
.fw-bold pour obtenir un texte épais ;
.fw-bolder pour obtenir un texte très épais.

Notez que les classes .fw-lighter et .fw-bolder vont modifier l’épaisseur de la police
de l’élément relativement à celle de son parent.
Pour qu’un texte s’affiche en italique, on peut utiliser la classe .fst-italic.
Modifier la casse des textes
Bootstrap nous fournit 3 classes permettant de modifier la casse de nos textes :
La classe .text-lowercase fera qu’un texte s’affiche en minuscules ;
La classe .text-uppercase fera qu’un texte s’affiche en majuscules ;
La classe .text-capitalize ne va transformer que la première lettre de chaque mot
pour la mettre en majuscules.

Aligner un texte dans son élément parent
Bootstrap nous fournit différentes classes nous permettant d’aligner un texte à droite,
au centre, à gauche ou de le justifier. Les classes d’alignement de base sont les
suivantes :
.text-start va aligner un texte à gauche ;
.text-center va centrer un texte ;
.text-end va aligner un texte à droite ;

Nous allons également pouvoir gérer l’alignement de nos textes de façon responsive,
c’est-à-dire en leur donnant des ordres d’alignement différents en fonctions des
différentes tailles de fenêtres de nos visiteurs.
Pour cela, nous allons devoir ajouter les préfixes connus -sm-, -md-, -lg- et -xl- à nos
classes ci-dessus.
Notez cependant que l’utilisation de classes responsive d’alignement n’est possible
que pour des alignements à gauche, au milieu et à droite mais pas pour un alignement
justifié.
Couleur et opacité des textes
Les classes Bootstrap nous permettant de modifier la couleur des textes sont les
suivantes : .text-light : texte gris clair ;
.text-primary : texte bleu ; .text-dark : texte gris foncé ;
.text-secondary : texte gris-bleu ; .text-body : texte noir ;
.text-success : texte vert ; .text-muted : texte gris ;
.text-danger : texte rouge ; .text-white : texte blanc ;
.text-warning : texte jaune ; .text-black-50 : texte noir semi transparent ;
.text-info : nuance de bleu ; .text-white-50 : texte blanc semi transparent

Modifier couleur de fond d’un élément
Nous allons pouvoir modifier la couleur de fond de nos éléments en utilisant le même
système de « couleurs contextuelles » fourni par Bootstrap que pour nos textes.
La seule différence est que nous allons cette fois-ci utiliser le préfixe .bg- (pour
background) plutôt que .text-.
Définir la taille d’un élément relativement à celle de son parent
Bootstrap va déjà nous permettre de définir la taille de nos éléments en fonction de
celle de leur parent.

Pour modifier la largeur d’un élément, on va pouvoir utiliser les classes suivantes :
.w-25 : l’élément a une largeur égale à 25% de celle de son parent ;
.w-100 : l’élément a une largeur égale à celle de son parent ;
.w-auto : la largeur de l’élément est définie automatiquement.
Pour modifier la hauteur d’un élément, on utilisera les classes suivantes :
.h-25 : l’élément a une hauteur égale à 25% de celle de son parent ;

.h-100 : l’élément a une hauteur égale à celle de son parent ;
.h-auto : la hauteur de l’élément est définie automatiquement.
Définir la taille d’un élément relativement au viewport
Bootstrap nous permet encore de définir la taille de nos éléments en fonction du
viewport. Le viewport correspond à la fenêtre active. Nous allons ici être limités aux
classes suivantes :
.vw-100 : la largeur de l’élément est égale à celle du viewport ;
.vh-100 : la hauteur de l’élément est égale à celle du viewport ;

.min-vw-100 : la largeur minimale de l’élément est égale à celle du viewport ;
.min-vh-100 : la hauteur minimale de l’élément est égale à celle du viewport.
Ajouter une bordure classique à un élément en utilisant Bootstrap
Nous allons déjà pouvoir ajouter une bordure carrée autour d’un élément ou sur un
côté spécifique d’un élément. Pour cela, nous allons utiliser les classes suivantes :
.border : va ajouter une bordure de couleur grise par défaut tout autour de l’élément ;
.border-top, .border-right, border-bottom, .border-left : va ajouter une bordure de
couleur grise respectivement par défaut uniquement sur le côté haut, droit, bas et haut
de l’élément ;
Enlever certaines bordures d’un élément
Bootstrap nous propose une fonctionnalité relativement intéressante qui va être de
pouvoir supprimer toutes les bordures d’un élément ou seulement une bordure d’un
côté en particulier. Nous allons pouvoir faire cela en ajoutant « 0 » en fin de
classe border-*.
.border-0 : supprime toutes les bordures de l’élément ;
.border-top-0 : supprime la bordure supérieure de l’élément ;
.border-right-0 : supprime la bordure droite de l’élément ;
.border-bottom-0 : supprime la bordure inférieure de l’élément ;

.border-left-0 : supprime la bordure gauche de l’élément.
Créer des bordure de couleur avec Bootstrap
Nous allons pouvoir réutiliser le système de couleurs contextuelles de Bootstrap afin
de personnaliser la couleur de nos bordures. Les classes disponibles dans la thème de
base sont les suivantes :
.border-primary : la bordure créée sera colorée en bleu ;
.border-secondary : la bordure créée sera colorée en gris foncé ;
.border-success : la bordure créée sera colorée en vert ;
.border-danger : la bordure créée sera colorée en rouge ;

.border-warning : la bordure créée sera colorée en jaune ;
.border-info : la bordure créée sera colorée en une autre teinte de bleu ;
.border-light : la bordure créée sera colorée en gris clair ;
.border-dark : la bordure créée sera colorée en noir ;
.border-white : la bordure créée sera colorée en blanc.
Créer des bordures arrondies avec Bootstrap
Nous allons finalement pouvoir changer le comportement et notamment arrondir des
bordures avec Bootstrap en utilisant les classes suivantes. Notez bien encore une fois
que ces classes ne vont pas créer de bordures mais simplement modifier l’apparence
d’une bordure déjà existante. Pour créer notre bordure, nous devrons également utiliser
une classe border-*.

rounded : arrondit légèrement une bordure ;
rounded-top : arrondit légèrement les coins supérieurs d’une bordure ;
rounded-right : arrondit légèrement les coins droits d’une bordure ;
rounded-bottom : arrondit légèrement les coins inférieurs d’une bordure ;
rounded-left : arrondit légèrement les coins gauche d’une bordure ;
rounded-circle arrondit complètement la bordure ;
rounded-pill : arrondit la bordure jusqu’à obtenir un demi-cercle ;
rounded-0 : annule l’arrondi d’une bordure ;
Les styles des tableaux
Une fusion des bordures est appliquée par défaut aux tableaux avec border-collapse :
collapse. L’élément caption (servant à ajouter une légende) est également stylisé.
Classe Description
.table ajoute un style de base à une table
.table-striped ajoute des rayures zébrées à un tableau
.table-bordered ajoute des bordures sur tous les côtés du tableau et des
cellules
.table-hover ajoute un effet de survol (couleur de fond grise) sur les lignes
du tableau
.table-dark ajoute un fond noir au tableau
.table-borderless supprime les bordures du tableau
Classes contextuelles : Les classes contextuelles peuvent être utilisées pour colorer tout
le tableau ( <table>), les lignes du tableau ( <tr>) ou les cellules du tableau ( <td>).
Couleurs des têtes de table
La classe .table-dark ajoute un arrière-plan noir aux en-têtes de tableau et la classe
.table-light ajoute un arrière-plan gris aux en-têtes de tableau.
barre de défilement
La classe .table-responsive ajoute une barre de défilement au tableau en cas de
besoin (lorsqu'il est trop grand horizontalement), Vous pouvez également décider
quand le tableau doit avoir une barre de défilement, en fonction de la largeur de
l'écran :
Ajouter des marges aux éléments avec Bootstrap
Les classes Bootstrap nous permettant d’appliquer des marges intérieures ou
extérieures à nos éléments vont toutes être construites sur le même modèle qui est le
suivant : {type de marge}{côté}-{taille}.
Dans le cas où l’on souhaite appliquer des marges différentes à nos éléments selon la
taille de l’écran de nos visiteurs (marges responsive), nous devrons également
ajouter un breakpoint entre les notations relatives au côté d’application de la marge et
sa taille. Le schéma de la classe sera alors le suivant :
{type de marge}{côté}-{breakpoint}-{taille}.
Pour le premier élément de notre classe, c’est-à-dire le type de marge, nous allons
pouvoir choisir entre deux valeurs :
m va nous servir à définir une marge extérieure (margin) ;
p va nous servir à définir une marge intérieure (padding).
Au niveau du côté de l’élément auquel doit s’appliquer la marge, nous avons le choix
entre différentes valeurs :
t va nous permettre d’appliquer une marge (margin ou padding) au niveau
du côté supérieur à un élément. Cela va donc servir à définir une margin-
top ou un padding-top ;
b va nous permettre d’ajouter une marge (margin ou padding) basse;
r va nous permettre d’ajouter une marge (margin ou padding) droite ;
l va nous permettre d’ajouter une marge (margin ou padding) gauche ;
x va nous permettre de définir des marges (margin ou padding) gauche et droite;
y va nous permettre de définir des marges (margin ou padding) haute et basse.
Notez que si on omet le paramètre « côté » dans notre classe, alors la marge
s’appliquera à tous les côtés de l’élément à la fois.
En termes de breakpoint, nous allons pouvoir utiliser les notations habituelles à
savoir sm, md, lg et xl.

Noter ici que si on ne précise pas de breakpoint alors cela revient à définir une marge
pour un breakpoint xs c’est-à-dire pour toutes les tailles d’écran.
Finalement, nous allons pouvoir choisir parmi 7 valeurs différentes pour définir la
taille de nos marges :
0 va supprimer toutes les marges (margin ou padding) appliquées à un élément ;
1 va définir des marges (margin ou padding) de 0.25rem par défaut;
2 va définir des marges (margin ou padding) de 0.5rem par défaut ;
3 va définir des marges (margin ou padding) de 1rem par défaut ;

4 va définir des marges (margin ou padding) de 1.5rem par défaut ;
5 va définir des marges (margin ou padding) de 3rem par défaut ;
La valeur auto va être exclusive aux marges extérieures et définir une margin : auto.
Eléments de formulaires et contrôles
supportés
Bootstrap applique un display : block à la plupart des éléments de formulaire par
défaut, ce qui signifie que la plupart des éléments occuperont leur propre ligne.
On va utiliser la classe .form-control pour mettre en forme la majorité des champs de
formulaire et notamment les éléments input, select et textarea.
Nous allons également utiliser une classe .form-group pour grouper des label avec le
champ de formulaire correspondant.
On va ensuite pouvoir modifier la taille de nos champs de formulaire et des textes en
utilisant les classes .form-control-sm (textes plus petits) et .form-control-lg (textes
plus grands).
supportés
Structurer un formulaire avec Bootstrap
Pour structurer un formulaire et grouper différents éléments nous allons pouvoir
utiliser la classe .form-group avec un élément conteneur générique comme un div ou
encore avec un élément fieldset par exemple.
Généralement, nous allons vouloir grouper un label avec son input comme ci-dessous
supportés
Si on souhaite créer une structure plus complexe pour notre formulaire, on peut
également utiliser le système des grilles Bootstrap pour gérer la disposition des
éléments de formulaire. Par ailleurs, notez que Bootstrap dispose d’une classe .form-
row qu’on va pouvoir utiliser à la place de .row pour nos formulaires et qui applique
un design plus compact qu’une ligne de formulaire classique.

supportés
On va encore pouvoir placer un label et un input côte-à-côte et aligner les
différents label et input entre eux en utilisant le système des grilles et .form-group
(pour ajouter des sauts de ligne entre les lignes). On rajoutera ici en plus une
classe .col-form-label afin d’aligner les label et leur input correspondant.

supportés
Styliser les cases à cocher et les boutons radio
On va déjà pouvoir utiliser une classe .form-check à la place de .form-group pour
grouper un input avec son label.
On va également ajouter une classe .form-check-input à chacun de nos input type =
"checkbox" et input type = "radio" et une classe .form-check-label aux
éléments label correspondants.

supportés
Formulaires en ligne
Nous allons pouvoir utiliser la classe .form-inline avec notre élément form pour
afficher des groupes d’éléments de formulaires label, input, etc. côte-à-côte, c’est-à-
dire sur la même ligne). Cette classe applique les styles suivants :
Les éléments de formulaire reçoivent un display: flex ;
Les groupes d’input et les champs de formulaire sont définis avec width: auto à la
place du width: 100% par défaut.
Notez qu’on peut également utiliser la classe .form-check-inline pour placer
des input type="checkbox" et input type="radio" côte-à-côte.

supportés
supportés
Valider les données des formulaires avec Bootstrap
Vous pouvez utiliser différentes classes de validation pour fournir des commentaires
précieux aux utilisateurs. Ajoutez soit .was-validated ou .needs-validation à
l'élément <form>, selon que vous souhaitez fournir des commentaires de validation
avant ou après la soumission du formulaire. Les champs de saisie auront une bordure
verte (valide) ou rouge (invalide) pour indiquer ce qui manque dans le
formulaire. Vous pouvez également ajouter un message à travers les classes .valid-
feedback ou .invalid-feedback pour indiquer explicitement à l'utilisateur ce qui
manque ou ce qui doit être fait avant de soumettre le formulaire.

supportés
Créer des boutons stylisés avec
Bootstrap
Appliquer une couleur de fond à un bouton
Nous allons pouvoir utiliser les couleurs contextuelles Bootstrap avec nos boutons
pour leur appliquer un fond coloré. Lors du survol de la souris sur un bouton, la
couleur de fond va légèrement changer.
Voici les classes que l’on va pouvoir utiliser et leur effet :

Bootstrap
Bootstrap
Les classes de boutons peuvent être utilisées sur les
éléments <a>, <button>ou <input>:
Bootstrap 4 fournit huit boutons contours/encadrés :

Bootstrap
Bootstrap
Tailles des boutons
Utilisez la .btn-lg classe pour les gros boutons ou la classe .btn-sm pour les petits
boutons :
Bootstrap
Bloquer les boutons de niveau
Ajoutez une classe .btn-block pour créer un bouton au niveau du bloc qui s'étend sur
toute la largeur de l'élément parent.

Utiliser les composants Bootstrap:
Barre de navigation
Une barre de navigation est une en-tête de navigation placé en haut de la page :
une barre de navigation peut s'étendre ou se réduire, selon la taille de l'écran.
Une barre de navigation standard est créée avec la classe .navbar, suivie d'une classe
de réduction réactive : .navbar-expand-xl|lg|md|sm qui étend la barre de navigation
sur des écrans extra larges, grands, moyens ou petits).
Pour ajouter des liens dans la barre de navigation, utilisez un élément <ul>
avec class="navbar-nav". Ajoutez ensuite des <li>éléments avec une classe .nav-
item suivis d'un <a>élément avec une classe .nav-link :

Barre de navigation
Barre de navigation
Barre de navigation verticale
Supprimez la classe .navbar-expand-xl|lg|md|sm pour créer une barre de navigation
verticale :
Barre de navigation centrée
Ajoutez la classe .justify-content-center pour centrer la barre de navigation.

Barre de navigation
L'exemple suivant centrera la barre de navigation:
Barre de navigation colorée

Barre de navigation
Utilisez l'une des classes .bg-color pour modifier la couleur d'arrière-plan de la barre
de navigation ( .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-darket .bg-light)
Conseil : ajoutez une couleur de texte blanche à tous les liens de la barre de
navigation avec la classe .navbar-dark, ou utilisez la classe .navbar-light pour
ajouter une couleur de texte noire .

Barre de navigation
Barre de navigation
La classe .navbar-brand est utilisée pour mettre en évidence la marque/le logo/le
nom du projet de votre page;
Pour créer une barre de navigation pliable, masquer les liens de navigation et les
remplacer par un bouton qui devrait les faire apparaître lorsqu'on clique dessus,
utilisez un bouton avec class="navbar-toggler", data-bs-toggle="collapse" and
data-bs-target="#thetarget"
Enveloppez ensuite le contenu de la barre de navigation (liens, etc.) dans un élément
<div> avec class="collapse navbar-collapse" suivi d'un identifiant correspondant à
la valeur de l’attribut data-bs-target du bouton

Barre de navigation
Menus déroulants
Les barres de navigation peuvent également contenir des menus déroulants :
Pagination
Si vous avez un site Web avec beaucoup de pages, vous pouvez ajouter une sorte de
pagination à chaque page.
Pour créer une pagination de base, ajoutez la classe .pagination à un élément
<ul>. Ajoutez ensuite le classe .page-item à chaque élément <li> et une classe .page-
link à chaque lien à l'intérieur de <li>:

Pagination
La classe .active est utilisée pour "surligner" la page courante :
La classe .disabled est utilisée pour les liens non cliquables :
Utilisez des classes justify-content-center/right pour modifier l'alignement de la
pagination :
Badges
Les badges sont utilisés pour ajouter des informations supplémentaires à tout
contenu. Utilisez la classe .badge avec une classe contextuelle (comme .badge-
secondary) dans des éléments <span> pour créer des badges rectangulaires. Notez
que les badges sont mis à l'échelle pour correspondre à la taille de l'élément parent.
Badges
Utilisez la classe .badge-pill pour rendre les badges plus ronds :
Alertes
Bootstrap fournit un moyen simple de créer des messages d'alerte prédéfinis :
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-light ou .alert-dark:
Exemple
Alertes
Liens d'alerte
Ajoutez la classe alert-link à tous les liens à l'intérieur de la boîte d'alerte pour créer
des "liens de couleur assortis":

Alertes
Alertes de fermeture
Pour fermer le message d'alerte, ajoutez une classe .alert-dismissible au conteneur
d'alerte. Ajoutez ensuite class="close" et data-dismiss="alert" à un lien ou à un
élément de bouton (lorsque vous cliquez dessus, la boîte d'alerte disparaît).
Exemple
Barre de progression
Barre de progression de base
Une barre de progression peut être utilisée pour montrer où en est un utilisateur dans
un processus.
Pour créer une barre de progression par défaut, ajoutez une classe .progress à un
élément conteneur et ajoutez la classe .progress-bar à son élément enfant. Utilisez la
propriété CSS width pour définir la largeur de la barre de progression :

La hauteur de la barre de progression est 1rem(généralement 16px) par
défaut. Utilisez la propriété CSS height pour le modifier. Notez que vous devez
définir la même hauteur pour le conteneur de progression et la barre de progression :
Étiquettes de la barre de progression : Ajoutez du texte dans la barre de progression
pour afficher le pourcentage visible :

Barres de progression colorées : Par défaut, la barre de progression est bleue
(principale). Utilisez l'une des classes d'arrière-plan contextuel pour modifier sa
couleur :
Barres de progression rayées : Utilisez la classe .progress-bar-striped pour ajouter
des bandes aux barres de progression :

Barre de progression animée : Ajoutez la classe .progress-bar-animated pour animer
la barre de progression :
Barres de progression multiples : Les barres de progression peuvent également être
empilées :
carte
Le composant carte ou « card » de Bootstrap est un conteneur flexible et extensible.
Concrètement, il s’agit d’une boite rectangulaire avec bordure qui peut être composée
d’un en-tête, d’un corps et d’un pied.
Les cartes n’ont pas de dimension intrinsèque, ce qui fait qu’elles tenteront d’occuper
tout l’espace dans leur parent par défaut. Elles ne possèdent pas non plus de marges
externes.
carte
Structure d’une carte : header, body et footer
Pour définir une card, on va déjà devoir ajouter une classe .card à un élément
conteneur comme un div par exemple.
On va ensuite pouvoir découper notre carte en trois parties distinctes : un en-tête avec
la classe .card-header, un corps avec la classe .card-body et un pied avec la
classe card-footer.
carte
Les éléments des cartes et les classes associées
On va pouvoir placer plus ou moins n’importe quel contenu HTML dans une carte :
du texte, des images, les listes, des liens, etc. Pour que certains de ces éléments soient
convenablement mis en forme, on va devoir leur ajouter des classes de type card-*.
On va ainsi pouvoir ajouter une classe .card-title aux éléments de titre et une
classe .card-subtitle pour les sous titres. Les autres textes vont pouvoir être mis en
forme avec la classe .card-text.
Pour les éléments de lien, on utilisera la classe .card-link.
Enfin, pour intégrer une image dans notre carte, on va pouvoir choisir entre les
carte
classes .card-img, .card-img-top et .card-img-bottom.
Les classes .card-img-top et .card-img-bottom vont nous permettre de placer une
image soit tout en haut d’une carte, soit tout en bas.
Notez qu’on placera l’image en premier ou dernier élément de la carte pour qu’elle
occupe toute la place de celle-ci.

carte
carte
Gérer la disposition de plusieurs cartes
Si on définit plusieurs cartes à la suite et qu’on souhaite que celles-ci soient alignées
les unes par rapport aux autres et qu’elles soient de même taille, on peut utiliser l’une
des classes .card-group ou .card-deck.
En utilisant .card-group, les cartes seront collées les unes aux autres. En
utilisant .card-deck, les cartes seront séparées par des padding.

carte
carte

4 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

4 Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

MODULE : Développer des sites Web statiques

DÉVELOPPER DES SITES WEB STATIQUES

recours à un autre framework ou librairie CSS.

Ces avantages sont :

Un gain de temps de développement qui peut être conséquent ;

Une certaine robustesse dans l’architecture globale du code ;

Un framework appartenant à une grande société (Twitter).

faire cela de deux façons. On peut :

Télécharger les fichiers Bootstrap (CSS et JavaScript) sur le

quel autre fichier CSS et JavaScript ;

Utiliser un CDN (Content Delivery Network ou réseau de distribution de contenu) et

inclure le lien vers les fichiers dans nos fichiers HTML.

modèle des boites flexibles (flexbox) comme système de disposition principal.

élément conteneur dans notre page HTML auquel on passera un

attribut class="container" ou class="container-fluid".

breakpoint donné et changera de taille à chaque breakpoint.

visiteurs. Un conteneur défini avec .container-fluid occupera toujours 100% de la

les classes .container et .container-fluid.

classes .container ou .container-fluid à un élément HTML puis de définir une ligne

en passant une classe .row à un autre élément dans le conteneur. On va ensuite

pouvoir personnaliser nos lignes et notamment créer des colonnes personnalisées

grâce aux classes de type .col-*.

chaque colonne qu’on va créer dans la ligne.

colonnes de base et etc.

des grilles Bootstrap.

se positionner en dessous des précédentes.

colonnes créées dont la taille est explicitement mentionnée occuperont l’espace en

afin que la taille effective de l’élément ne soit pas modifiée

par rapport à ceux des autres.

supérieure à 768px. Pour ces fenêtres là, la deuxième colonne personnalisée

occupera 6 colonnes de base et les 6 colonnes restantes seront réparties équitablement

chaque colonne poussera les suivantes à la ligne.

écrans de taille supérieure à 576px jusqu’au breakpoint de 992px où c’est la

automatiquement en fonction de leur contenu, on peut également utiliser les

dans une ligne :

classes qui représentent trois positions différentes :

.align-items-start : les colonnes seront alignées en début (en haut) de la ligne ;

.align-items-center : les colonnes vont être alignées au centre de la ligne ;

.align-items-end : les colonnes seront alignées en fin (en bas) de la ligne.

nous pouvons choisir parmi trois classes :

.align-self-start : la colonne sera alignée en début (en haut) de la ligne ;

.align-self-center : la colonne va être alignée au centre de la ligne ;

.align-self-end : la colonne sera alignée en fin (en bas) de la ligne.

On va principalement vouloir aligner horizontalement des colonnes dans une ligne

somme des nombres fait moins de 12.

On va pouvoir aligner horizontalement nos colonne dans la ligne grâce aux

classes .justify-content-* qu’on va devoir appliquer à la ligne en soi. Nous allons

pouvoir utiliser les classes suivantes :

.justify-content-center : les colonnes vont se positionner au milieu de la ligne ;

.justify-content-end : les colonnes vont se positionner en fin de ligne ;

.justify-content-around : les colonnes vont être réparties équitablement dans la ligne.

contre les bords de la ligne;

.justify-content-between : les colonnes vont être réparties équitablement dans la

ligne. La première colonne va être collée contre le début de la ligne et la dernière va

être collée contre la fin de celle-ci.

Tous les éléments reçoivent par défaut un box-sizing : border-box, le box-sizing :

border-box permet de s’assurer qu’un élément ne dépasse jamais sa taille déclarée

famille, la taille et l’épaisseur de la police +

la taille des interlignes + l’alignement et la couleur du texte + une couleur de fond +

des marges externes comme ceci :

basses respectivement égales à 1rem et 0.5rem.