Rangi
Onyesha maana kupitia rangi na madarasa machache ya matumizi ya rangi. Inajumuisha usaidizi wa viungo vya kutengeneza mitindo na hali ya kuelea, pia.
Rangi
.maandishi-msingi
.maandishi-sekondari
.mafanikio-ya-maandishi
.hatari-maandishi
.onyo la maandishi
.maelezo-ya maandishi
.mwanga wa maandishi
.maandishi-giza
.mwili wa maandishi
.maandishi-yamezimwa
.maandishi-nyeupe
.maandishi-nyeusi-50
.maandishi-nyeupe-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>Madarasa ya maandishi ya muktadha pia hufanya kazi vizuri kwenye nanga zilizo na hali ya kuelea na kuzingatia. Kumbuka kuwa the .text-whiteand .text-mutedclass haina muundo wa viungo vya ziada zaidi ya kupigia mstari.
<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>Rangi ya usuli
Sawa na madarasa ya rangi ya maandishi ya muktadha, weka kwa urahisi usuli wa kipengele kwa darasa lolote la muktadha. Vipengee vya nanga vitatiwa giza kwa kuelea, kama vile madarasa ya maandishi. Huduma za mandharinyuma hazijawekwa ,color kwa hivyo katika hali zingine utataka kutumia .text-*huduma.
<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>Background gradient
When $enable-gradients is set to true (default is false), you can use .bg-gradient- utility classes. Learn about our Sass options to enable these classes and more.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.
Conveying meaning to assistive technologies
Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.