Рангҳо
Бо якчанд синфҳои рангӣ маънои онро тавассути ранг интиқол диҳед. Дастгирии истинодҳои ороиширо бо ҳолати ҳовер низ дар бар мегирад.
Муносибат бо мушаххасот
Баъзан синфҳои контекстӣ аз сабаби хусусияти интихобкунандаи дигар истифода намешаванд. Дар баъзе мавридҳо, роҳи ҳалли кофӣ ин аст, ки мундариҷаи элементи худро дар a <div>бо синф печонед.
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.
Ранги
.матни ибтидоӣ
.матн — дуюмдарача
.матн-муваффакият
.матн-хатар
.матн-огохй
.text-info
.матн-нур
.матн-торик
.матн-бадан
.матн хомӯш карда шудааст
.матн-сафед
.матн-сиёх-50
.матн-сафед-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>Синфҳои матнии контекстӣ инчунин дар лангарҳо бо ҳолати нишондодашуда ва фокус хуб кор мекунанд. Аҳамият диҳед, ки .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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Градиенти замина
Вақте $enable-gradientsки ба танзим гузошта шудааст true(пешфарз аст false), шумо метавонед .bg-gradient-синфҳои утилитаҳоро истифода баред. Дар бораи имконоти Sass мо маълумот гиред, то ин синфҳоро фаъол созед ва ғайра.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark