Concrètement, l’idée est de se baser sur les codes usuels et sur l’imaginaire collectif pour associer un nom de classe à une couleur qui est censée représenter ce nom (par exemple la couleur rouge va être associée à la classe .xx-danger).
Couleur et opacité des textes
Les classes Bootstrap nous permettant de modifier la couleur des textes sont les suivantes :
.text-primary: texte bleu ;.text-seconday: texte gris-bleu ;.text-success: texte vert ;.text-danger: texte rouge ;.text-warning: texte jaune ;.text-info: nuance de bleu ;.text-light: texte gris clair ;.text-dark: texte gris foncé ;.text-body: texte noir ;.text-muted: texte gris ;.text-white: texte blanc ;.text-black-50: texte noir semi transparent ;.text-white-50: texte blanc semi transparent ;
Visuellement, l’effet de ces classes est le suivant :
See the Pen
Bootstrap 2.3.1 by Pierre (@pierregiraud)
on CodePen.
Notez ici que les couleurs de fond ont été ajoutées sur certains textes pour bien que vous voyiez le texte avec la classe .bg-dark. Cette classe n’a rien à voir avec les classes de couleurs de texte.
Les classes .text-black-50 et .text-white-50 servent à créer des textes noir et blanc semi-transparents.
On va pouvoir utiliser ces classes avec n’importe quel élément contenant un texte. Si on les utilise avec des éléments de lien (éléments HTML a), alors leur couleur et le trait de soulignement changeront également lors du survol de ces éléments.
Attention cependant : les classes .text-white et .text-muted ne vont pas offrir de changement de couleur lors du survol ou du clic sur un lien.
See the Pen
Bootstrap 2.3.2 by Pierre (@pierregiraud)
on CodePen.
Modifier couleur de fond d’un élément
Nous allons pouvoir modifier la couleur de fond de nos éléments en utilisant le même système de « couleurs contextuelles » fourni par Bootstrap que pour nos textes.
La seule différence est que nous allons cette fois-ci utiliser le préfixe .bg- (pour background) plutôt que .text-.
Notez bien évidemment qu’il vous appartient de modifier la couleur d’un texte lorsque vous modifiez la couleur de fond de celui-ci afin que le texte soit visible : changer la couleur de fond n’adaptera pas la couleur du texte par défaut.
Notez également que la couleur de fond d’une ancre va foncer lors du survol de la souris exactement comme c’était le cas pour les textes.
See the Pen
Bootstrap 2.3.3 by Pierre (@pierregiraud)
on CodePen.
Notez que certains éléments particuliers et composants de Bootstrap vont posséder leurs propres classes de couleur comme les boutons (élément HTML button) par exemple. Ces classes de couleurs reposeront toujours sur le même principe de couleurs contextuelles. Nous aurons l’occasion de les étudier au cas par cas dans la suite de ce cours.
Utiliser une couleur non disponible dans le thème Bootstrap de base
Bootstrap permet de créer des mises en page professionnelles et robustes relativement rapidement et sans beaucoup d’effort. Cependant, comme tout framework, il possède également ses limites et ne va pas tout faire automatiquement pour vous.
Dans le cas où les classes Bootstrap ne nous suffisent pas et où on souhaite aller plus loin dans la personnalisation d’une page, comme par exemple dans le cas où on souhaite appliquer une couleur qui ne correspond pas à la liste des classes contextuelles fournie par Bootstrap, on va avoir deux solutions : soit rajouter des styles manuellement, soit ajouter des éléments en se basant sur le fichier de base de Bootstrap.
Rajouter des styles manuellement (directement dans notre fichier HTML) n’est généralement pas recommandé car cela peut créer des conflits avec d’autres styles de Bootstrap et poser des problèmes dans la page. Il faut donc être sûrs de soi et bien connaitre le contenu de Bootstrap (et se tenir au courant de ses évolutions !) si on choisit de procéder comme cela.
Sinon, on va également pouvoir modifier les valeurs liées aux classes par défaut de Bootstrap ou définir de nouvelles classes et cela va généralement être la méthode recommandée.
Ici, vous devez savoir que Bootstrap utilise l’extension Sass pour définir ses styles CSS. Nous n’allons pas modifier le fichier CSS de Bootstrap en soi mais allons plutôt créer un nouveau fichier CSS qui va se baser sur le fichier Bootstrap de base et allons définir les nouvelles valeurs pour nos classes ou nos nouvelles classes dans ce fichier. Nous apprendrons à faire cela en fin de cours.
