Боја

Боје теме

Користимо подскуп свих боја да креирамо мању палету боја за генерисање шема боја, такође доступне као Сасс променљиве и Сасс мапа у Боотстрап 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,
  "black":      $black,
  "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вредности боја.

Генерисање комуналних услуга

Боотстрап не укључује colorуслужне background-colorпрограме за сваку променљиву боје, али их можете сами генерисати помоћу нашег услужног АПИ-ја и наших проширених Сасс мапа додатих у в5.1.0.

1. За почетак, уверите се да сте увезли наше функције, променљиве, миксине и услужне програме.
2. Користите нашу map-merge-multiple()функцију да брзо спојите више Сасс мапа у нову мапу.
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}услужне програме за сваку боју и ниво. Исто можете учинити и за било који други комунални програм и имовину.