Преминете към основното съдържание Преминете към навигацията с документи
Check
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
$teal-100
тик-200 долара
Тил-300 долара
$teal-400
$teal-500
$teal-600
$teal-700
$teal-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

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цветовите стойности.

Генериране на помощни програми

Добавен във 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/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}помощни програми за всеки цвят и ниво. Можете да направите същото и за всяка друга полезност и собственост.