Перейти к основному содержанию Перейти к навигации по документам
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значений цвета.

Генерация утилит

Добавлено в версии 5.1.0

Bootstrap не включает colorутилиты background-colorдля каждой цветовой переменной, но вы можете создать их самостоятельно с помощью нашего API утилит и наших расширенных карт Sass, добавленных в версии 5.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}утилиты для каждого цвета и уровня. Вы можете сделать то же самое для любой другой утилиты и свойства.