in English

värit

Välitä merkitys värien avulla kourallisen värien käyttöluokkien avulla. Sisältää myös tuen linkkien muotoilulle leijutustiloissa.

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.

Tarkoituksen välittäminen avustaville tekniikoille

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.

Väri

.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>

Taustaväri

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.

.bg-ensisijainen
.bg-toissijainen
.bg-menestys
.bg-vaara
.bg-varoitus
.bg-info
.bg-light
.bg-tumma
.bg-valkoinen
.bg-läpinäkyvä
<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>

Taustan gradientti

Kun $enable-gradientson asetettu arvoon true(oletus on false), voit käyttää .bg-gradient-hyödyllisyysluokkia. Tutustu Sass-vaihtoehtoihimme , joiden avulla voit ottaa nämä luokat käyttöön ja paljon muuta.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark