Настройка темы Bootstrap

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

Введение

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

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

Sass

Использование наших исходников Sass даст вам инструменты переменных, карт, миксинов и прочего.

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

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

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

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

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

Импорт

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

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

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

// Custom.scss
// Option B: Подключите весь Bootstrap

// Требуемое
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Опциональное
@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 в секции // Опциональное.

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

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

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

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

// Ваши переназначения
$body-bg: #000;
$body-color: #111;

// Bootstrap и его переменные по умолчанию
@import "node_modules/bootstrap/scss/bootstrap";

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

Карты и циклы

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

Некоторые из карт 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, который использует эти значения.

Отдельные переменные для цветов — это хорошо, но, когда их становится большое количество, работа с цветами может стать проблематичной. Имея map только для цветов, можно разделить ее на sub-maps для различных тем.

Map идеально подходит для конфигурации проекта. Идея проста: вы связываете значения с ключами, и потом имеете доступ к ним в любой точке проекта с помощью map-get($map, $key).

Функции

Bootstrap использует несколько функций Sass, но лишь эти могут использоваться в изменении тем. Мы включили эти 3 функции для получения значения из карт цветов:

@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, как если бы вы использовали переменную цвета в v3.

.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 color space для автоматического возврата цвета светлого (#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`
}

Escape SVG

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

Сложение и вычитание функций

Мы используем функции сложения add и вычитания subtract чтобы обернуть CSS функцию calc. Основная цель этих функций - избежать ошибок, когда значение “безразмерный” 0 передается в выражение calc. Такие выражения, как 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);
}

Example where the calc is invalid:

$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 с помощью наших файлов, содержащих встроенные переменные, и с легкостью преодолевайте глобальные предпочтения CSS с помощью новых переменных Sass $enable-*. Переопределите переменную и перекомпилируйте с npm run test.

Вы можете найти и настроить эти переменные ключевых глобальных настроек в нашем файле _variables.scss.

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

Цвет

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

Все цвета

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

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

Вот как использовать это в Sass:

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

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

Цветовые классы также доступны для настройки параметров color and background-color.

Цветовые классы (Color utility classes) в Bootstrap – класс с единственной целью и функцией, который всегда и везде делает одно и то же.

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

Цвета тем

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

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Оттенки серого

Большой набор переменных серого и карта Sass в файле scss/_variables.scss для последовательно идущих оттенков в вашем проекте.

100

200

300

400

500

600

700

800

900

В файле _variables.scss вы найдете наши переменные цветов и карту 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;

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

Компоненты

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

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

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

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

// Создает классы алерт-модификатора
@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));
  }
}

// Создает утилиты цвета `.bg-*`
@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 есть около 24 стандартных свойств 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);
  }
}