Source

Couleurs

Transmettez du sens à travers la couleur avec une poignée de classes utilitaires de couleur. Inclut également la prise en charge des liens de style avec des états de survol.

Couleur

.text-primaire

.text-secondaire

.text-succès

.text-danger

.texte-avertissement

.text-info

.text-light

.text-dark

.text-muet

.text-blanc

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Les classes de texte contextuel fonctionnent également bien sur les ancres avec les états de survol et de focus fournis. Notez que la classe .text-whiteet .text-mutedn'a pas de style de lien.

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Couleur de l'arrière plan

Semblable aux classes de couleurs de texte contextuelles, définissez facilement l'arrière-plan d'un élément sur n'importe quelle classe contextuelle. Les composants d'ancrage s'assombrissent au survol, tout comme les classes de texte. Les utilitaires d'arrière -plan ne définissent pascolor , donc dans certains cas, vous voudrez utiliser des .text-*utilitaires.

.bg-primaire

.bg-secondaire

.bg-succès

.bg-danger

.bg-avertissement

.bg-info

.bg-lumière

.bg-dark

.bg-blanc

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Dégradé de fond

Lorsque $enable-gradientsest défini sur true, vous pourrez utiliser des .bg-gradient-classes utilitaires. Par défaut, $enable-gradientsest désactivé et l'exemple ci-dessous est intentionnellement cassé. Ceci est fait pour une personnalisation plus facile à partir du moment où vous commencez à utiliser Bootstrap. Découvrez nos options Sass pour activer ces classes et plus encore.

.bg-gradient-primaire

.bg-gradient-secondaire

.bg-gradient-succès

.bg-gradient-danger

.bg-gradient-avertissement

.bg-gradient-info

.bg-gradient-lumière

.bg-gradient-dark

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

Faire face à la spécificité

Parfois, les classes contextuelles ne peuvent pas être appliquées en raison de la spécificité d'un autre sélecteur. Dans certains cas, une solution de contournement suffisante consiste à envelopper le contenu de votre élément dans un <div>avec la classe.

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-onlyclasse.