Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish

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.scssfaylida Sass o'zgaruvchilari va Sass xaritasi sifatida mavjud.

Asosiy
Ikkilamchi
Muvaffaqiyat
Xavfli
Ogohlantirish
Ma'lumot
Nur
Qorong'i

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.

$koʻk#0d6efd
$ ko'k - 100
$ ko'k - 200
ko'k - 300 dollar
$ ko'k - 400
ko'k - 500 dollar
ko'k - 600 dollar
ko'k - 700 dollar
ko'k - 800 dollar
$ ko'k - 900
$indigo#6610f2
$indigo-100
$indigo-200
$ indigo-300
indigo-400 dollar
$ indigo-500
$indigo-600
indigo-700 dollar
indigo-800 dollar
$ indigo-900
$binafsha#6f42c1
$ binafsha - 100
binafsha - 200 dollar
binafsha - 300 dollar
binafsha - 400 dollar
binafsha - 500 dollar
binafsha - 600 dollar
binafsha - 700 dollar
binafsha - 800 dollar
binafsha - 900 dollar
$pushti#d63384
pushti - 100 dollar
pushti - 200 dollar
pushti - 300 dollar
pushti - 400 dollar
pushti - 500 dollar
pushti - 600 dollar
pushti - 700 dollar
pushti - 800 dollar
pushti - 900 dollar
$ qizil#dc3545
qizil - 100 dollar
qizil - 200 dollar
qizil - 300 dollar
qizil - 400 dollar
qizil - 500 dollar
qizil - 600 dollar
qizil - 700 dollar
qizil - 800 dollar
qizil - 900 dollar
$ apelsin#fd7e14
$ apelsin - 100
$ apelsin - 200
$ apelsin - 300
$ apelsin - 400
apelsin - 500 dollar
apelsin - 600 dollar
$ apelsin - 700
apelsin - 800 dollar
apelsin - 900 dollar
$sariq#ffc107
sariq - 100 dollar
sariq - 200 dollar
sariq - 300 dollar
sariq - 400 dollar
sariq - 500 dollar
sariq - 600 dollar
sariq - 700 dollar
sariq - 800 dollar
sariq - 900 dollar
$ yashil#198754
$ yashil - 100
$ yashil - 200
yashil - 300 dollar
$ yashil - 400
yashil - 500 dollar
yashil - 600 dollar
yashil - 700 dollar
yashil - 800 dollar
$ yashil - 900
$teal#20c997
$ teal - 100
$ teal - 200
$ teal - 300
$ teal - 400
$ teal - 500
$ teal - 600
AQSh dollari - 700 dollar
AQSh dollari - 800 dollar
AQSh dollari - 900 dollar
$siyan#0dcaf0
$siyan-100
$siyan-200
$siyan-300
$siyan-400
$siyan-500
$siyan-600
$siyan-700
$siyan-800
$siyan-900
$ kulrang - 500#adb5bd
$ kulrang - 100
$ kulrang - 200
$ kulrang - 300
$ kulrang - 400
$ kulrang - 500
kulrang - 600 dollar
kulrang - 700 dollar
kulrang - 800 dollar
kulrang - 900 dollar
$ qora#000
$ oq#fff

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-intervalqarang .scss/_functions.scssscss/_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.

  • $colorsbarcha mavjud asosiy ( 500) ranglarimizni sanab o'tadi
  • $theme-colorsbarcha semantik nomlangan mavzu ranglarini sanab o'tadi (quyida ko'rsatilgan)
  • $grayskul rangning barcha ranglari va soyalarini sanab o'tadi

ichida scss/_variables.scsssiz Bootstrap rang o'zgaruvchilari va Sass xaritasini topasiz. $colorsMana 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 colorva background-colorishlatish uchun ham mavjud .500