Kleure
Dra betekenis oor deur kleur met 'n handvol kleurnutsklasse. Sluit ook ondersteuning vir stileringskakels met sweeftoestande in.
Omgaan met spesifisiteit
Soms kan kontekstuele klasse nie toegepas word nie as gevolg van die spesifisiteit van 'n ander keurder. In sommige gevalle is 'n voldoende oplossing om jou element se inhoud in 'n <div>met die klas toe te draai.
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.
Kleur
.teks-primêr
.teks-sekondêr
.teks-sukses
.teks-gevaar
.teks-waarskuwing
.teks-inligting
.teks-lig
.teks-donker
.teks-liggaam
.teks gedemp
.teks-wit
.teks-swart-50
.teks-wit-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>Kontekstuele teksklasse werk ook goed op ankers met die verskafde sweef- en fokustoestande. Let daarop dat die .text-whiteen .text-muted-klas geen bykomende skakelstilering buiten onderstreep het nie.
<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>Agtergrondkleur
Soortgelyk aan die kontekstuele tekskleurklasse, stel die agtergrond van 'n element maklik op enige kontekstuele klas. Ankerkomponente sal donkerder word wanneer jy beweeg, net soos die teksklasse. Agtergrondhulpprogramme stel niecolor , so in sommige gevalle sal jy hulpprogramme wil gebruik .text-*.
<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>Agtergrond gradiënt
Wanneer $enable-gradientsgestel is op true(verstek is false), kan jy .bg-gradient-nutsklasse gebruik. Kom meer te wete oor ons Sass-opsies om hierdie klasse en meer te aktiveer.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark