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

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

Введение

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

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

Сасс

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

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

По возможности избегайте изменения основных файлов 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

// 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
// Option B: Include parts of 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 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. При использовании escape-svgфункции URI данных необходимо заключать в кавычки.

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

Мы используем функции 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.

Цвет

Многие из различных компонентов и утилит 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 в scss/_variables.scssфайле Bootstrap.

Серые

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

Внутри 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", "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);
  }
}