Padding bootstrap 4: Bootstrap 4 — Управление margin и padding отступами

Интервал · Bootstrap v4.5

Посмотреть на GitHub Оригинал

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
• пустой — для классов, которые устанавливают 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 на авто

(Вы можете добавить больше размеров, добавив записи в переменную карты 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>

Отрицательные поля

В CSS свойства margin могут использовать отрицательные значения (padding не могут). Начиная с версии 4.2, мы добавили утилиты с отрицательными полями для каждого ненулевого целого размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки полей столбцов сетки в контрольных точках.

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

Вот пример класса, противоположного .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Вот пример настройки сетки Bootstrap в средней контрольной точке (md) и выше. Мы увеличили отступы .col с помощью .px-md-5, а затем нейтрализовали это с помощью .mx-md-n5 в родительском .row.

Пользовательские отступы столбцов

Пользовательские отступы столбцов

<div>
  <div><div>Пользовательские отступы столбцов</div></div>
  <div><div>Пользовательские отступы столбцов</div></div>
</div>

Bootstrap Бутстрап 4 Utilities

❮ Назад Дальше ❯

---

Утилиты Bootstrap 4

Bootstrap 4 имеет множество утилит/вспомогательных классов для быстрого стиля элементов без использования CSS-кода.

---

Границы

Используйте border классы для добавления или удаления границ элемента:

Пример

Пример

<span></span>
<span></span>
<span></span>
<span></span>
<span class=»border border-bottom-0″></span>

<span></span>

---

Цвет границы

Добавьте цвет к границе с любым из контекстных классов цвета границы:

Пример

Пример

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

---

Радиус границы

Добавьте скругленные углы к элементу с помощью rounded классов:

Пример

Пример

<span></span>
<span></span>
<span></span>
<span class=»rounded-bottom»></span>
<span></span>
<span></span>
<span class=»rounded-0″></span>

---

---

Поплавок и Clearfix

Float элемент вправо с . float-right классом или слева с .float-left, и очистить поплавки с .clearfix классом:

Пример

Float left Float right

Пример

<div>
  <span>Float left</span>
  <span class=»float-right»>Float right</span>
</div>

---

Отзывчивые поплавки

Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float (.float-*-left|right — where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

Пример

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Пример

<div>Float right on small screens or wider</div><br>
<div>Float right on medium screens or wider</div><br>
<div>Float right on large screens or wider</div><br>
<div>Float right on extra large screens or wider</div><br>
<div>Float none</div>

---

Выравнивание по центру

Центрировать элемент с помощью . mx-auto класса (добавляет маржу-левое и правое поле: Auto):

Пример

Centered

Пример

<div>Centered</div>

---

Ширина

Задать ширину элемента с классами w-* (.w-25, .w-50, .w-75, .w-100, .mw-100):

Пример

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Пример

<div>Width 25%</div>
<div>Width 50%</div>
<div>Width 75%</div>
<div class=»w-100 bg-warning»>Width 100%</div>
<div>Max Width 100%</div>

---

Высота

Задание высоты элемента с помощью классов h-* (.h-25, .h-50, .h-75, .h-100, .mh-100):

Пример

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Пример

<div>
  <div>Height 25%</div>
  <div>Height 50%</div>
  <div>Height 75%</div>
  <div class=»h-100 bg-warning»>Height 100%</div>
  <div style=»height:500px»>Max Height 100%</div>
</div>

---

Интервал

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

Они работают для всех точек останова: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

Классы используются в формате: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

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

• m — sets margin
• p — sets padding

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

• t — sets margin-top or padding-top
• b — sets margin-bottom or padding-bottom
• l — sets margin-left or padding-left
• r — sets margin-right or padding-right
• x — sets both padding-left and padding-right or margin-left and margin-right
• y — sets both padding-top and padding-bottom or margin-top and margin-bottom
• blank — sets a margin or padding on all 4 sides of the element

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

• 0 — sets margin or padding to 0
• 1 — sets margin or padding to . 25rem (4px if font-size is 16px)
• 2 — sets margin or padding to .5rem (8px if font-size is 16px)
• 3 — sets margin or padding to 1rem (16px if font-size is 16px)
• 4 — sets margin or padding to 1.5rem (24px if font-size is 16px)
• 5 — sets margin or padding to 3rem (48px if font-size is 16px)
• auto — sets margin to auto

Пример

У меня только верхняя обивка (1.5rem = 24px)

У меня есть обивка со всех сторон (3rem = 48px)

У меня есть маржа со всех сторон (3rem = 48px) and a bottom padding (3rem = 48px)

Пример

<div>I only have a top padding (1.5rem = 24px)</div>
<div>I have a padding on all sides (3rem = 48px)</div>
<div>I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

Дополнительные примеры интервалов

. m-# / m-*-#	margin on all sides
.mt-# / mt-*-#	margin top
.mb-# / mb-*-#	margin bottom
.ml-# / ml-*-#	margin left
.mr-# / mr-*-#	margin right
.mx-# / mx-*-#	margin left and right
.my-# / my-*-#	margin top and bottom
.p-# / p-*-#	padding on all sides
.pt-# / pt-*-#	padding top
.pb-# / pb-*-#	padding bottom
.pl-# / pl-*-#	padding left
.pr-# / pr-*-#	padding right
.py-# / py-*-#	padding top and bottom
. px-# / px-*-#	padding left and right

---

Тени

Используйте shadow- классы для добавления теней к элементу:

Пример

No shadow

Small shadow

Default shadow

Large shadow

Пример

<div>No shadow</div>
<div class=»shadow-sm p-4 mb-4 bg-white»>Small shadow</div>
<div>Default shadow</div>
<div>Large shadow</div>

---

Выравнивание по вертикали

Используйте align- классы для изменения выравнивания элементов (работает только на встроенных, встроенных блоках, встроенных элементах таблицы и ячейках таблицы):

Пример

baseline top middle bottom text-top text-bottom

Пример

<span>baseline</span>
<span class=»align-top»>top</span>
<span>middle</span>
<span>bottom</span>
<span class=»align-text-top»>text-top</span>
<span class=»align-text-bottom»>text-bottom</span>

---

Адаптивные встраивания

Создание адаптивного видео или слайд-шоу встраивается в зависимости от ширины родительского элемента.

Добавьте .embed-responsive-item к любым элементам встраивания (например, < IFRAME > или < Video >) в родительский элемент .embed-responsive и пропорции по вашему выбору:

Пример

<!— 21:9 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

<!— 16:9 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

<!— 4:3 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

<!— 1:1 aspect ratio —>
<div>
  <iframe src=»…»></iframe>
</div>

---

Видимость

Используйте .visible классы или .invisible для управления видимостью элементов. Примечание: Эти классы не меняют отображаемое значение CSS. Они только добавляют visibility:visible или visibility:hidden:

Пример

I am visibile

I am invisible

Пример

<div>I am visible</div>
<div>I am invisible</div>

---

Позиции

Используйте . fixed-top класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:

Пример

<nav>
  …
</nav>

Используйте .fixed-bottom класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:

Пример

<nav>
  …
</nav>

Используйте .sticky-top класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание: Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).

Пример

<nav>
  …
</nav>

---

Иконка закрыть

Используйте .close класс для оформления значка закрытия. Часто используется для оповещений и модальностей. Обратите внимание, что мы используем × символ, чтобы создать фактический значок (лучше лукионг «x»). Также обратите внимание, что он плавает вправо по умолчанию:

Пример

Пример

<button type=»button»>&times;</button>

---

Цвета

Как описано в разделе » цвета «, ниже приведен список всех классов текста и фона:

Классы для текстовых цветов: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Вторичный текст.

Темно-серый текст.

Основного текста.

Светло-серый текст.

Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:

Пример

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.

Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:

Пример

Черный текст с 50% непрозрачность на белом фоне

Белый текст с 50% непрозрачность на черном фоне

---

Цвета фона

Для цветов фона используются следующие классы: .bg-primary ,,,,, .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light .

Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

---

Типография/текстовые классы

Как описано в разделе типография, вот список всех типографий/текстовых классов:

Класс	Описание
.display-*	Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4
.font-weight-bold	Полужирный текст
.font-weight-normal	Обычный текст
.font-weight-light	Легковесный текст
.font-italic	Курсивный текст
.lead	Выделяет абзац
. small	Обозначает меньший текст (значение 85% от размера родительского элемента)
.text-left	Указывает текст, выровненный по левому краю
.text-center	Обозначает текст, выровненный по центру
.text-right	Указывает текст с выравниванием по правому краю
.text-justify	Обозначает обоснованный текст
.text-monospace	Текст с интервалом
.text-nowrap	Обозначает отсутствие текста переноса
.text-lowercase	Обозначает текст в нижнем регистре
.text-uppercase	Указывает верхний текст
.text-capitalize	Обозначает текст с прописными буквами
.initialism	Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта
. list-unstyled	Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
.list-inline	Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>)
.pre-scrollable	Делает <pre> элемент прокручиваемым

---

Элементы блока

Чтобы сделать элемент элементом Block, добавьте .d-block класс. Используйте любой из d-*-block классов для управления, когда элемент должен быть элементом блока на определенной ширине экрана:

Пример

d-block d-sm-block d-md-block d-lg-block d-xl-block

Пример

<span>d-block</span>
<span>d-sm-block</span>
<span>d-md-block</span>
<span>d-lg-block</span>
<span class=»d-xl-block bg-success»>d-xl-block</span>

---

Flex

Используйте . flex-* классы для управления макетом с Flexbox.

Подробнее о Bootstrap 4 Flex читайте в следующей главе.

Пример

Horizontal:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

❮ Назад Дальше ❯

Спейсинг · 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 {
  заполнение: $спейсер !важно;
}
 

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