Түс

Тема түстөр

Биз түс схемаларын түзүү үчүн кичирээк түс палитрасын түзүү үчүн бардык түстөрдүн бир бөлүгүн колдонобуз, ошондой эле Sass өзгөрмөлөрү жана Bootstrap scss/_variables.scssфайлында Sass картасы катары жеткиликтүү.

Бул түстөрдүн баары Sass картасы катары жеткиликтүү $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Бул түстөрдү кантип өзгөртүү керек экенин билүү үчүн биздин Sass карталарын жана циклдеринин документтерин караңыз .

Бардык түстөр

Бардык Bootstrap түстөрү Sass өзгөрмөлөрү жана scss/_variables.scssфайлдагы Sass картасы катары жеткиликтүү. Файлдын өлчөмүн көбөйтүүгө жол бербөө үчүн, биз бул өзгөрмөлөрдүн ар бири үчүн текст же фондо түс класстарын түзбөйбүз. Анын ордуна, биз тема палитрасы үчүн бул түстөрдүн бир бөлүгүн тандайбыз .

Түстөрдү ыңгайлаштырууда контрасттык катыштарга көз салууну унутпаңыз. Төмөндө көрсөтүлгөндөй, биз негизги түстөрдүн ар бирине үч контраст катышын коштук — бири үлгүдөгү учурдагы түстөр үчүн, бири ак менен, бири кара менен.

Sass боюнча эскертүүлөр

Sass программалык түрдө өзгөрмөлөрдү генерациялай албайт, ошондуктан биз ар бир түс жана көлөкө үчүн өзгөрмөлөрдү кол менен түздүк. Биз орто чекиттин маанисин аныктайбыз (мисалы, $blue-500) жана Sass'тын түс функциясы аркылуу түстөрүбүздү тонировкалоо (агартуу) же көлөкө түшүрүү (караңгылык) үчүн ыңгайлаштырылган түс функцияларын mix()колдонобуз.

Колдонуу жана mix()менен бирдей эмес - биринчиси көрсөтүлгөн түстү ак же кара менен аралаштырса, экинчиси ар бир түстүн ачыктык маанисин гана тууралайт. Натыйжада бул CodePen демосунда көрсөтүлгөндөй, түстөрдүн кыйла толук топтому .lighten()darken()

Биздин tint-color()жана shade-color()функциялар mix()биздин өзгөрмө менен бирге колдонулат $theme-color-interval, ал биз чыгарган ар бир аралаш түс үчүн кадамдык пайыздык маанини аныктайт. Толук баштапкы код үчүн scss/_functions.scssжана файлдарын караңыз .scss/_variables.scss

Түстүү Sass карталары

Bootstrap булагы Sass файлдары түстөрдүн тизмесин жана алардын он алтылык маанилерин тез жана оңой айланып өтүүгө жардам берген үч картаны камтыйт.

• $colors500биздин бардык жеткиликтүү негизги түстөрдү тизмелейт
• $theme-colorsбардык семантикалык аталыштагы тема түстөрүн тизмелейт (төмөндө көрсөтүлгөн)
• $graysбоздун бардык түстөрүн жана көлөкөлөрүн тизмелейт

ичинде scss/_variables.scssсиз Bootstrap түс өзгөрмөлөрүн жана Sass картасын таба аласыз. $colorsБул жерде Sass картасынын мисалы :

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Картадагы маанилерди кошуп, алып салыңыз же өзгөртүңүз, алар башка көптөгөн компоненттерде кантип колдонулуп жатканын жаңыртыңыз. Тилекке каршы, азыркы учурда ар бир компонент бул Sass картасын колдоно бербейт. Келечектеги жаңыртуулар муну жакшыртууга аракет кылат. Ага чейин, ${color}өзгөрмөлөрдү жана бул Sass картасын колдонууну пландаштырыңыз.

Мисал

Буларды Sassыңызда кантип колдонсоңуз болот:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Түс баалуулуктарын орнотуу жана колдонуу үчүн түс жана фон пайдалуу класстары да бар .colorbackground-color500

Утилиталарды түзүү

colorBootstrap ар бир түс өзгөрмөлөрү үчүн жана утилиталарды камтыбайт background-color, бирок сиз аларды биздин API жана v5.1.0 версиясында кошулган кеңейтилген Sass карталарыбыз менен өзүңүз түзө аласыз.

1. Баштоо үчүн, биздин функцияларды, өзгөрмөлөрдү, миксиндерди жана утилиталарды импорттоп алганыңызды текшериңиз.
2. map-merge-multiple()Бир нече Sass карталарын жаңы картага тез бириктирүү үчүн биздин функцияны колдонуңуз .
3. {color}-{level}Класс аты менен каалаган утилитаны кеңейтүү үчүн бул жаңы бириктирилген картаны бириктириңиз .

.text-purple-500Бул жерде жогорудагы кадамдарды колдонуу менен текст түсүнүн утилиталарын (мисалы, ) түзгөн мисал келтирилген.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}Бул ар бир түс жана деңгээл үчүн жаңы утилиталарды жаратат . Сиз ошондой эле башка пайдалуу жана мүлк үчүн да жасай аласыз.