Rang
Bootstrap bizning uslublar va komponentlarimizga mavzu bo'lgan keng qamrovli rang tizimi tomonidan qo'llab-quvvatlanadi. Bu har qanday loyiha uchun yanada kengroq moslashtirish va kengaytirish imkonini beradi.
Mavzu ranglari
Rang sxemalarini yaratish uchun kichikroq ranglar palitrasini yaratish uchun barcha ranglarning kichik to'plamidan foydalanamiz, shuningdek, Bootstrap scss/_variables.scss
faylida Sass o'zgaruvchilari va Sass xaritasi sifatida mavjud.
Bu ranglarning barchasi Sass xaritasi sifatida mavjud $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ushbu ranglarni qanday o'zgartirish haqida bizning Sass xaritalari va loops hujjatlarini ko'rib chiqing .
Barcha ranglar
Barcha Bootstrap ranglari Sass o'zgaruvchilari va fayldagi Sass xaritasi sifatida mavjud scss/_variables.scss
. Fayl o'lchamlarini oshirishning oldini olish uchun biz ushbu o'zgaruvchilarning har biri uchun matn yoki fon rangi sinflarini yaratmaymiz. Buning o'rniga biz mavzular palitrasi uchun ushbu ranglarning bir qismini tanlaymiz .
Ranglarni sozlashda kontrast nisbatlarini kuzatib boring. Quyida ko'rsatilganidek, biz asosiy ranglarning har biriga uchta kontrast nisbati qo'shdik - biri namunaning joriy ranglari uchun, biri oqga qarshi va biri qoraga qarshi.
Sass haqida eslatmalar
Sass dasturiy ravishda o'zgaruvchilarni yarata olmaydi, shuning uchun biz har bir rang va soya uchun o'zgaruvchilarni qo'lda yaratdik. Biz o'rta nuqta qiymatini belgilaymiz (masalan, $blue-500
) va Sassning mix()
rang funksiyasi orqali ranglarimizni bo'yash (ochlash) yoki soya qilish (qoraytirish) uchun maxsus rang funksiyalaridan foydalanamiz.
Foydalanish va mix()
bilan bir xil emas - birinchisi belgilangan rangni oq yoki qora bilan aralashtirsa, ikkinchisi faqat har bir rangning ochiqlik qiymatini sozlaydi. Natijada, CodePen demosida ko'rsatilganidek , ranglarning ancha to'liq to'plami .lighten()
darken()
Bizning tint-color()
va shade-color()
funksiyalarimiz biz ishlab chiqargan har bir aralash rang uchun bosqichma-bosqich foiz qiymatini belgilaydigan o'zgaruvchimiz mix()
bilan birga ishlatiladi. To'liq manba kodi uchun va fayllarga $theme-color-interval
qarang .scss/_functions.scss
scss/_variables.scss
Rangli Sass xaritalar
Bootstrap-ning Sass manba fayllari ranglar ro'yxati va ularning olti burchakli qiymatlarini tez va oson aylanib o'tishga yordam beradigan uchta xaritani o'z ichiga oladi.
$colors
barcha mavjud asosiy (500
) ranglarimizni sanab o'tadi$theme-colors
barcha semantik nomlangan mavzu ranglarini sanab o'tadi (quyida ko'rsatilgan)$grays
kul rangning barcha ranglari va soyalarini sanab o'tadi
ichida scss/_variables.scss
siz Bootstrap rang o'zgaruvchilari va Sass xaritasini topasiz. $colors
Mana Sass xaritasiga misol :
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Xarita ichidagi qiymatlarni qoʻshing, oʻchiring yoki oʻzgartiring, ular boshqa komponentlarda qanday ishlatilishini yangilang. Afsuski, hozirgi vaqtda har bir komponent ushbu Sass xaritasidan foydalanmaydi. Kelgusi yangilanishlar buni yaxshilashga intiladi. Ungacha ${color}
o'zgaruvchilardan va ushbu Sass xaritasidan foydalanishni rejalashtiring.
Misol
Bularni Sassingizda qanday ishlatishingiz mumkin:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Rang va fon yordam sinflari rang qiymatlarini o'rnatish color
va background-color
ishlatish uchun ham mavjud .500