Ranglar
Bir nechta rang foydali sinflari bilan rang orqali ma'noni etkazing. Hover holatlari bilan uslublar havolalarini qo'llab-quvvatlashni ham o'z ichiga oladi.
O'ziga xoslik bilan shug'ullanish
Ba'zan kontekstli sinflarni boshqa selektorning o'ziga xosligi tufayli qo'llash mumkin emas. Ba'zi hollarda, elementingiz tarkibini sinf bilan o'rash uchun etarli vaqtinchalik yechim <div>.
Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
Rang
.matn-asosiy
.matn-ikkinchi darajali
.matn-muvaffaqiyat
.text-xavf
.matn-ogohlantirish
.text-info
.matn nuri
.matn-qorong'i
.matn-tanasi
.matn ovozsiz
.matn-oq
.matn-qora-50
.matn-oq-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>Kontekstli matn sinflari, shuningdek, taqdim etilgan hover va fokus holatiga ega langarlarda ham yaxshi ishlaydi. E'tibor bering, .text-whiteva .text-mutedsinfida tagiga chizilgandan tashqari qo'shimcha havola uslubi yo'q.
<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>Fon rangi
Kontekstli matn rang sinflariga o'xshab, istalgan kontekstli sinfga elementning fonini osongina o'rnating. Anchor komponentlari xuddi matn sinflari kabi sichqonchani ko‘targanda qorayadi. Fon yordam dasturlari o'rnatilmagancolor.text-* , shuning uchun ba'zi hollarda utilitalardan foydalanishni xohlaysiz .
<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>Fon gradienti
Qachon $enable-gradientso'rnatilgan bo'lsa true(standart false), siz .bg-gradient-yordamchi dasturlardan foydalanishingiz mumkin. Ushbu sinflarni va boshqalarni yoqish uchun Sass imkoniyatlari haqida bilib oling .
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark