Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Боја

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

Погрижете се да го следите односот на контрастот додека ги прилагодувате боите. Како што е прикажано подолу, додадовме три соодноси на контраст на секоја од главните бои - еден за тековните бои на примерокот, еден за против бело и еден за против црно.

$сино#0d6efd
Сино-100 долари
Сино-200 долари
Сино-300 долари
Сино-400 долари
Сино-500 долари
Сино-600 долари
Сино-700 долари
Сино-800 долари
Сино-900 долари
$индиго#6610f2
$ индиго-100
индиго-200 долари
$ индиго-300
индиго-400 долари
индиго-500 долари
индиго-600 долари
индиго-700 долари
индиго-800 долари
индиго-900 долари
$ виолетова#6f42c1
Виолетова-100 долари
Виолетова - 200 долари
Виолетова - 300 долари
Виолетова - 400 долари
Виолетова-500 долари
Виолетова - 600 долари
Виолетова-700 долари
Виолетова - 800 долари
Виолетова - 900 долари
$розова#d63384
розова-100 долари
розова - 200 долари
розова-300 долари
розова-400 долари
розова-500 долари
розова-600 долари
розова-700 долари
розова-800 долари
розова-900 долари
$ црвено#dc3545
црвено-100 долари
црвено-200 долари
црвено-300 долари
црвено-400 долари
црвено-500 долари
црвено-600 долари
црвено-700 долари
црвено-800 долари
црвено-900 долари
$ портокал#fd7e14
Портокал - 100 долари
Портокал - 200 долари
Портокал - 300 долари
Портокал - 400 долари
Портокал - 500 долари
Портокал - 600 долари
Портокал-700 долари
Портокал-800 долари
Портокал-900 долари
$жолта#ffc107
жолто-100 долари
жолта-200 долари
жолта-300 долари
жолта-400 долари
жолта-500 долари
жолта-600 долари
жолта-700 долари
жолта-800 долари
жолта-900 долари
$зелено#198754
$ зелено-100
$ зелено-200
зелено-300 долари
зелено-400 долари
зелено-500 долари
зелено-600 долари
зелено-700 долари
$ зелено-800
зелено-900 долари
$теал#20c997
ТЕАЛ-100 долари
ТЕАЛ-200 долари
ТЕАЛ-300 долари
калај-400 долари
ТЕАЛ-500 долари
ТЕАЛ-600 долари
ТЕАЛ-700 долари
ТЕАЛ-800 долари
калај-900 долари
$ цијан#0dcaf0
цијан-100 долари
цијан-200 долари
цијан-300 долари
цијан-400 долари
цијан-500 долари
цијан-600 долари
цијан-700 долари
цијан-800 долари
цијан-900 долари
сива долари - 500 долари#adb5bd
$ сиво-100
$ сива-200
сива долари - 300 долари
Сива долари - 400 долари
сива долари - 500 долари
Сива долари - 600 долари
сива долари - 700 долари
сива долари - 800 долари
Сива долари - 900 долари
$ црно#000
$ бело#ффф

Белешки за Сас

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.

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