Боја
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 не може програмски да генерира променливи, така што ние рачно креиравме променливи за секоја нијанса и сенка. Ја одредуваме вредноста на средната точка (на пр., $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
вредностите на бојата.
Генерирање на комунални услуги
Додадено во v5.1.0
Bootstrap не вклучува color
и background-color
алатки за секоја променлива во боја, но можете сами да ги генерирате со нашето услужно API и нашите проширени Sass карти додадени во v5.1.0.
- За почеток, проверете дали сте ги увезле нашите функции, променливи, мешавини и комунални услуги.
- Користете ја нашата
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}
алатки за секоја боја и ниво. Можете да го сторите истото и за која било друга алатка и имот.