Source

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.

Kiungo kilichonyamazishwa

Kiungo nyeupe

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

.bg-msingi

.bg-sekondari

.bg-mafanikio

.bg-hatari

.bg-onyo

.bg-maelezo

.bg-mwanga

.bg-giza

.bg-nyeupe

.bg-wazi

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

gradient ya usuli

Ikiwekwa $enable-gradientskuwa ndivyo, utaweza kutumia .bg-gradient-madarasa ya matumizi. Kwa chaguo-msingi, $enable-gradientsimezimwa na mfano ulio hapa chini umevunjwa kimakusudi. Hii inafanywa kwa ubinafsishaji rahisi kutoka wakati unapoanza kutumia Bootstrap. Jifunze kuhusu chaguo zetu za Sass ili kuwezesha madarasa haya na zaidi.

.bg-gradient-msingi

.bg-gradient-sekondari

.bg-gradient-mafanikio

.bg-gradient-hatari

.bg-gradient-onyo

.bg-gradient-maelezo

.bg-gradient-mwanga

.bg-gradient-giza

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

Kushughulika na maalum

Wakati mwingine madarasa ya muktadha hayawezi kutumika kwa sababu ya umaalum wa kiteuzi kingine. Katika hali zingine, suluhisho la kutosha ni kufunga yaliyomo kwenye kipengee chako <div>na darasa.

Kuwasilisha maana kwa teknolojia za usaidizi

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.