Farver
Formidle mening gennem farver med en håndfuld farvefunktionsklasser. Inkluderer også støtte til styling af links med svævetilstande.
Beskæftiger sig med specificitet
Nogle gange kan kontekstuelle klasser ikke anvendes på grund af en anden vælgers specificitet. I nogle tilfælde er en tilstrækkelig løsning at pakke dit elements indhold ind i en <div>med klassen.
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-onlyklassen.
Farve
.tekst-primær
.tekst-sekundær
.tekst-succes
.tekst-fare
.tekst-advarsel
.tekst-info
.tekst-lys
.tekst-mørk
.tekst-brødtekst
.tekst-dæmpet
.tekst-hvid
.tekst-sort-50
.tekst-hvid-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>Kontekstuelle tekstklasser fungerer også godt på ankre med de angivne hover- og fokustilstande. Bemærk, at klassen .text-whiteog .text-mutedikke har nogen yderligere linkstil ud over understregningen.
<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>Baggrundsfarve
I lighed med de kontekstuelle tekstfarveklasser kan du nemt indstille baggrunden for et element til enhver kontekstuel klasse. Ankerkomponenter bliver mørkere, når de svæver, ligesom tekstklasserne. Baggrundsværktøjer indstilles ikkecolor , så i nogle tilfælde vil du bruge .text-*hjælpeprogrammer.
<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>Baggrundsgradient
Når $enable-gradientser indstillet til true(standard er false), kan du bruge .bg-gradient-hjælpeklasser. Lær om vores Sass-muligheder for at aktivere disse klasser og mere.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark