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

Цвет

Цвета

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

В версии 5.3.0 цветовая палитра Bootstrap продолжает расширяться и становится более нюансированной. Мы добавили новые переменные для secondary и tertiary цвета текста и фона, а также {color}-bg-subtle, {color}-border-subtle и {color}-text для нашего цвета темы. Эти новые цвета доступны через переменные Sass и CSS (но не наши карты цветов или служебные классы) с явной целью упростить настройку нескольких цветовых режимов, таких как светлый и темный. Эти новые переменные глобально установлены в :root и адаптированы для нашего нового темного цветового режима, в то время как исходные цвета темы остаются неизменными.

Цвета, оканчивающиеся на -rgb, предоставляют значения red, green, blue для использования в цветовых режимах rgb() и rgba(). Например, rgba(var(--bs-secondary-bg-rgb), .5).

Внимание! Существует некоторая потенциальная путаница с нашими новыми вторичными и третичными цветами и нашим существующим вторичным цветом темы, а также с нашими светлыми и темными цветами темы. Ожидайте, что это будет исправлено в v6.
Описание Образец Переменные
Body — Передний план (цвет) и фон по умолчанию, включая компоненты.
 
--bs-body-color
--bs-body-color-rgb
 
--bs-body-bg
--bs-body-bg-rgb
Secondary — Используйте опцию color для более светлого текста. Используйте опцию bg для разделителей и для указания отключенных состояний компонентов.
 
--bs-secondary-color
--bs-secondary-color-rgb
 
--bs-secondary-bg
--bs-secondary-bg-rgb
Tertiary — Используйте опцию color для еще более светлого текста. Используйте опцию bg , чтобы стилизовать фоны для состояний hover, accents и wells.
 
--bs-tertiary-color
--bs-tertiary-color-rgb
 
--bs-tertiary-bg
--bs-tertiary-bg-rgb
Emphasis — Для более контрастного текста. Не применимо для фона.
 
--bs-emphasis-color
--bs-emphasis-color-rgb
Border — Для границ компонентов, разделителей и правил. Используйте --bs-border-color-translucent для смешивания с фоном со значением rgba().
 
--bs-border-color
--bs-border-color-rgb
Primary — Цвет основной темы, используемый для гиперссылок, стилей фокуса, активных состояний компонентов и форм.
Primary
--bs-primary
--bs-primary-rgb
Background subtle
--bs-primary-bg-subtle
Border subtle
--bs-primary-border-subtle
Text
--bs-primary-text
Success — Цвет темы, используемый для положительных или успешных действий и информации.
Success
--bs-success
--bs-success-rgb
Background subtle
--bs-success-bg-subtle
Border subtle
--bs-success-border-subtle
Text
--bs-success-text
Danger — Цвет темы, используемый для ошибок и опасных действий.
Danger
--bs-danger
--bs-danger-rgb
Background subtle
--bs-danger-bg-subtle
Border subtle
--bs-danger-border-subtle
Text
--bs-danger-text
Warning — Цвет темы, используемый для неразрушающих предупреждающих сообщений.
Warning
--bs-warning
--bs-warning-rgb
Background subtle
--bs-warning-bg-subtle
Border subtle
--bs-warning-border-subtle
Text
--bs-warning-text
Info — Цвет темы, используемый для нейтрального и информативного контента.
Info
--bs-info
--bs-info-rgb
Background subtle
--bs-info-bg-subtle
Border subtle
--bs-info-border-subtle
Text
--bs-info-text
Light — Дополнительная опция темы для менее контрастных цветов.
Light
--bs-light
--bs-light-rgb
Background subtle
--bs-light-bg-subtle
Border subtle
--bs-light-border-subtle
Text
--bs-light-text
Dark — Дополнительная опция темы для более контрастных цветов.
Dark
--bs-dark
--bs-dark-rgb
Background subtle
--bs-dark-bg-subtle
Border subtle
--bs-dark-border-subtle
Text
--bs-dark-text

Использование новых цветов

Эти новые цвета доступны через переменные CSS и служебные классы, такие как --bs-primary-bg-subtle и .bg-primary-subtle, что позволяет вам создавать собственные правила CSS с помощью переменных или быстро применять их. стили через классы. Утилиты построены с переменными CSS, связанными с цветом, и, поскольку мы настраиваем эти переменные CSS для темного режима, они также адаптируются к цветовому режиму по умолчанию.

Пример элемента с утилитами
html
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Пример элемента с утилитами
</div>

Цвета темы

Мы используем подмножество всех цветов, чтобы создать меньшую цветовую палитру для создания цветовых схем, также доступных в виде переменных 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 #0d6efd
$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 #d63384
$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 #198754
$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 #0dcaf0
$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) и используем пользовательские цветовые функции для придания оттенка (осветления) или затенения (затемнения) наших цветов с помощью цветовой функции 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,
  "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.

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

Добавлено в версии 5.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} для каждого цвета и уровня. То же самое можно сделать и с любыми другими коммунальными предприятиями и объектами недвижимости.