Параметры настройки
Настройте Bootstrap 4 с помощью нашего встроенного файла пользовательских переменных и легко переключите глобальные настройки CSS с новыми переменными $enable-* Sass. Переопределите значение переменной и перекомпилируйте с включенным Gruntfile по мере необходимости.
Настройка переменных
Bootstrap 4 поставляется с файлом _custom.scss для легкого переопределения переменных по умолчанию в /scss/_variables.scss. Скопируйте и вставьте соответствующие строки оттуда в файл _custom.scss измените значения и перекомпилируйте ваш Sass, чтобы изменить значения по умолчанию. Обязательно удалите флаг !default из переопределенных значений.
Например, чтобы изменить background-color и color для <body>, вы должны сделать следующее:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
$body-bg: $gray-dark;
$body-color: $gray-light;Сделайте то же самое для любой переменной, которую вам нужно переопределить, включая глобальные опции, перечисленные ниже.
Глобальные параметры
Вы можете найти и настроить эти переменные для ключевых глобальных параметров в нашем файле _variables.scss.
| Переменная | Значения | Описание |
|---|---|---|
$spacer |
1rem (по умолчанию) или любое значение > 0 |
Указывает значение разделителя по умолчанию для наших утилит spacer. |
$enable-rounded |
true (по умолчанию) или false |
Включает предопределенные стили border-radius для различных компонентов. |
$enable-shadows |
true или false (по умолчанию) |
Включает предопределенные стили box-shadow для различных компонентов. |
$enable-gradients |
true или false (по умолчанию) |
Включает предопределенные градиенты с помощью стилей background-image для различных компонентов. |
$enable-transitions |
true (по умолчанию) или false |
Включает предопределенные transitions для различных компонентов. |
$enable-hover-media-query |
true или false (по умолчанию) |
… |
$enable-grid-classes |
true (по умолчанию) или false |
Позволяет генерировать классы CSS для grid-системы (например, .container, .row, .col-md-1, etc.). |
$enable-print-styles |
true (по умолчанию) или false |
Включает стили для оптимизации печати. |