Färger

Förmedla mening genom färg med en handfull färgklasser. Inkluderar även stöd för stylinglänkar med svävartillstånd.

Att hantera specificitet

Ibland kan inte kontextuella klasser tillämpas på grund av specificiteten hos en annan väljare. I vissa fall är en tillräcklig lösning att slå in ditt elements innehåll i en <div>med klassen.

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Färg

.text-primär

.text-sekundär

.text-framgång

.text-fara

.text-varning

.text-info

.text-ljus

.text-mörk

.text-body

.text-dämpad

.text-vit

.text-svart-50

.text-vit-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>

Kontextuella textklasser fungerar också bra på ankare med de angivna hovrings- och fokustillstånden. Observera att klassen .text-whiteoch .text-mutedinte har någon ytterligare länkstil utöver understrykning.

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

Bakgrundsfärg

I likhet med de kontextuella textfärgsklasserna kan du enkelt ställa in bakgrunden för ett element till valfri kontextuell klass. Ankarkomponenter blir mörkare när du svävar, precis som textklasserna. Bakgrundsverktyg ställs inte incolor , så i vissa fall vill du använda .text-*verktyg.

.bg-primär

.bg-sekundär

.bg-framgång

.bg-fara

.bg-varning

.bg-info

.bg-light

.bg-mörk

.bg-vit

.bg-transparent

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

Bakgrundsgradient

När $enable-gradientsär inställd på true(standard är false), kan du använda .bg-gradient-verktygsklasser. Läs mer om våra Sass-alternativ för att aktivera dessa klasser och mer.

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark