Вы здесь: Главная » Bootstrap » Классы Bootstrap 4 для управления отступами

Классы Bootstrap 4 для управления отступами

В 4-й версии Bootstrap разработчики решили создать ряд классов, которые позволяют увеличивать внутренний (padding) и внешний (margin) отступ для блочных (display: block) или строчно-блочных элементов (display: inline-block).

Эти классы получили название "утилит расстояния" (Spacing utilities) и позволяют изменять отступы в пределах от .25rem до 3rem. Классы для управления отступами позволяют назначить их как по вертикальным, так и по горизонтальным сторонам. Их названия тесно связаны с соответствующими css-свойствами, а именно начинаются с буквы:

  • 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
  • без буквы -  для классов, устанавливающих margin или padding для всех 4-х сторон элемента

Значение величин отступов:

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

По умолчанию, переменная $spacer имеет значение 1rem. Т.е. значения величин отступов меняются от 0.25rem до 3rem с шагом, который увеличивает предыдущее значение вдвое. Подразумевается, что используется стандартный шрифт размером в 16px. Соответственно, отступы имеют значения от 4px до 48px.

Вы можете добавить больше величин, если добавите новые значения в карту SASS (Sass map) для переменной $spacers.

Следует отметить, что классы отступов предполагают еще указание классов адаптивной сетки (-md-, -sm-, -lg-, -xl-) для того, чтобы отступы в элементах существовали только для определенных разрешений экранов. Например, необходимо добавить отступ снизу только для экранов смартфонов, но убрать его на всех остальных разрешениях экранов:

Если нужно добавить внутренний отступ на небольших экранах, можно использовать такой код:

Правило использования названий классов здесь такое:  формат {property}{sides}-{size} для смартфонов (xs) и {property}{sides}-{breakpoint}-{size} для других разрешений ( smmdlg и xl).

Горизонтальное выравнивание

Также в Bootstrap 4 существует класс .mx-auto для горизонтального выравнивания блочных элементов с установленной для них фиксированной шириной. Это значит, что для элемента должны быть записаны такие css-свойства:display: block и width, а уже класс добавит горизонтальные margin со значением auto.

Пример использования классов для внутренних отступов

Внутренний отступ - это padding, поэтому все классы начинаются с английской буквы p.

See the Pen Bootstrap 4 Padding Classes by Elen (@ambassador) on CodePen.18892

Пример использования классов для внешних отступов

Внутренний отступ - это margin, поэтому все классы начинаются с английской буквы m. в нижней части примера размещены классы, в которых одна или 2 стороны имеют  margin: auto.

See the Pen Bootstrap 4 Margin Classes by Elen (@ambassador) on CodePen.18892

Ссылка на документацию Bootstrap 4.

1 Комментарий

  1. Вроде бы ничего сложного. Но где это можно использовать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *