Le langage CSS/Bootstrap

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Présentation

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

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

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

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 :

• 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

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>