Bootstrap 4 spacers

257

19 апреля 2017, 10:50

Для чего нужен данный блок в Bootsrap 4 и как выставлять правильные значения в нем

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
)

Answer 1

Приведенный в вопросе блок относится к новым утилитам Bootstrap 4 – spacers, или "вставки", "прокладки".

Данная утилита предназначена для удобной адаптивной настройки полей (margin) или отступов (padding) элемента. Введены эти классы (в версию 4) потому, что поля и отступы (не считая шрифтов и цветов) - наиболее часто переопределяемые элементы Bootstrap.

Например, если вам не нужно нижнее поле в navbar, теперь достаточно добавить к navbar класс mb-0 (собственно, "mb" - это сокращение от "margin-bottom"). Можно настраивать поля и отступы как угодно – сверху, снизу, справа, слева, со всех сторон.

Еще пример: класс mx-3 установит левое и правое поля элемента (при значении $spacer по умолчанию) в 1rem.

Для отступов классы соответственно начинаются с p: .pt (padding-top), .pl (padding-left) и т.д.

Ниже – полный список.

Классы именуются по формату {свойство}{стороны}-{размер} для xs и { свойство}{ стороны}-{брейкпойнт}-{размер} для sm, md, lg и xl.

Свойства:

m – для классов, устанавливающих поля margin
p – для классов, устанавливающих отступы padding

Стороны:

t - для классов, устанавливающих margin-top или padding-top
b - для классов, устанавливающих margin-bottom или padding-bottom
l - для классов, устанавливающих margin-left или padding-left
r - для классов, устанавливающих margin-right или padding-right
x - для классов, устанавливающих оба *-left и *-right
y - для классов, устанавливающих оба *-top и *-bottom
blank - для классов, устанавливающих margin или padding на всех 4 сторонах элемента

И размер – одно из следующих значений (можно добавить собственные при помощи переменной $spacers в SASS):

0 - для классов, убирающих margin или padding (они ставятся на 0)
1 - (по умолчанию) для классов, устанавливающих margin или padding в значение $spacer-x * .25 или $spacer-y * .25
2 - (по умолчанию) для классов, устанавливающих margin или padding в значение $spacer-x * .5 или $spacer-y * .5
3 - (по умолчанию) для классов, устанавливающих margin или padding в значение $spacer-x или $spacer-y
4 - (по умолчанию) для классов, устанавливающих margin или padding в значение $spacer-x * 1.5 or $spacer-y * 1.5
5 - (по умолчанию) для классов, устанавливающих margin или padding в значение $spacer-x * 3 or $spacer-y * 3

Также предусмотрен класс для центрирования по горизонтали: mx-auto (применяется к блочному элементу с установленной шириной).

Подробнее: документация Bootstrap 4 https://v4-alpha.getbootstrap.com/utilities/spacing/