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
Contextuele tekstklassen werken ook goed op ankers met de meegeleverde zweef- en focusstatussen. Merk op dat de .text-whiteen .text-mutedklasse geen extra linkstijl heeft dan onderstrepen.
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.
.bg-primair
.bg-secundair
.bg-succes
.bg-gevaar
.bg-waarschuwing
.bg-info
.bg-light
.bg-donker
.bg-wit
.bg-transparant
Achtergrondverloop
Wanneer $enable-gradientsis ingesteld op waar, kunt u .bg-gradient-hulpprogrammaklassen gebruiken. Standaard $enable-gradientsis uitgeschakeld en het onderstaande voorbeeld is opzettelijk verbroken. Dit wordt gedaan om het aanpassen te vergemakkelijken vanaf het moment dat u Bootstrap gaat gebruiken. Lees meer over onze Sass-opties om deze lessen en meer in te schakelen.
.bg-gradiënt-primair
.bg-gradiënt-secundair
.bg-gradiënt-succes
.bg-gradiënt-gevaar
.bg-gradiënt-waarschuwing
.bg-gradiënt-info
.bg-gradiënt-licht
.bg-gradiënt-donker
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.