värit
Välitä merkitys värien avulla kourallisen värien käyttöluokkien avulla. Sisältää myös tuen linkkien muotoilulle leijutustiloissa.
.text-primary
.teksti-toissijainen
.teksti-menestys
.teksti-vaara
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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>Kontekstikohtaiset tekstiluokat toimivat hyvin myös ankkureissa, joissa on hover- ja fokusointitilat. Huomaa, että .text-whiteja .text-mutedluokassa ei ole ylimääräistä linkkien tyyliä alleviivauksen lisäksi.
<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>Kuten kontekstuaaliset tekstin väriluokat, voit helposti asettaa elementin taustan mihin tahansa kontekstuaaliseen luokkaan. Ankkurikomponentit tummenevat leijuttaessa, aivan kuten tekstiluokat. Taustaapuohjelmia ei ole asetettucolor , joten joissain tapauksissa kannattaa käyttää .text-*apuohjelmia.
<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>Kun $enable-gradientsarvoksi on asetettu tosi, voit käyttää .bg-gradient-hyödyllisyysluokkia. Oletuksena $enable-gradientson poissa käytöstä ja alla oleva esimerkki on tarkoituksella rikki. Tämä tehdään mukauttamisen helpottamiseksi heti, kun aloitat Bootstrapin käytön. Tutustu Sass-vaihtoehtoihimme , joiden avulla voit ottaa nämä luokat käyttöön ja paljon muuta.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>Käsittelee spesifisyyttä
Joskus kontekstuaalisia luokkia ei voida käyttää toisen valitsimen spesifisyyden vuoksi. Joissakin tapauksissa riittävä kiertotapa on kääriä elementin sisältö <div>luokkaan.
Avustavan tekniikan merkityksen välittäminen
Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettu lisäteksti.