Culori
Trasmette u significatu attraversu u culore cù una manciata di classi di utilità di culore. Include ancu supportu per i ligami di stili cù stati di hover.
.testu-primariu
.testu-secundariu
.testu-successu
.testu-periculu
.text-avvertimentu
.text-info
.testu-luce
.testu-scuru
.text-muted
.testu-biancu
<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>
E classi di testu cuntestuali funzionanu ancu bè nantu à l'ancore cù i stati furniti di hover è focus. Nota chì a classe .text-white
è .text-muted
ùn hà micca un stilu di ligame.
<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>
Simile à e classi di culore di testu contextuale, facilmente stabilisce u sfondate di un elementu à qualsiasi classi contextuale. I cumpunenti di l'ancora si scuriscenu nantu à u passaghju, cum'è e classi di testu. L'utilità di fondo ùn sò micca stabilitecolor
, cusì in certi casi vulete usà l' .text-*
utilità.
<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>
Quandu $enable-gradients
hè stabilitu à veru, puderete aduprà .bg-gradient-
classi di utilità. Per automaticamente, $enable-gradients
hè disattivatu è l'esempiu sottu hè intenzionalmente rottu. Questu hè fattu per una persunalizazione più faciule da u mumentu chì cuminciate à aduprà Bootstrap. Amparate nantu à e nostre opzioni Sass per attivà queste classi è più.
<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>
Trattamentu di specificità
A volte e classi contextuale ùn ponu esse applicate per via di a specificità di un altru selettore. In certi casi, una soluzione sufficente hè di imbulighjà u cuntenutu di u vostru elementu in una <div>
cù a classe.
Trasmette u significatu à e tecnulugia assistive
Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-only
classe.