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 или части, вам нужные. Мы советуем делать второе, хотя тут надо знать, что в наших компонентах есть некоторые зависимости и требования. Вам также понадобится включить некоторые скрипты JS для наших плагинов.

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

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

// Add custom code after this

// Custom.scss
// Вариант Б. Включите части 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 в разделе // 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";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Ваша переменная переопределяет
$body-bg: #000;
$body-color: #111;

// Bootstrap и его переменные по умолчанию

// Необязательные
@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, но лишь эти могут использоваться в изменении тем. Мы включили эти 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, как если бы вы использовали переменную цвета в BS3.

.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`
}

Экранирование 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);
}

Пример, где 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

Настраивайте 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:

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

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

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

Цвета тем

Мы используем «субсеты» (т.е. буквально «поднабор», где X - часть набора, входящая в набор Z) цветов, чтобы создать уменьшенную цветовую палитру для генерации цветовых схем, которые доступны как переменные и карта Sass в файле scss/_variables.scss.

$primary #007bff

$secondary #868e96

$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

В файле _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;

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

Компоненты

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

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

Многие из компонентов 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 есть около 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", "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);
  }
}