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.
<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(numatytasis yra false), galite naudoti .bg-gradient-naudingumo klases. Sužinokite apie mūsų „Sass“ parinktis , kad įgalintumėte šias klases ir dar daugiau.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
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.