Түстөр

Бир нече түстүү пайдалуу класстар менен түс аркылуу маанини жеткириңиз. Ошондой эле, чычкан абалдары менен стилдөө шилтемелерин колдоону камтыйт.

Конкреттүүлүк менен мамиле кылуу

Кээде контексттик класстар башка селектордун өзгөчөлүгүнөн улам колдонулушу мүмкүн эмес. <div>Кээ бир учурларда, сиздин элементиңиздин мазмунун класс менен ороп коюу жетиштүү .

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Түс

.текст-негизги

.текст-экинчи

.текст-ийгилик

.текст-коркунуч

.текст-эскертүү

.text-info

.текст-жарык

.текст-караңгы

.text-body

.текст үнсүз

.текст-ак

.text-black-50

.text-white-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-*утилиталарды колдонгуңуз келет.

.bg-негизги

.bg-экинчи

.bg-ийгилик

.bg-коркунуч

.bg-эскертүү

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<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коюлганда , сиз пайдалуу класстарды колдоно аласыз . Бул класстарды жана башкаларды иштетүү үчүн Sass параметрлери жөнүндө билип алыңыз .truefalse.bg-gradient-

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark