Темы Bootstrap

Настройте Bootstrap 4 с помощью новых встроенных Sass-переменных для глобальных стилей и лёгкой смены тем и компонентов.

Введение

В Bootstrap 3 темы в основном создавались путём перезаписи переменных в LESS, добавления пользовательского CSS и отдельного файла стилей темы, который мы включали в dist файлы. Приложив усилия, можно было полностью изменить внешний вид Bootstrap 3, не затрагивая основных файлов. Bootstrap 4 предлагает знакомый, но немного другой подход.

Теперь темы создаются с помощью Sass-переменных, Sass-отображений и пользовательского CSS. Больше нет отдельного файла стилей темы; вместо этого можно включить встроенную тему для добавления градиентов, теней и т. д.

Sass

Используйте наши исходные Sass-файлы для работы с переменными, отображениями, миксинами и прочим. В нашем сборке мы повысили точность округления Sass до 6 (по умолчанию 5) для предотвращения проблем с округлением в браузере.

Структура файлов

По возможности избегайте изменения основных файлов Bootstrap. Для Sass это означает создание собственного файла стилей, который импортирует Bootstrap, чтобы вы могли его модифицировать и расширять. Предполагая, что вы используете менеджер пакетов, например npm, у вас будет структура файлов, подобная этой:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Если вы скачали наши исходные файлы и не используете менеджер пакетов, вам следует вручную создать структуру, похожую на эту, сохраняя исходные файлы Bootstrap отдельно от ваших.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Импортирование

В ваш custom.scss, вы импортируете исходные Sass-файлы Bootstrap. У вас есть два варианта: включить весь Bootstrap или выбрать нужные части. Мы рекомендуем второй вариант, хотя помните о некоторых требованиях и зависимостях между нашими компонентами. Вам также потребуется включить некоторые JavaScript-файлы для наших плагинов.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

После настройки вы можете начать модифицировать Sass-переменные и отображения в своём custom.scss. Вы также можете начать добавлять части Bootstrap в раздел // Optional, по мере необходимости. Мы рекомендуем использовать полный импортированный стек из файла bootstrap.scss, как отправную точку.

Значения переменных по умолчанию

Каждая Sass-переменная в Bootstrap 4 включает флаг !default, позволяющий переопределить значение переменной по умолчанию в вашем собственном Sass, не изменяя исходный код Bootstrap. Копируйте и вставляйте переменные по мере необходимости, изменяйте их значения и удаляйте флаг !default. Если переменная уже задана, она не будет перезаписана значениями по умолчанию из Bootstrap.

Вы найдёте полный список переменных Bootstrap в scss/_variables.scss. Некоторые переменные установлены в null, эти переменные не выводят свойство, пока они не будут переопределены в вашей конфигурации.

Переопределения переменных в одном и том же Sass-файле могут находиться до или после переменных по умолчанию. Однако, при переопределении в разных Sass-файлах, ваши переопределения должны предшествовать импорту Sass-файлов Bootstrap.

Вот пример изменения переменных background-color и color для <body>, при импорте и компиляции Bootstrap через npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Повторяйте по мере необходимости для любой переменной в Bootstrap, включая глобальные параметры ниже.

Отображения и циклы

Bootstrap 4 включает несколько Sass-отображений, пар «ключ-значение», которые упрощают создание семейств связанных CSS. Мы используем Sass-отображения для цветов, точек разрыва сетки и т. д. Как и Sass-переменные, все Sass-отображения включают флаг !default и могут быть переопределены и расширены.

Некоторые из наших Sass-отображений по умолчанию сливаются с пустыми. Это сделано для лёгкого расширения отображения, но имеет стоимость: удаление элементов из отображения может быть немного сложнее.

Изменение отображения

Чтобы изменить существующий цвет в нашем отображении $theme-colors, добавьте следующее в свой пользовательский Sass-файл:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Добавление в отображение

Чтобы добавить новый цвет в $theme-colors, добавьте новый ключ и значение:

$theme-colors: (
  "custom-color": #900
);

Удаление из отображения

Чтобы удалить цвета из $theme-colors, или любого другого отображения, используйте map-remove. Учтите, что вы должны вставить его между нашими требованиями и параметрами:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Необходимые ключи

Bootstrap предполагает наличие некоторых определённых ключей в Sass-отображениях, так как мы их используем и расширяем. При настройке включённых отображений вы можете столкнуться с ошибками, где используется ключ конкретного Sass-отображения.

Например, мы используем ключи primary, success, и danger из $theme-colors для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызывать проблем, но удаление может вызвать проблемы с компиляцией Sass. В таких случаях вам придётся изменить Sass-код, который использует эти значения.

Функции

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Это позволяет выбрать один цвет из отображения Sass, так же, как вы использовали цветовую переменную из версии 3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

У нас также есть другая функция для получения определённого уровня цвета из отображения $theme-colors. Отрицательные значения уровня осветят цвет, а большие значения затемнят.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

На практике вы бы вызвали функцию и передали два параметра: имя цвета из отображения $theme-colors (например, primary или danger) и числовой уровень.

.custom-element {
  color: theme-color-level(primary, -10);
}

В будущем могут быть добавлены дополнительные функции, или вы можете создать свои собственные Sass-функции для создания функций уровня для дополнительных отображений Sass, или даже универсальную функцию, если вы хотите быть более подробными.

Контрастность цветов

Дополнительная функция, включённая в Bootstrap, — функция контрастности цветов color-yiq. Она использует цветовое пространство YIQ, чтобы автоматически возвращать светлый (#fff) или тёмный (#111) контрастный цвет на основе указанного базового цвета. Эта функция особенно полезна для миксинов или циклов, где вы генерируете несколько классов.

Например, для создания цветовых образцов из отображения $theme-colors,:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Она также может быть использована для разовых потребностей в контрасте:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Вы также можете указать базовый цвет с помощью наших функций отображения цветов:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Экранирование SVG

Мы используем функцию escape-svg для экранирования символов <, > и # для фоновых изображений SVG. Эти символы должны быть экранированы для правильного отображения фоновых изображений в IE. При использовании функции escape-svg, данные URI должны быть заключены в кавычки.

Функции сложения и вычитания

Мы используем функции add и subtract для обертывания CSS-функции calc. Основная цель этих функций — избежать ошибок, когда в выражение calc передаётся значение 0 без единицы измерения. Выражения, такие как calc(10px - 0), будут возвращать ошибку во всех браузерах, несмотря на то, что они математически верны.

Пример, где calc верен:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Пример, где calc неверен:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Параметры Sass

Настройте Bootstrap 4 с помощью нашего встроенного файла пользовательских переменных и легко переключайте глобальные параметры CSS с помощью новых $enable-* Sass-переменных. Переопределите значение переменной и перекомпилируйте при необходимости с помощью npm run test. Вы можете найти и настроить эти переменные для основных глобальных параметров в файле Bootstrap scss/_variables.scss.

Переменная	Значения	Описание
`$spacer`	`1rem` (по умолчанию) или любое значение > 0	Устанавливает значение по умолчанию для отступа, чтобы автоматически генерировать наши утилиты отступов.
`$enable-rounded`	`true` (по умолчанию) или `false`	Включает предварительно определённые стили `border-radius` для различных компонентов.
`$enable-shadows`	`true` или `false` (по умолчанию)	Включает предварительно определённые стили `box-shadow` для различных компонентов.
`$enable-gradients`	`true` или `false` (по умолчанию)	Включает предварительно определённые градиенты через стили `background-image` для различных компонентов.
`$enable-transitions`	`true` (по умолчанию) или `false`	Включает предварительно определённые `transition` для различных компонентов.
`$enable-prefers-reduced-motion-media-query`	`true` (по умолчанию) или `false`	Включает `prefers-reduced-motion` медиа запрос, который подавляет определённые анимации/переходы на основе предпочтений пользователей в браузере/операционной системе.
`$enable-hover-media-query`	`true` или `false` (по умолчанию)	Устаревшее
`$enable-grid-classes`	`true` (по умолчанию) или `false`	Включает генерацию CSS-классов для системы сетки (например, `.container`, `.row`, `.col-md-1`, и т.д.).
`$enable-caret`	`true` (по умолчанию) или `false`	Включает псевдоэлемент курсор ввода `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true` (по умолчанию) или `false`	Добавить курсор «рука» к элементам кнопок, которые не отключены.
`$enable-print-styles`	`true` (по умолчанию) или `false`	Включает стили для оптимизации печати.
`$enable-responsive-font-sizes`	`true` или `false` (по умолчанию)	Включает адаптивные размеры шрифтов.
`$enable-validation-icons`	`true` (по умолчанию) или `false`	Включает иконки `background-image` в текстовых входных полях и некоторых пользовательских формах для состояний валидации.
`$enable-deprecation-messages`	`true` или `false` (по умолчанию)	Установите в `true`, чтобы отобразить предупреждения при использовании устаревших миксинов и функций, которые планируется удалить в `v5`.

Цвет

Многие компоненты и утилиты Bootstrap создаются с помощью набора цветов, определённых в Sass-отображении. Это отображение можно перебрать в Sass, чтобы быстро сгенерировать набор наборов правил.

Все цвета

Все цвета, доступные в Bootstrap 4, доступны как Sass-переменные и Sass-отображение в файле scss/_variables.scss. Это будет расширено в последующих мелких выпусках для добавления дополнительных оттенков, как и шкала серого, которую мы уже включаем.

Синий

Индиго

Фиолетовый

Розовый

Красный

Оранжевый

Желтый

Зеленый

Бирюзовый

Цвета морской волны

Вот как вы можете использовать их в вашем Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Классы полезных свойств цветов также доступны для установки color и background-color.

В будущем мы планируем предоставить карты и переменные Sass для оттенков каждого цвета, как мы это сделали с серыми цветами ниже.

Цвета темы

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

Основной

Вторичный

Успех

Опасность

Предупреждение

Информация

Светлый

Темный

Серые цвета

Расширенный набор переменных серого цвета и карта Sass в файле scss/_variables.scss для последовательных оттенков серого во всем вашем проекте. Обратите внимание, что это «холодные серые цвета», которые имеют тенденцию к светло-голубому тону, а не к нейтральным серым цветам.

100

200

300

400

500

600

700

800

900

Внутри 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
) !default;

Добавляйте, удаляйте или изменяйте значения в карте, чтобы обновить их использование во многих других компонентах. К сожалению, в настоящее время не каждый компонент использует эту карту Sass. Будущие обновления будут стремиться улучшить это. До тех пор планируйте использовать переменные ${color} и эту карту Sass.

Компоненты

Многие компоненты и инструменты Bootstrap созданы с использованием циклов @each, которые перебирают карту Sass. Это особенно полезно для генерации вариантов компонента с помощью наших $theme-colors и создания адаптивных вариантов для каждого точки разрыва.

Модификаторы

Многие компоненты Bootstrap созданы с использованием подхода базового класса-модификатора. Это означает, что основная стилизация содержится в базовом классе (например, .btn), в то время как вариации стиля ограничены классами-модификаторами (например, .btn-danger). Эти классы модификаторов созданы из карты $theme-colors, чтобы настроить количество и имя наших классов модификаторов.

Вот два примера того, как мы используем цикл по карте $theme-colors для генерации модификаторов компонента .alert и всех наших инструментов фона .bg-*.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Адаптивность

Эти циклы Sass не ограничены картами цветов. Вы также можете генерировать адаптивные варианты ваших компонентов или инструментов. Например, возьмите наши адаптивные инструменты выравнивания текста, где мы смешиваем цикл @each для карты Sass $grid-breakpoints с включением правила медиа запроса.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Если вам нужно изменить вашу $grid-breakpoints, внесенные изменения будут применены ко всем циклам, перебирающим эту карту.

Переменные CSS

Bootstrap 4 включает около двух десятков настраиваемых свойств CSS (переменных) в скомпилированном CSS. Они обеспечивают легкий доступ к часто используемым значениям, таким как наши цвета темы, точки разрыва и основные шрифтовые наборы, при работе в Инспекторе браузера, среде разработки или при общем прототипировании.

Доступные переменные

Вот переменные, которые мы включаем (обратите внимание, что :root требуется). Они находятся в нашем файле _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Примеры

Переменные CSS предлагают аналогичную гибкость переменным Sass, но без необходимости компиляции перед передачей в браузер. Например, здесь мы сбрасываем шрифт и стили ссылок на странице с помощью переменных CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Переменные точек разрыва

Хотя мы изначально включили точки разрыва в наши переменные CSS (например, --breakpoint-md), они не поддерживаются в правилах медиа запросов, но их можно использовать внутри наборов правил в правилах медиа запросов. Эти переменные точек разрыва остаются в скомпилированном CSS для обратной совместимости, учитывая, что они могут использоваться JavaScript. Узнайте больше в спецификации.

Вот пример того, что не поддерживается:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

И вот пример того, что поддерживается:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}

© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/4.5/getting-started/theming/