Spalvos
Perteikite prasmę spalvomis naudodami keletą spalvų naudingumo klasių. Apima stiliaus nuorodų su užvedimo būsenomis palaikymą.
.text-primary
.tekstas-antrinis
.tekstas-sėkmė
.tekstas-pavojus
.teksto įspėjimas
.text-info
.tekstas-šviesa
.tekstas-tamsus
.tekstas nutildytas
.tekstas-baltas
<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</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 nuorodų stiliaus.
<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>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>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.
<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.