Skip to main content

C чего начать

Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.

Параметры настройки

Настройте Bootstrap 4 с помощью встроенных пользовательских переменных в файл и легко переключайте глобальные CSS значения с новыми $enable-* Sass переменными. Переопределите значение переменной и пересоберите с включенным Gruntfile по мере необходимости.

Настройка переменных

Bootstrap 4 поставляется с _custom.scss файл для простой перезаписи переменных. Скопируйте и вставьте соответствующие строки _variables.scss в пользовательский файл и перекомпилируйте Sass чтобы изменить наши значения по умолчанию. Убедитесь, что удалили !default флаг от переопределения значений.

Например, чтобы поменять background-color и color для <body>, Вы могли бы сделать следующее:

// Bootstrap перекрывает
//
// Копирование переменных из `_variables.scss` в этот файл, чтобы переопределить значения по умолчанию
// без изменения исходных файлов.

$body-bg:    $gray-dark;
$body-color: $gray-light;

Сделайте то же самое для любой переменной нужно переопределить, включая глобальные параметры, перечисленные ниже.

Глобальные опции

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

Переменная Значения Описание
$spacer 1rem (default), or any value > 0 Задает значение по умолчанию для прокладки наших коммуникаций прокладка.
$enable-flex true or false (default) Поменяйте float и display: table стили для display: flex.
$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 Позволяет предопределенный transitions на различные компоненты.
$enable-hover-media-query true or false (default) ...
$enable-grid-classes true (default) or false Разрешает генерацию CSS классы для блочной системы (например,, .container, .row, .col-md-1, и т. д.).