Cмотреть на GitHub

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

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

Введение

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

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

Sass

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

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

По возможности старайтесь избегать изменения «коренных» файлов BS4. Для 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. У Вас есть два варианта: включить весь Bootstrap или выбрать нужные Вам части. Мы поощряем последнее, но имейте в виду, что между нашими компонентами есть некоторые требования и зависимости. Вам также необходимо будет включить некоторый JavaScript для наших плагинов.

// Custom.scss
// Вариант A. Включите весь Bootstrap

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

// Custom.scss
// Вариант Б. Включите части Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 включает флаг !default, позволяющий переопределить значение переменной по умолчанию в Вашем собственном Sass без изменения исходного кода Bootstrap. Скопируйте и вставьте переменные по мере необходимости, измените их значения и удалите флаг !default. Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в Bootstrap.

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

Переопределения переменных должны происходить после импорта наших функций, переменных и миксинов, но до остальной части импорта.

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки 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. Имейте в виду, что вы должны вставить его между нашими требованиями и параметрами:

// Необходимые
@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");

// По желанию
@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 так же, как Вы бы использовали цветовую переменную из 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 для автоматического возврата светлого (#fff) или темного (#111) контрастного цвета на основе указанного базового цвета. Эта функция особенно полезна для миксинов или циклов, в которых Вы создаете несколько классов.

Например, чтобы сгенерировать образцы цвета из нашей карты $theme-colors:

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

Его также можно использовать для одноразового использования контрастного вещества:

.custom-element {
  color: color-yiq(#000); // вернет `color: #fff`
}

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

.custom-element {
  color: color-yiq(theme-color("dark")); // вернет `color: #fff`
}

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

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

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

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

Пример, когда расчет действителен:

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

.element {
  // Вывод calc(.25rem - 1px) действителен
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Вывод тот же calc(.25rem - 1px) как указано выше
  border-radius: subtract($border-radius, $border-width);
}

Пример неверного вычисления:

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

.element {
  // Вывод calc(.25rem - 0) недействителен
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Вывод .25rem
  border-radius: subtract($border-radius, $border-width);
}

Параметры Sass

Настраивайте BS4 с помощью наших файлов, содержащих встроенные переменные, и с легкостью «преодолевайте» глобальные предпочтения 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.

Все цвета

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

$blue #007bff

$indigo #6610f2

$purple #6f42c1

$pink #e83e8c

$red #dc3545

$orange #fd7e14

$yellow #ffc107

$green #28a745

$teal #20c997

$cyan #17a2b8

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

// С переменной
.alpha { color: $purple; }

// Из карты Sass с нашей функцией `color()`
.beta { color: color("purple"); }

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

Цвета тем

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

$primary #007bff

$secondary #6c757d

$success #28a745

$danger #dc3545

$warning #ffc107

$info #17a2b8

$light #f8f9fa

$dark #343a40

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

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

$gray-100 #f8f9fa

$gray-200 #e9ecef

$gray-300 #dee2e6

$gray-400 #ced4da

$gray-500 #adb5bd

$gray-600 #6c757d

$gray-700 #495057

$gray-800 #343a40

$gray-900 #212529

В 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 и создания отзывчивых вариантов для каждого брейкпойнта. Когда вы настраиваете эти карты 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 включает около двух десятков настраиваемых свойств (переменных) 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", "Liberation 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);
  }
}