Рангҳо
Бо якчанд синфҳои рангӣ маънои онро тавассути ранг интиқол диҳед. Дастгирии истинодҳои ороиширо бо ҳолати ҳовер низ дар бар мегирад.
.матни ибтидоӣ
.матн — дуюмдарача
.матн-муваффакият
.матн-хатар
.матн-огохй
.text-info
.матн-нур
.матн-торик
.матн хомӯш карда шудааст
.матн-сафед
<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>Синфҳои матнии контекстӣ инчунин дар лангарҳо бо ҳолати нишондодашуда ва фокус хуб кор мекунанд. Дар хотир доред, ки .text-whiteва .text-mutedсинф услуби истинод надорад.
<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>Монанди синфҳои рангҳои матнии контекстӣ, заминаи элементро ба ҳама гуна синфи контекстӣ ба осонӣ таъин кунед. Ҷузъҳои лангар, ба монанди синфҳои матн, дар вақти нишона торик мешаванд. Утилитҳои замина муқаррар карда намешавандcolor , бинобар ин дар баъзе мавридҳо шумо мехоҳед аз .text-*утилитаҳо истифода баред.
<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>Вақте $enable-gradientsки ҳақиқӣ муқаррар карда шудааст, шумо метавонед .bg-gradient-синфҳои утилитаҳоро истифода баред. Бо нобаёнӣ, $enable-gradientsғайрифаъол аст ва мисоли дар зер дидашуда вайрон карда шудааст. Ин барои мутобиқсозии осонтар аз лаҳзаи оғози истифодаи Bootstrap анҷом дода мешавад. Дар бораи имконоти Sass мо маълумот гиред, то ин синфҳоро фаъол созед ва ғайра.
<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>Муносибат бо мушаххасот
Баъзан синфҳои контекстӣ аз сабаби хусусияти интихобкунандаи дигар истифода намешаванд. Дар баъзе мавридҳо, роҳи ҳалли кофӣ ин аст, ки мундариҷаи элементи худро дар a <div>бо синф печонед.
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.