Qu’est ce que c’est ?
Bootstrap est un Framework CSS.
Les frameworks sont des règles préétablies dans lesquelles on peut venir piocher. Ils permettent de simplifier la reprise du code par quelqu’un d’autre et de gagner du temps.
La base
Bootstrap est basé sur un principe de grilles.
On ne réfléchit plus en termes d’espacement, mais de colonnes de la grille à utiliser.
Bootstrap est basé sur 12 colonnes (car il y a de nombreux multiples possibles). Et entre les colonnes, il y a ce qu’on appelle des gouttières (ce sont les espacements entre les colonnes).
Par exemple, pour placer un élément sur toute la largeur de la page, on lui dit d’occuper 12 colonnes. Pour en placer 2, il faudra indiquer à chaque élément d’occuper 6 colonnes (ou en fonction de la disposition, par exemple 25% /75% deviendront 4 colonnes / 8 colonnes).
Les composants
Dans Bootstrap, il y a des composants : ce sont des outils CSS et JavaScript qui permettent d’ajouter directement dans la page de petits éléments (barres de recherche, pop up stylisé, etc.) déjà fonctionnels. L’inconvénient, c’est qu’on se retrouve rapidement avec les mêmes composants de partout (tous les sites se ressemblent alors !)
Il faut donc modifier le CSS pour styliser chaque élément à sa façon.
L’installation
Bootstrap est un fichier de style à charger.
Le téléchargement peut se faire sur le site de Bootstrap puis [Download].
Une autre méthode, plus simple, permet de ne pas télécharger Bootstrap (et donc d’alléger la page !) : ajouter directement au fichier HTML un lien vers le fichier Boostrap.
Toujours sur le site de Bootstrap, cliquez sur [Get Started] puis dans la section [Quick Start], récupérez le lien CSS à mettre dans le head du fichier HTML :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Il faut bien mettre ce lien avant celui de notre propre fichier de style CSS. En effet, nos règles CSS sont déclarées en dernier, elles seront donc prioritaires. Ce qui permettra de contrer celles de Bootstrap.
Comment fonctionne Bootstrap ?
Bootstrap permet de faire de la mise en page directement dans le fichier HTML (et avec très peu de règles CSS à ajouter).
Il y a des class prédéfinies que l’on peut ajouter au HTML. Elles permettent d’intégrer automatiquement des fonctionnalités aux balises ciblées.
On rajoute donc des class seulement s’il y a des modifications a apporter sur la balise.
La règle de nommage des class est : .nomdelaregle-taille-valeur
Bon à savoir : par défaut, tous les éléments Bootstrap ont des padding de 15px (les gouttières sont alors de 30px).
Breakpoints
Bootstrap intègre des breakpoints, permettant de rendre la page responsive automatiquement :
– xs ou xtrasmall (< 576px) : .col-
Attention, cela correspond au mobile-first. Il sera donc la valeur par défaut (depuis la version 4 de Bootstrap)
– sm ou small (>=576px) : .col-sm-
– md ou medium (>=768px) : .col-md-
– lg ou large (>=992px) : .col-lg-
– xl ou xtralarge (>=1200px) : .col-xl-
Containers
Bootstrap est composé de deux containers généraux :
– container fluid qui occupe toute la page
<div class="container-fluid"> </div>
– container qui occupe la page avec un maximum de 1170px
<div class="container"> </div>
On utilise ensuite la notation des colonnes sur des éléments suivants.
Flex
Bootstrap est basé sur du flex. Il ne faut donc pas oublier de donner comme règle aux parents la class row (fait devenir flex sans prendre en compte l’espacement des cotés).
L’architecture des balises sera alors :
– grand parent => container
– parent => row
– enfant => col
Attention : il ne faut pas d’enfant row après un parent row.
Comme Bootstrap applique le style flex à la page, les class permettent d’appliquer toutes les règles du flex (elles sont toutes listées sur le site Bootstrap)
Alignement horizontal
justify-content-start justify-content-center justify-content-end
Le nomage se fait de la façon suivante :
.{propriété}-{breackpoint}-{valeur}
Par exemple :
<div class="row justify-content-start justify-content-lg-center"> </div>
Alignement vertical
align-items-start align-items-center align-items-end
Par exemple :
<div class="row align-items-start align-items-lg-center"> </div>
Ordre les éléments
order-2 order-md-1
Ce qui permet de changer d’ordre et de le faire aussi en fonction de la taille de l’écran.
Saut de colonne
– offset-nb : permet de placer un nombre (nb) de colonnes vides avant mon élément
– offset-taille-nb : idem, en fonction de la taille de l’écran
Cela permet de faciliter la mise en page, car les calculs d’espacement se font tout seuls. cet outil gère automatiquement les espaces que doit avoir chaque élément et l’espace entre eux.
Remplacement du visible
C’est l’équivalent du display. il est noté d.
d-none : l’élément est cachéd-block : il est affiché
L’élément peut s’afficher ou se cacher en fonction de la taille de l’écran : d-lg-none ou d-lg-block
Espacement (padding / margin)
Le nommage se fait de la façon suivante :.{propriété}{coté}-{breackpoint}-{taille}
Par exemple :
<div class="pr-md-0"> </div>
– propriété :
m margin
p padding
– coté :
a toutes les directions
t en haut
r à droite
l à gauche
b en bas
x horizontal (gauche et droite)
y vertical (haut et bas)
– breakpoint (cf. plus haut)
(rien) à partir de la taille mobile
sm
md
lg
xl
– taille
0
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)
A savoir : il y a un gros gap entre 4 et 5. Il est donc possible de rajouter des règles CSS.
Pour rappel : l’unité de mesure rem est fonction de la taille du body.
Règles générales
Sans écrire une seule règle de CSS, on a déjà une mise en page en blocs avec des tailles différentes, etc.
Toutes les règles de mise en forme sont sur le site de Bootstrap.
Divers
Il est possible de modifier graphiquement les titres.
Il existe des classes qui permettent qu’un titre ressemble à un autre titre :
<h1 class="h2"> titre h1 qui ressemble à des h2 </h1> <h2 class="h4"> titre h2 qui ressemble à des h4 </h2>