Түс
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 картасы катары жеткиликтүү. Файлдын өлчөмүн көбөйтүүнү болтурбоо үчүн, биз бул өзгөрмөлөрдүн ар бири үчүн текст же фондо түс класстарын түзбөйбүз. Анын ордуна, биз тема палитрасы үчүн бул түстөрдүн бир бөлүгүн тандайбыз .
Түстөрдү ыңгайлаштырууда контрасттык катыштарга көз салууну унутпаңыз. Төмөндө көрсөтүлгөндөй, биз негизги түстөрдүн ар бирине үч контраст катышын коштук — бири үлгүдөгү учурдагы түстөр үчүн, бири ак менен, бири кара менен.
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 файлдары түстөрдүн тизмесин жана алардын он алтылык маанилерин тез жана оңой айланып өтүүгө жардам берген үч картаны камтыйт.
$colors
500
биздин бардык жеткиликтүү негизги түстөрдү тизмелейт$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,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Картадагы маанилерди кошуп, алып салыңыз же өзгөртүңүз, алар башка көптөгөн компоненттерде кантип колдонулуп жатканын жаңыртыңыз. Тилекке каршы, азыркы учурда ар бир компонент бул Sass картасын колдоно бербейт. Келечектеги жаңыртуулар муну жакшыртууга аракет кылат. Ага чейин, ${color}
өзгөрмөлөрдү жана бул Sass картасын колдонууну пландаштырыңыз.
Мисал
Буларды Sassыңызда кантип колдонсоңуз болот:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Түс баалуулуктарын орнотуу жана колдонуу үчүн түс жана фон пайдалуу класстары да бар .color
background-color
500
Утилиталарды түзүү
v5.1.0 кошулган
Bootstrap ар бир түс өзгөрмөлөрү үчүн утилиталарды камтыбайт color
, background-color
бирок сиз аларды биздин API жана v5.1.0 версиясында кошулган кеңейтилген Sass карталарыбыз менен өзүңүз түзө аласыз.
- Баштоо үчүн, биздин функцияларды, өзгөрмөлөрдү, миксиндерди жана утилиталарды импорттоп алганыңызды текшериңиз.
map-merge-multiple()
Бир нече Sass карталарын жаңы картага тез бириктирүү үчүн биздин функцияны колдонуңуз .{color}-{level}
Класс аты менен каалаган утилитаны кеңейтүү үчүн бул жаңы бириктирилген картаны бириктириңиз .
.text-purple-500
Бул жерде жогорудагы кадамдарды колдонуу менен текст түсүнүн утилиталарын (мисалы, ) түзгөн мисал келтирилген.
@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}
Бул ар бир түс жана деңгээл үчүн жаңы утилиталарды жаратат . Сиз ошондой эле башка пайдалуу жана мүлк үчүн да жасай аласыз.