Боја
Боотстрап је подржан опсежним системом боја који обрађује наше стилове и компоненте. Ово омогућава свеобухватније прилагођавање и проширење за било који пројекат.
Боје теме
Користимо подскуп свих боја да креирамо мању палету боја за генерисање шема боја, такође доступне као Сасс променљиве и Сасс мапа у Боотстрап scss/_variables.scss
датотеци.
Све ове боје су доступне као Сасс мапа, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Погледајте наше Сасс мапе и документе о петљама како да измените ове боје.
Све боје
Све Боотстрап боје су доступне као Сасс променљиве и Сасс мапа у scss/_variables.scss
датотеци. Да бисмо избегли повећање величине датотека, не креирамо класе боја текста или позадине за сваку од ових променљивих. Уместо тога, бирамо подскуп ових боја за палету тема .
Обавезно пратите однос контраста док прилагођавате боје. Као што је приказано у наставку, додали смо три односа контраста свакој од главних боја — један за тренутне боје узорка, један за белу и једну за црну.
Белешке о Сасс-у
Сасс не може програмски да генерише променљиве, па смо сами ручно креирали променљиве за сваку нијансу и нијансу. Ми специфицирамо вредност средње тачке (нпр. $blue-500
) и користимо прилагођене функције боја да нијансирамо (светлимо) или сенчимо (потамнимо) наше боје преко Сасс-ове mix()
функције боје.
Употреба mix()
није исто што lighten()
и darken()
—прва меша наведену боју са белом или црном, док друга само прилагођава вредност светлости сваке боје. Резултат је много потпунији скуп боја, као што је приказано у овом ЦодеПен демо-у .
Наше tint-color()
и shade-color()
функције користе mix()
заједно са нашом $theme-color-interval
променљивом, која одређује степенасту процентуалну вредност за сваку мешану боју коју производимо. Погледајте scss/_functions.scss
и scss/_variables.scss
датотеке за цео изворни код.
Цолор Сасс мапе
Изворне Сасс датотеке Боотстрапа укључују три мапе које ће вам помоћи да брзо и лако пређете преко листе боја и њихових хексадецималних вредности.
$colors
наводи све наше доступне основне (500
) боје$theme-colors
наводи све семантички именоване боје теме (приказане испод)$grays
наводи све нијансе и нијансе сиве
Унутар scss/_variables.scss
, наћи ћете Боотстрап-ове променљиве боја и Сасс мапу. Ево примера $colors
Сасс мапе:
$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
);
Додајте, уклоните или измените вредности унутар мапе да бисте ажурирали начин на који се користе у многим другим компонентама. Нажалост, у овом тренутку, не користи свака компонента ову Сасс мапу. Будућа ажурирања ће настојати да то побољшају. До тада, планирајте да користите ${color}
варијабле и ову Сасс мапу.
Пример
Ево како их можете користити у свом Сасс-у:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Корисне класе боја и позадинеcolor
су такође доступне за подешавање и background-color
коришћење 500
вредности боја.
Генерисање комуналних услуга
Додато у в5.1.0
Боотстрап не укључује color
услужне background-color
програме за сваку променљиву боје, али их можете сами генерисати помоћу нашег услужног АПИ-ја и наших проширених Сасс мапа додатих у в5.1.0.
- За почетак, уверите се да сте увезли наше функције, променљиве, миксине и услужне програме.
- Користите нашу
map-merge-multiple()
функцију да брзо спојите више Сасс мапа у нову мапу. - Спојите ову нову комбиновану мапу да бисте проширили било који услужни програм
{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}
услужне програме за сваку боју и ниво. Исто можете учинити и за било који други комунални програм и имовину.