Colors
Transmet significat a través del color amb un grapat de classes d'utilitat de color. També inclou suport per als enllaços d'estil amb els estats de flotació.
Tractament de l'especificitat
De vegades no es poden aplicar classes contextuals a causa de l'especificitat d'un altre selector. En alguns casos, una solució suficient és embolicar el contingut de l'element en un <div>amb la classe.
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.
Color
.text-primària
.text-secundària
.text-èxit
.text-perill
.text-advertència
.text-info
.text-llum
.text-fosc
.text-cos
.text silenciat
.text-blanc
.text-negre-50
.text-blanc-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 text contextual també funcionen bé amb les àncores amb els estats d'enfocament i de focus proporcionats. Tingueu en compte que la classe .text-whitei .text-mutedno té cap estil d'enllaç addicional més enllà del subratllat.
<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>Color de fons
De manera similar a les classes de color de text contextual, establiu fàcilment el fons d'un element a qualsevol classe contextual. Els components d'ancoratge s'enfosquiran en passar el cursor, igual que les classes de text. Les utilitats de fons no s'estableixencolor , de manera que, en alguns casos, voldreu utilitzar les .text-*utilitats.
<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>Degradat de fons
Quan $enable-gradientss'estableix en true(el valor per defecte és false), podeu utilitzar .bg-gradient-classes d'utilitat. Obteniu informació sobre les nostres opcions de Sass per activar aquestes classes i més.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark