Настройка темы
Настройте 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 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 добавим дополнительные цветовые возможности, подобных серой палитре, которая уже добавлена.
Вот как использовать это в 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
.
Оттенки серого
Большой набор переменных серого и карта Sass в файле scss/_variables.scss
для последовательно идущих оттенков в вашем проекте.
В файле _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);
}
}