Түстер
Түс арқылы мағынаны бірнеше түсті пайдалылық кластары арқылы жеткізіңіз. Сондай-ақ меңзер күйлері бар стильдеу сілтемелерін қолдауды қамтиды.
Ерекшелікпен күресу
Кейде контекстік сыныптарды басқа селектордың ерекшелігіне байланысты қолдану мүмкін емес. Кейбір жағдайларда, элементтің мазмұнын <div>сыныппен бірге орау үшін жеткілікті уақытша шешім болып табылады.
Көмекші технологияларға мән беру
Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .sr-onlyсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.
Түс
.мәтін-бастапқы
.мәтін-екінші
.мәтін-сәттілік
.text-қауіпті
.мәтіндік ескерту
.мәтіндік ақпарат
.мәтін-жарық
.мәтін-қараңғы
.мәтін-дене
.мәтіннің дыбысы өшірілді
.мәтін-ақ
.мәтін-қара-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