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

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

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

Каждая переменная Sass в BS4 имеет флаг (т.е. предварительно заданную последовательность битов, содержащую значение в двоичном исчислении) !default, что позволяет переопределить значение этой переменной Sass, заданное по умолчанию, даже после вызова (как в JS: var x = ….). этой первоначальной переменной Sass. «Копипастируйте» переменные как вам необходимо, изменяйте значения, удаляйте !default и компилируйте.

Например, чтобы изменить background-color и color для <body>, надо сделать так:

$body-bg:    $gray-900;
$body-color: $gray-600;

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

Глобальные настройки

Настраивайте 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-hover-media-query`	`true` or `false` (default)	...
`$enable-grid-classes`	`true` (default) or `false`	Задействует генерацию классов CSS для «сеточной» системы (т.е. `.container`, `.row`, `.col-md-1`, т.д.).
`$enable-print-styles`	`true` (default) or `false`	Задействует стили для оптимизации печати.

Color

Многие из компонентов и утилит Bootstrap созданы с помощью серий цветов, заданных в карте Sass. Эта карта может быть использована в цикле для быстрой генерации серий блоков кода CSS.

Все цвета

Все цвета, существующие в BS4, доступны в виде переменных и карт Sass в нашем файле scss/_variables.scss. В последующих малых релизах BS4 добавим дополнительные цветовые возможности, подобных серой палитре, которая уже добавлена.

Blue (Голубой)

Indigo (Индиго)

Purple (Пурпурный)

Pink (Розовый)

Red (Красный)

Orange (Оранжевый)

Yellow (Желтый)

Green (Зеленый)

Teal (Морской волны)

Cyan (Небесный)

Вот как использовать это в Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Цветовые классы также доступны для настройки параметров color and background-color.

Цветовые классы (Color utility classes) в BS4 – класс с единственной целью и функцией, который всегда и везде делает одно и то же.

В будущем мы нацелены на оснащение карт и переменных Sass возможностью добавлять оттенки каждого цвета, как мы сделали для палитры серого (внизу).

Цвета темы

Мы используем «субсеты» (т.е. буквально «поднабор», где X - часть набора, входящая в набор Z) цветов, чтобы создать уменьшенную цветовую палитру для генерации цветовых схем, которые доступны как переменные и карта Sass в файле scss/_variables.scss.

Primary (Главный)

Secondary (Второстепенный)

Success (Успех)

Danger (Опасность)

Warning (Предупреждение)

Info (Инфо)

Light (Светлый)

Dark (Темный)

Оттенки серого

Большой набор переменных серого и карта Sass в файле scss/_variables.scss для последовательно идущих оттенков в вашем проекте.

100

200

300

400

500

600

700

800

900

В файле _variables.scss вы найдете наши переменные цветов и карту Sass. Вот пример карты Sass для $colors.

$colors: (
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  blue: $blue,
  pink: $pink,
  purple: $purple,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-900
) !default;

Добавляйте, удаляйте или изменяйте значения цветов в карте, чтобы обновить их в прочих местах BS4. К сожалению, сегодня не каждый компонент BS4 использует (или поддерживает) эту цветовую карту Sass. Мы постараемся исправить это. А пока планируйте заранее использование переменных ${color} и цветовой карты Sass.