Source

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.

Culore

.testu-primariu

.testu-secundariu

.testu-successu

.testu-periculu

.text-avvertimentu

.text-info

.testu-luce

.testu-scuru

.testu-corpu

.text-muted

.testu-biancu

.testu-neru-50

.testu-biancu-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>

E classi di testu cuntestuali funzionanu ancu bè nantu à l'ancore cù i stati furniti di hover è focus. Nota chì a classa .text-whiteè .text-mutedùn hà micca un stilu di ligame supplementu oltre u sottolineatu.

<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>

Culore di fondu

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à.

.bg-primariu
.bg-secundariu
.bg-successu
.bg-periculu
.bg-avvertimentu
.bg-info
.bg-luce
.bg-scuru
.bg-biancu
.bg-trasparente
<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>

Gradiente di fondo

Quandu $enable-gradientshè stabilitu à veru, puderete aduprà .bg-gradient-classi di utilità. Per automaticamente, $enable-gradientshè 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ù.

.bg-gradient-primary
.bg-gradiente-secundariu
.bg-gradiente-successu
.bg-gradiente-periculu
.bg-gradient-warning
.bg-gradient-info
.bg-gradiente-luce
.bg-gradiente-scuru
<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 imballà 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-onlyclasse.