Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Түс

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

Тема түстөр

Биз түс схемаларын түзүү үчүн кичирээк түс палитрасын түзүү үчүн бардык түстөрдүн бир бөлүгүн колдонобуз, ошондой эле 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 картасы катары жеткиликтүү. Файлдын өлчөмүн көбөйтүүгө жол бербөө үчүн, биз бул өзгөрмөлөрдүн ар бири үчүн текст же фондо түс класстарын түзбөйбүз. Анын ордуна, биз тема палитрасы үчүн бул түстөрдүн бир бөлүгүн тандайбыз .

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

$көк#0d6efd
$көк-100
$ көк - 200
$ көк - 300
$ көк - 400
$ көк - 500
$ көк - 600
$ көк - 700
$ көк - 800
$ көк - 900
$indigo#6610f2
$индиго-100
$индиго-200
$индиго-300
$индиго-400
$индиго-500
$индиго-600
$индиго-700
$indigo-800
$индиго-900
$purple#6f42c1
$ кызгылт көк - 100
$ кызгылт көк - 200
$ кызгылт көк - 300
$ кызгылт көк - 400
$ кызгылт көк - 500
$ кызгылт көк - 600
$ кызгылт көк - 700
$ кызгылт көк - 800
$ кызгылт көк - 900
$қызгылт#d63384
$ кызгылт-100
кызгылт-200 доллар
кызгылт-300 доллар
кызгылт-400 доллар
кызгылт-500 доллар
кызгылт-600 доллар
кызгылт-700 доллар
кызгылт-800 доллар
кызгылт-900 доллар
$red#dc3545
$ кызыл-100
кызыл-200 доллар
кызыл-300 доллар
кызыл-400 доллар
кызыл-500 доллар
кызыл-600 доллар
кызыл-700 доллар
кызыл-800 доллар
кызыл-900 доллар
$апельсин#fd7e14
$апельсин-100
$апельсин-200
$апельсин-300
$апельсин-400
$апельсин-500
$апельсин-600
$апельсин-700
$апельсин-800
$апельсин-900
$сары#ffc107
сары-100 доллар
сары - 200 доллар
сары - 300 доллар
сары - 400 доллар
сары - 500 доллар
сары - 600 доллар
сары-700 доллар
сары - 800 доллар
сары - 900 доллар
$жашыл#198754
$жашыл-100
жашыл-200 доллар
жашыл - 300 доллар
жашыл-400 доллар
жашыл-500 доллар
жашыл-600 доллар
жашыл-700 доллар
жашыл-800 доллар
$жашыл-900
$teal#20c997
$ teal-100
$ кызыл-200
$ көк-300
$ кызыл-400
$ чай - 500
$ көк - 600
$ кызыл-700
$ кызыл-800
$ кызыл-900
$сиан#0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500#adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$кара#000
$ак#fff

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

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

v5.1.0 кошулган

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}Бул ар бир түс жана деңгээл үчүн жаңы утилиталарды жаратат . Сиз ошондой эле башка пайдалуу жана мүлк үчүн да жасай аласыз.