Le langage CSS/Bootstrap

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


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/.

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) { ... }

Références[modifier | modifier le wikicode]