Kleuren
Breng betekenis over door middel van kleur met een handvol kleurgebruiksklassen. Bevat ook ondersteuning voor het opmaken van links met zweeftoestanden.
Kleur
.tekst-primair
.tekst-secundair
.tekst-succes
.tekst-gevaar
.tekst-waarschuwing
.text-info
.text-light
.text-donker
.text-body
.tekst-gedempt
.text-wit
.tekst-zwart-50
.text-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>Contextuele tekstklassen werken ook goed op ankers met de meegeleverde zweef- en focusstatussen. Merk op dat de klasse .text-whiteen .text-mutedgeen extra koppelingsstijl heeft behalve onderstrepen.
<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>Achtergrond kleur
Vergelijkbaar met de contextuele tekstkleurklassen, stel de achtergrond van een element eenvoudig in op een willekeurige contextuele klasse. Ankercomponenten worden donkerder bij zweven, net als de tekstklassen. Achtergrondhulpprogramma's stellen niet incolor , dus in sommige gevallen wilt u .text-*hulpprogramma's gebruiken.
<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>Achtergrondverloop
Wanneer $enable-gradientsis ingesteld op true(standaard is false), kunt u .bg-gradient-hulpprogrammaklassen gebruiken. Lees meer over onze Sass-opties om deze lessen en meer in te schakelen.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Omgaan met specificiteit
Soms kunnen contextuele klassen niet worden toegepast vanwege de specificiteit van een andere selector. In sommige gevallen is een afdoende oplossing om de inhoud van uw element in een <div>met de klasse te verpakken.
Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.