Source

Тематический бутстрап

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

Введение

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

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

Сасс

Используйте наши исходные файлы 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файле вы импортируете исходные файлы Bootstrap Sass. У вас есть два варианта: включить весь 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 по умолчанию объединены в пустые. Это сделано для того, чтобы упростить расширение данной карты 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и для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызвать проблем, но их удаление может вызвать проблемы с компиляцией Sass. В этих случаях вам нужно будет изменить код Sass, который использует эти значения.danger$theme-colors

Функции

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(например, основной или опасный) и числовой уровень.

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

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

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

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

$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);
}

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

$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мере необходимости.

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

Переменная Ценности Описание
$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 Включает предопределенные transitions для различных компонентов.
$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 в scss/_variables.scssфайле Bootstrap.

Начальный
Среднее
Успех
Опасность
Предупреждение
Информация
Легкий
Темный

Серые

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

100
200
300
400
500
600
700
800
900

Внутри scss/_variables.scssвы найдете цветовые переменные Bootstrap и карту Sass. Вот пример $colorsкарты Sass:

$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-*фоновых утилит.

// 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цикл для $grid-breakpointsкарты Sass с включением медиа-запроса.

@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);
  }
}