Отступ bootstrap: Отступы. Утилиты · Bootstrap. Версия v4.0.0

Отступы. Утилиты · Bootstrap. Версия v4.0.0

• Как это устроено
• Замечание
• Примеры
  • Горизонтальное центрирование

Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.

Как это устроено

Назначайте «отзывчивые» значения margin или padding элементу или поднабору его сторон с помощью удобных классов. Сюда входит поддержка индивидуальных свойств, всех свойств и вертикальных и горизонтальных свойств. Классы созданы дефолтной карте Sass, и варьируются от .25rem до 3rem.

Замечание

Утилиты отступов, которые работают на всех брейкпойнтах – от xs до xl – не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с min-width: 0 и выше, и т. о. не привязаны к медиа-запросам. Названия остающихся брейкпойнтов, однако, содержит в себе аббревиатуры брейкпойнтов.

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для 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-х сторон элемента

Где размер – это один из:

• 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

(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers.)

Примеры

Вот несколько понятных примеров этих классов:

.
  mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

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

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

Центрированный элемент

<div>
  Центрированный элемент
</div>

Please enable JavaScript to view the comments powered by Disqus.

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

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

08. 01.2018 От Админ 3 комментария

В 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-) для того, чтобы отступы в элементах существовали только для определенных разрешений экранов. Например, необходимо добавить отступ снизу только для экранов смартфонов, но убрать его на всех остальных разрешениях экранов:

<div> … </div>

<div> … </div>

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

<div> … </div>

<div> … </div>

Правило использования названий классов здесь такое:  формат {property}{sides}-{size} для смартфонов (xs) и {property}{sides}-{breakpoint}-{size} для других разрешений ( sm, md, lg и 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.

Возможно, вам еще будут интересны утилиты Bootstrap для скрытия/отображения элементов на разных экранах.

Просмотров: 4 579

Метки: Bootstrap-4 margin padding

Автор: Админ

Спейсинг · Bootstrap

• Как это работает
• Обозначение
• Примеры
  • Горизонтальное центрирование

Bootstrap включает в себя широкий спектр служебных классов, реагирующих на сокращения и отступы, для изменения внешнего вида элемента.

Как это работает

Назначьте адаптивные значения margin или padding элементу или подмножеству его сторон с помощью сокращенных классов. Включает поддержку отдельных свойств, всех свойств, а также вертикальных и горизонтальных свойств. Классы строятся из карты Sass по умолчанию в диапазоне от .25rem до 3rem .

Обозначение

Утилиты Spacing, которые применяются ко всем точкам останова, от xs до xl , не содержат аббревиатур точки останова. Это связано с тем, что эти классы применяются от min-width: 0 и выше и, таким образом, не связаны медиа-запросом. Однако остальные точки останова содержат аббревиатуру точки останова.

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

Где свойство является одним из:

• м — для классов, которые устанавливают запас
• p — для классов, которые устанавливают padding

Где сторон одна из:

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

Где размер является одним из:

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

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

Примеры

Вот несколько репрезентативных примеров этих классов:

 . mt-0 {
  верхняя граница: 0 !важно;
}
.мл-1 {
  левое поле: ($spacer * .25) !важно;
}
.px-2 {
  padding-left: ($spacer * .5) !важно;
  padding-right: ($spacer * .5) !важно;
}
.p-3 {
  заполнение: $спейсер !важно;
} 

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

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого на уровне блоков с фиксированной шириной, то есть содержимого, которое имеет display: block и набор ширины — путем установки горизонтальных полей на auto .

Центральный элемент

 <дел>
  Центральный элемент

 . mt-0 {
  верхняя граница: 0 !важно;
}
.мл-1 {
  левое поле: ($spacer * .25) !важно;
}
.px-2 {
  padding-left: ($spacer * .5) !важно;
  padding-right: ($spacer * .5) !важно;
}
.p-3 {
  заполнение: $спейсер !важно;
}
 

 <дел>
  Центральный элемент