Перейти к основному содержанию Перейти к навигации по документам

Bootstrap поддерживает обширную систему цветов в стилях и компонентах. Это дает возможность полно и гибко настраивать любой проект.

Цвета тем

Мы используем подмножество различных цветов, чтобы создать компактную цветовую палитру для создания цветовых схем доступных в виде переменных Sass и карте Sass в файле scss/_variables.scss.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Все эти цвета доступны в виде карты 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. Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры тем.

Обязательно следите за контрастностом при настройке цветов. Как показано ниже, мы добавили три коэффициента контрастности к каждому из основных цветов: один для текущих цветов образца, один для белого и один для черного.

$blue #007bff
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$indigo #6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$purple #6f42c1
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$pink #e83e8c
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red #dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$orange #fd7e14
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$yellow #ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$green #28a745
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal #20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan #17a2b8
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500 #adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff

Заметки о Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка и оттенения. Мы указываем значение средней точки (например, $blue-500) и используем пользовательские функции цвета, чтобы тонировать (lighten) или затемнять (darken) наши цвета с помощью Sass функции mix().

Использование 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. Вот пример Sass карты $colors:

$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.