Ranglar
colorBir nechta rang foydali sinflari bilan ma'noni o'tkazing . Hover holatlari bilan uslublar havolalarini qo'llab-quvvatlashni ham o'z ichiga oladi.
Ranglar
Rangli yordamchi dasturlar yordamida matnni ranglang. Agar siz havolalarni rang berishni xohlasangiz , va holatlari bo'lgan .link-*yordamchi sinflardan foydalanishingiz mumkin.:hover:focus
.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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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>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 .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
O'ziga xoslik
Ba'zan kontekstli sinflarni boshqa selektorning o'ziga xosligi tufayli qo'llash mumkin emas. <div>Ba'zi hollarda, elementingiz tarkibini kerakli sinf bilan yoki undan ko'p semantik elementga o'rash etarli vaqtinchalik echimdir .
Sass
Quyidagi Sass funksiyasidan tashqari, ranglar va boshqalar uchun kiritilgan CSS maxsus xususiyatlari (aka CSS o‘zgaruvchilari) haqida o‘qing.
O'zgaruvchilar
Aksariyat coloryordamchi dasturlar bizning umumiy rang palitrasi o'zgaruvchilarimizdan qayta tayinlangan mavzu ranglarimiz tomonidan yaratilgan.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Kulrang ranglar ham mavjud, ammo har qanday yordamchi dasturlarni yaratish uchun faqat kichik to'plamdan foydalaniladi.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Xarita
Mavzu ranglari Sass xaritasiga joylashtiriladi, shunda biz ular orqali o'z yordamchi dasturlarimiz, komponentlar o'zgartirgichlarimiz va boshqalarni yaratishimiz mumkin.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Kulrang ranglar Sass xaritasi sifatida ham mavjud. Ushbu xarita hech qanday yordamchi dasturlar yaratish uchun ishlatilmaydi.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Utilities API
Rangli yordamchi dasturlar bizning API-da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),