Le langage CSS/Bootstrap
Présentation
[modifier | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode]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) { ... }
Insertion des images
[modifier | modifier le wikicode]Afin d'insérer des images avec Bootstrap, il est conseillé d'utiliser la classe img-fluid afin de rendre l'image responsive. Ainsi, le rendu de l'image s'adaptera en fonction de la taille de l'écran:
<div style="width: 50%; border: 10px green solid">
<img src="<Ajouter une URL contenant une image>"
alt="Une image"
class="img-fluid"
>
</div>