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-body
.text-muet
.text-blanc
.text-noir-50
.text-white-50
<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-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</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 supplémentaire au-delà du soulignement.
<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.
<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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Dégradé de fond
Lorsque $enable-gradientsest défini sur true(la valeur par défaut est false), vous pouvez utiliser des .bg-gradient-classes utilitaires. Découvrez nos options Sass pour activer ces classes et plus encore.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
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.