A retenir Bootstrap

Style reboot Bootstrap

Pour uniformiser le rendu des affichages au niveau des navigateurs.
Bootstrap utilise normalize.css pour rendre l’affichage homogène pour tous les navigateurs.

Avec Reboot, les éléments <html> et <body> se voient attribuer plusieurs règles par défaut.

Les polices de caractères ciblent les principaux navigateurs pour un affichage optimal. Bootstrap utilise San Francisco pour iOS, Segoe UI pour Windows, Roboto pour Android et Helvetica Neue, Arial et sans-serif pour les autres affichages. La taille de caractère est basée sur 16 pixels, avec la valeur 1 rem.

L’élément <body> utilise une interligne line-height: 1.5;, une couleur de caractère color: #212529, un alignement du texte text-align: left et une couleur d’arrière-plan background-color: #fff.

Pour la mise en page, tous les éléments utilisent la propriétébox-sizing: border-box;.

Bien sûr tous les éléments inclus vont hériter de ces propriétés globales, sauf s’ils redéfinissent leurs propres valeurs.

La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d’un élément est calculée
border-box
indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c’est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.

 

LES PARAGRAGRAPHES

Bootstrap propose une mise en forme spéciale pour mettre en évidence certains paragraphes avec la classe .lead.

Voici le code utilisé dans cet exemple :

<p>Etiam porta sem malesuada...</p> 
<p class="lead">Etiam porta sem malesuada...</p> 
<p>Etiam porta sem malesuada...</p> 

data-toogle

La version 5 du langage HTML a ajouté un nouveau type d’attribut, qui n’est pas interprété par le navigateur. Ce sont tous les attributs dont le nom commence par les lettres data. Ils sont conçus pour stocker des données et ainsi être utilisables par les développeurs pour d’autres usages en dehors du langage HTML.

Bootstrap se base sur ces attributs pour stocker des informations nécessaires pour mettre en place les fonctionnalités du framework.
L’attribut data-toggle contient le type d’événement qui va être lié à un bouton :

data-toggle=modal /* Bouton qui ouvre une fenêtre modale */
data-toggle=dropdown /* Bouton qui ouvre un menu déroulant */
data-toggle=tab /* Bouton qui ouvre des onglets */

 

Les Spinners
Bootstrap nous propose d’utiliser des « roues de chargement », des spinners en anglais. C’est une roue animée qui indique aux utilisateurs qu’il y a une attente en cours. Cela peut être la classique attente d’un chargement, ou toute autre fonctionnalité qui prend un peu de temps.

 

Les jeux de couleurs

Nous avons déjà de nombreuses fois utilisé les jeux de couleurs de Bootstrap. Ces couleurs s’utilisent dans des classes, la plupart du temps en tant que suffixe.

Pour associer une couleur à du texte, il faut utiliser la classe .text-couleur, où le suffixe couleur indique la couleur voulue. Pour mettre un arrière-plan en couleur, la classe à utiliser est .bg-couleur.

Voici les couleurs de Bootstrap :

  • primary : couleur bleue, #007bff.

  • secondary : couleur gris-foncée, #6c757d.

  • success : couleur verte, #28a745.

  • danger : couleur verte, #dc3545.

  • success : couleur verte, #28a745.

  • warning : couleur jaune, #ffc107.

  • info : couleur bleue-verte, #17A2B4.

  • light : couleur grise très claire, #f8f9fa.

  • dark : couleur grise foncée, #343a40.

  • white : couleur blanche, #fffff.

 

 

 

 

Laisser un commentaire

Retour haut de page