Kleuren
Bring betsjutting oer troch kleur mei in hantsjefol kleurnutsklassen. Omfettet ek stipe foar stylingkeppelings mei hoverstaten.
Omgean mei spesifisiteit
Soms kinne kontekstuele klassen net tapast wurde fanwege de spesifisiteit fan in oare selector. Yn guon gefallen is in foldwaande oplossing om de ynhâld fan jo elemint yn in <div>mei de klasse te wikkeljen.
Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.
Kleur
.text-primary
.tekst-sekundêr
.tekst-sukses
.tekst-gefaar
.tekst-warskôging
.tekst-ynfo
.tekst-ljocht
.text-donker
.text-body
.tekst-muted
.tekst-wyt
.text-swart-50
.tekst-wyt-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 tekstklassen wurkje ek goed op ankers mei de levere hover- en fokussteaten. Tink derom dat de .text-whiteen .text-mutedklasse hat gjin ekstra keppeling styling foarby underline.
<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>Achtergrûn kleur
Fergelykber mei de kontekstuele tekstkleurklassen, set de eftergrûn fan in elemint maklik yn op elke kontekstuele klasse. Ankerkomponinten sille donkerder wurde by hover, krekt lykas de tekstklassen. Eftergrûnhelpprogramma's wurde net ynsteldcolor , dus yn guon gefallen wolle jo .text-*helpprogramma's brûke.
<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>Eftergrûn gradient
Wannear $enable-gradientsis ynsteld op true(standert is false), kinne jo gebrûksklassen brûke .bg-gradient-. Learje oer ús Sass-opsjes om dizze klassen en mear yn te skeakeljen.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark