Төсләр

Төсләр ярдәмендә мәгънә ярдәмендә берничә төсле класслар белән җиткерегез. Ховер штатлары белән стильләштерү өчен ярдәм дә кертә.

Конкретлык белән эш итү

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

Ярдәмче технологияләргә мәгънә җиткерү

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

Төс

.text-primary

.text-secondary

.text-уңыш

.text-куркыныч

.text-кисәтү

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.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-информация

.bg-яктылык

.bg-караңгы

.bg-белый

.bg-ачык

<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