Couleur
Travail en cours
Cette page porte sur le travail en cours.
Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).
Usage
Utiliser la couleur comme un élément de présentation à des fins décoratives ou pour transmettre des renseignements.
Conception et codage
Utilisation
Sourde
Utilisez pour rendre le texte d'apparence de couleur grise (sourde).
Apparence
Ce texte est stylisé avec .text-muted.
Icône colorée :
Bonne utilisation
Points de conformité :
- Utilisez-la pour atténuer l'apparence du texte (le rendre moins évident)
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte de couleur sourde :
<p class="text-muted">...</p>
// Icône de couleur sourde :
<span class="fa fa-adjust text-muted"></span>Couleur primaire
Utilisez-la pour styliser les renseignements primaires. Les options comprennent le texte en bleu moyen, une icône bleu « drip » ou un texte blanc avec un arrière-plan bleu moyen.
Apparence
Ce texte est stylisé avec .text-primary.
Icône colorée :
Ce texte est stylisé avec .bg-primary.
Bonne utilisation
Points de conformité :
- Utilisez pour faire correspondre le texte à la palette des principales couleurs du site
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité - Sachez que le texte bleu peut causer des problèmes d'utilisabilité, car on peut le prendre par erreur pour un lien
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte primaire :
<p class="text-primary">...</p>
// Icône primaire :
<span class="fa fa-tint text-primary"></span>
// Arrière-plan primaire :
<p class="bg-primary">...</p>Couleur de succès
Utilisez-la pour styliser les renseignements de succès. Ce style comprend des options pour le texte vert, une icône représentant une coche verte ou un texte par défaut avec une arrière-plan vert pâle.
Apparence
Ce texte est stylisé avec .text-success.
Icône colorée :
Ce texte est stylisé avec .bg-success.
Bonne utilisation
Points de conformité :
- Utilisez-la pour laisser entendre que le contenu est exact ou indiquer la bonne façon de faire quelque chose
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte de succès :
<p class="text-success">...</p>
// Icône de succès :
<span class="fa fa-check text-success"></span>
// Arrière-plan de succès :
<p class="bg-success">...</p>Couleur des renseignements
Utilisez-la pour styliser des renseignements relativement importants. Ce style comprend des options pour le texte bleu, une icône représentant un « i » bleu ou un texte par défaut avec un arrière-plan bleu pâle.
Appearance
Ce texte est stylisé avec .text-info.
Icône colorée :
Ce texte est stylisé avec .bg-info.
Bonne utilisation
Points de conformité :
- Utilisez-la pour souligner des renseignements relativement importants
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte de renseignements :
<p class="text-info">...</p>
// Icône de renseignements :
<span class="fa fa-info text-info"></span>
// Arrière-plan de renseignements :
<p class="bg-info">...</p>Couleur d'avertissement
Utilisez-la pour styliser les renseignements d'avertissement. Ce style comprend des options pour le texte brun, une icône représentant un point d'exclamation dans un triangle ou un texte par défaut avec un arrière-plan brun doré pâle.
Apparence
Ce texte est stylisé avec .text-warning.
Icône colorée :
Ce texte est stylisé avec .bg-warning.
Bonne utilisation
Points de conformité :
- Utilisez-la pour attirer l'attention sur le contenu et avertir l'utilisateur de quelque chose
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte d'avertissement :
<p class="text-warning">...</p>
// Icône d'avertissement :
<span class="fa fa-exclamation-triangle text-warning"></span>
// Arrière-plan d'avertissement :
<p class="bg-warning">...</p>Couleur de danger
Utilisez-la pour styliser des renseignements très importants. Ce style comprend des options pour un texte rouge, une icône représentant une point d'exclamation dans un cercle ou le texte par défaut avec un arrière-plan rouge pâle.
Apparence
Ce texte est stylisé avec .text-danger.
Icône colorée :
Ce texte est stylisé avec .bg-danger.
Bonne utilisation
Points de conformité :
- Utilisez-la pour attirer l'attention sur un contenu très important et aviser l'utilisateur qu'une action est dangereuse
- Enveloppez le texte dans une balise
<span>si un style n'apparaît pas comme il le devrait pour des raisons de spécificité
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- Ne l'utilisez pas comme seul moyen de communiquer les renseignements ou l'intention, car la couleur seule n'est pas accessible
Code
// Texte de danger :
<p class="text-danger">...</p>
// Icône de danger :
<span class="fa fa-exclamation-circle text-danger"></span>
// Arrière-plan de danger :
<p class="bg-danger">...</p>Utilisation améliorée
Fonctions complémentaires
Des fonctions et des comportements complémentaires sont disponibles.
Principes de soutien
Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)
- Date de modification: