Spalvos

Perteikite prasmę spalvomis naudodami keletą spalvų naudingumo klasių. Apima stiliaus nuorodų su užvedimo būsenomis palaikymą.

Spalva

.text-primary

.tekstas-antrinis

.tekstas-sėkmė

.tekstas-pavojus

.teksto įspėjimas

.text-info

.tekstas-šviesa

.tekstas-tamsus

.text-body

.tekstas nutildytas

.tekstas-baltas

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

Kontekstinės teksto klasės taip pat gerai veikia su inkarais su pateiktomis užvedimo ir fokusavimo būsenomis. Atminkite, kad .text-whiteir .text-mutedklasė neturi papildomo nuorodų stiliaus, išskyrus pabraukimą.

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

Fono spalva

Panašiai kaip kontekstinio teksto spalvų klasėse, lengvai nustatykite elemento foną į bet kurią kontekstinę klasę. Inkaro komponentai patamsės užvedus pelės žymeklį, kaip ir teksto klasės. Foninės paslaugos nenustatytoscolor , todėl kai kuriais atvejais norėsite naudoti .text-*komunalines paslaugas.

.bg-pirminis

.bg-antrinis

.bg-sėkmė

.bg-pavojus

.bg-perspėjimas

.bg-info

.bg-light

.bg-tamsus

.bg-baltas

.bg-skaidrus

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

Fono gradientas

Kai $enable-gradientsnustatyta į „true“, galėsite naudoti .bg-gradient-naudingumo klases. Pagal numatytuosius nustatymus $enable-gradientsyra išjungtas, o toliau pateiktas pavyzdys yra sąmoningai sugadintas. Tai daroma siekiant lengviau tinkinti nuo to momento, kai pradedate naudoti „Bootstrap“. Sužinokite apie mūsų „Sass“ parinktis , kad įgalintumėte šias klases ir dar daugiau.

.bg-gradient-primary

.bg-gradientas-antrinis

.bg-gradientas-sėkmė

.bg-gradientas-pavojus

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradientas-tamsus

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

Susidoroti su konkretumu

Kartais kontekstinės klasės negali būti taikomos dėl kito parinkiklio specifikos. Kai kuriais atvejais pakankamas sprendimas yra sudėti elemento turinį į <div>klasę.

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.