Колер
Bootstrap падтрымліваецца шырокай каляровай сістэмай, якая тэматызуе нашы стылі і кампаненты. Гэта дазваляе больш комплексна наладжваць і пашыраць любы праект.
Колеры тэмы
Мы выкарыстоўваем падмноства ўсіх колераў для стварэння меншай каляровай палітры для стварэння каляровых схем, таксама даступных у выглядзе зменных Sass і карты Sass у scss/_variables.scss
файле Bootstrap.
Усе гэтыя колеры даступныя ў выглядзе карты Sass $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Праверце нашы карты і цыклы Sass , каб даведацца, як змяніць гэтыя колеры.
Усе колеры
Усе колеры Bootstrap даступныя ў выглядзе зменных Sass і карты Sass у scss/_variables.scss
файле. Каб пазбегнуць павелічэння памераў файлаў, мы не ствараем класы колеру тэксту або фону для кожнай з гэтых зменных. Замест гэтага мы выбіраем падмноства гэтых колераў для тэматычнай палітры .
Не забудзьцеся сачыць за каэфіцыентам кантраснасці, калі вы наладжваеце колеры. Як паказана ніжэй, мы дадалі тры каэфіцыента кантраснасці да кожнага з асноўных колераў — адзін для бягучых колераў узору, адзін для белага і адзін для чорнага.
Нататкі пра Sass
Sass не можа праграмна генераваць зменныя, таму мы самі стварылі зменныя для кожнага адцення і адцення. Мы вызначаем сярэдняе значэнне (напрыклад, $blue-500
) і выкарыстоўваем карыстальніцкія функцыі колеру, каб адцяніць (асвятліць) або адцяніць (пацямніць) колеры з дапамогай mix()
функцыі колеру Sass.
Выкарыстанне mix()
не тое ж самае, што lighten()
і darken()
— першае змешвае ўказаны колер з белым або чорным, у той час як другое толькі рэгулюе значэнне асветленасці кожнага колеру. У выніку атрымліваецца значна больш поўны набор колераў, як паказана ў гэтай дэманстрацыі CodePen .
Нашы tint-color()
і shade-color()
функцыі выкарыстоўваюць mix()
разам з нашай $theme-color-interval
зменнай, якая вызначае ступеньчатае працэнтнае значэнне для кожнага змешанага колеру, які мы вырабляем. Поўны зыходны код глядзіце ў файлах scss/_functions.scss
і .scss/_variables.scss
Каляровыя карты Sass
Зыходныя файлы Sass Bootstrap уключаюць тры карты, якія дапамогуць вам хутка і лёгка перабіраць спіс колераў і іх шаснаццатковыя значэнні.
$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
значэнняў колеру.