Rang

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.

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-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

Utilitlarni yaratish

5.1.0 versiyasiga qo'shilgan

Bootstrap har bir rang oʻzgaruvchisi uchun yordamchi dasturlarni oʻz ichiga olmaydi, lekin ularni API yordamchi dasturimiz va v5.1.0 da qoʻshilgan kengaytirilgan Sass xaritalarimiz yordamida coloroʻzingiz yaratishingiz mumkin .background-color

1. Boshlash uchun funksiyalarimiz, o‘zgaruvchilarimiz, miksinlar va yordamchi dasturlarimizni import qilganingizga ishonch hosil qiling.
2. map-merge-multiple()Bir nechta Sass xaritalarini yangi xaritada tezda birlashtirish uchun bizning funksiyamizdan foydalaning.
3. {color}-{level}Har qanday yordamchi dasturni sinf nomi bilan kengaytirish uchun ushbu yangi birlashtirilgan xaritani birlashtiring .

.text-purple-500Yuqoridagi amallar yordamida matn rangi yordam dasturlarini (masalan, ) yaratadigan misol .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}Bu har bir rang va daraja uchun yangi yordamchi dasturlarni yaratadi. Boshqa har qanday yordamchi va mulk uchun ham xuddi shunday qilishingiz mumkin.