Le langage CSS/Bootstrap
Présentation Modifier
Bootstrap est un framework CSS et JavaScript développé par Twitter depuis 2011. Une présentation rapide et exhaustive de ses composants est disponible sur https://hackerthemes.com/bootstrap-cheatsheet/.
Classes Modifier
Pour ajouter les styles de Bootstrap, il suffit de définir ses classes dans les éléments.
Ex :
- m-0 : margin 0;
- p-0 : padding 0;
- text-right : text-align: right !important;
- font-weight-bold: font-weight: 700 !important;
Gestion des tailles d'écran Modifier
Afin de construire des sites adaptatifs (responsive), il est déconseillé de définir les mêmes tailles d'objet (en pixels) sur tous les écrans.
Bootstrap solutionne cela en permettant de gérer une grille où les sélecteurs peuvent varier selon les tailles d'écrans, par media queries.
Exemple Modifier
Le code suivant définit du CSS différent pour chacune des quatre tailles d'écran par leur bornes. Voici un exemple avec quatre tailles[1] :
- xs (extra small) : < 768 px par défaut.
- sm (small) : entre 768 inclus et 992 px exclus.
- md (medium) : entre 992 inclus et 1200 px exclus.
- lg (large) : ≥ 1200 px.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }