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