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

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значений цвета.