MODULE : Développer des sites Web statiques

DÉVELOPPER DES SITES WEB

STATIQUES

Boubekri safa

2024-2025
 *Introductio
n
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).
 *Version
La dernière version stable majeure de Bootstrap est la version 4 qui tranche

radicalement dans son architecture par rapport à la version 3.

La différence majeure entre Bootstrap 3 et Bootstrap 4 est que cette nouvelle version

a été construite pour une navigation mobile avant une navigation sur bureau. Ainsi,

les règles CSS par défaut ont été désignées pour des écrans de téléphone tandis que

les règles pour les autres types d’écrans sont rajoutées en tant que règles secondaires.

Bootstrap 4 est notamment basé sur le modèle des boites flexibles ou flexbox. C’est

donc ce modèle qui sera utilisé pour positionner les différents éléments là

où Bootstrap 3 utilisait la propriété CSS float.

 *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

[Link] 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".
 *Système de grilles de
Bootstrap
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 :
 *Système de grilles de
Bootstrap
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.

 *Système de grilles de
Bootstrap
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.
 *Système de grilles de
Bootstrap
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 :
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

*Créer des colonnes

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

dans les grilles

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
Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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.

*Créer des colonnes

En passant une classe .col-1 à un élément, on indique qu’on souhaite créer
une

dans les grilles

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
Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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 *Créer des colonnes

dans les grilles
se positionner en dessous des précédentes.
Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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.

*Créer des colonnes

dans les grilles
Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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

*Créer des colonnes

Pour faire cela, on va pouvoir utiliser les classes .col-sm, .col-md, .col-lg et .col-xl en

plus de .col.
dans les grilles
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
Bootstrap et gérer leur taille
Ces classes vont s’appliquer pour les tailles de fenêtre
suivantes :

Exemple :

*Créer des colonnes

dans les grilles
Bootstrap et gérer leur taille
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 à

*Créer des colonnes

768px, en revanche, aucune taille ni comportement n’a été explicitement définie pour

dans les grilles

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.

Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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

*Créer des colonnes

classe .col-lg- qui va être prioritaire et indiquer les nouvelles dimensions des

colonnes.

dans les grilles

Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
Bootstrap et gérer leur taille
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

*Créer des colonnes

numéros.

dans les grilles

Bootstrap et gérer leur taille

*Créer des colonnes dans

les grilles
 *Gérer l’alignement et
des colonnes des l’espacement
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
 *Gérer l’alignement et
des colonnes des l’espacement
grilles Bootstrap
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.

 *Gérer l’alignement et
des colonnes des l’espacement
grilles Bootstrap
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 et
des colonnes des l’espacement
grilles Bootstrap
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

 *Gérer l’alignement et
des colonnes des l’espacement
grilles Bootstrap
.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
éléments HTML styles des
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 :
 *La normalisation des styles
éléments HTML des
 *La normalisation des
éléments HTML styles des
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.

 *La normalisation des
éléments HTML styles des
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 ;

• h4 : font-size : 1.5rem ou 24px par défaut ;

• h5 : font-size : 1.25rem ou 20px par défaut ;

• h6 : font-size : 1rem soit 16px par défaut.

 *La normalisation des
éléments HTML styles des
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.

 *La normalisation des
éléments HTML styles des
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.
 *Les classes CSS
de base
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 :

.font-weight-lighter pour obtenir un texte très fin ;

.font-weight-light pour obtenir un texte fin ;

.font-weight-normal pour obtenir un texte normal ;

.font-weight-bold pour obtenir un texte épais ;

.font-weight-bolder pour obtenir un texte très épais.

 *Les classes CSS
de base
Notez que les classes .font-weight-lighter et .font-weight-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 .font-

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 ;
 *Les classes CSS
de base
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-left va aligner un texte à gauche ;

.text-center va centrer un texte ;

.text-right va aligner un texte à droite ;

.text-justify va justifier un texte.

 *Les classes CSS
de base
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é.
 *Les classes CSS
de base
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
 *Les classes CSS
de base
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.

 *Les classes CSS
de base
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-50 : l’élément a une largeur égale à 50% de celle de son parent ;

.w-75 : l’élément a une largeur égale à 75% 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 ;

 *Les classes CSS
de base
.h-75 : l’élément a une hauteur égale à 75% 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 ;

 *Les classes CSS
de base
.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 ;
 *Les classes CSS
de base
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 ;

 *Les classes CSS
de base
.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 ;

 *Les classes CSS
de base
.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
 *Les classes CSS
de base
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 classes CSS
de base
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é.
 *Les classes CSS
de base
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
 *Les classes CSS
de base
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>).
 *Les classes CSS
de base
Couleurs des têtes de table

La classe .thead-dark ajoute un arrière-plan noir aux en-têtes de tableau et la classe

.thead-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 :
*Les classes CSS de
base
 *Les classes CSS
de base
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}.
 *Les classes CSS
de base
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-

 *Les classes CSS
de base
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.

 *Les classes CSS
de base
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 ;
 *Les classes CSS
de base
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

 *Eléments de formulaires
et contrôles
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
 *Eléments de formulaires
et contrôles
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.

 *Eléments de formulaires
et contrôles
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.

On rajoutera ici en plus une classe .col-form-label afin d’aligner les label

et leur input correspondant.

 *Eléments de formulaires
et contrôles
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.

 *Eléments de formulaires
et contrôles
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- pour placer

inline des input type="checkbox" et input type="radio" côte-à-côte.

 *Eléments de formulaires et
contrôles
supportés
 *Eléments de formulaires
et contrôles
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.

 *Eléments de formulaires et
contrôles
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 :

 *Créer des boutons stylisés
avec
Bootstrap
 *Créer des boutons
stylisés avec
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 :
 *Créer des boutons stylisés
avec
Bootstrap
 *Créer des boutons
stylisés avec
Bootstrap
Tailles des boutons

Utilisez la .btn-lg classe pour les gros boutons ou la classe .btn-sm pour les petits

boutons :
 *Créer des boutons
stylisés avec
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
Barre de navigationBootstrap:
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 :

 *Utiliser les composants
Barre de navigation Bootstrap:
 *Utiliser les composants
Barre de navigationBootstrap:
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.
 *Utiliser les composants
Barre de navigationBootstrap:
L'exemple suivant centrera la barre de
navigation:

Barre de navigation colorée

 *Utiliser les composants
Barre de navigationBootstrap:
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 .navbar-darkclasse, ou utilisez la .navbar-lightclasse pour

ajouter

une couleur de texte noire .

 *Utiliser les composants
Barre de navigation Bootstrap:
 *Utiliser les composants
Barre de navigationBootstrap:
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«

 *Utiliser les composants
Barre de navigation Bootstrap:
Menus déroulants
Les barres de navigation peuvent également contenir des menus
déroulants :

*Utiliser les
composants
Bootstrap:
 *Utiliser les composants
Bootstrap:
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>:

 *Utiliser les composants
Bootstrap:
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 :
 *Utiliser les composants
Badges Bootstrap:
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 .badge-pillclasse pour rendre les badges plus
ronds :

*Utiliser les
composants
Bootstrap: