Боја

Бои на тема

Ние користиме подмножество од сите бои за да создадеме помала палета на бои за генерирање шеми на бои, исто така достапни како 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,
  "black":      $black,
  "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вредностите на бојата.

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

Bootstrap не вклучува colorи background-colorалатки за секоја променлива во боја, но можете сами да ги генерирате со нашето услужно API и нашите проширени Sass карти додадени во v5.1.0.

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