Інтервал
Bootstrap містить широкий спектр корисних класів скорочених полів, відступів і проміжків для зміни зовнішнього вигляду елемента.
Поля та відступи
Призначте зручні для реагування margin
або padding
значення елементу або підмножині його сторін за допомогою скорочених класів. Включає підтримку окремих властивостей, усіх властивостей, а також вертикальних і горизонтальних властивостей. Класи побудовані на основі карти Sass за замовчуванням у діапазоні від .25rem
до 3rem
.
Використовуєте модуль макета CSS Grid? Розгляньте можливість використання утиліти gap .
Позначення
Утиліти створення інтервалів, які застосовуються до всіх точок зупину, від xs
до xxl
, не містять абревіатури точки зупину. Це пояснюється тим, що ці класи застосовуються від min-width: 0
і догори, і тому вони не зв’язані медіа-запитом. Решта контрольних точок, однак, включають абревіатуру контрольної точки.
Класи називаються у форматі {property}{sides}-{size}
for xs
і {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
і xxl
.
Якщо майно є одним із:
m
- для класів, що набірmargin
p
- для класів, що набірpadding
Де сторони є одним із:
t
- для класів, що встановлюютьmargin-top
абоpadding-top
b
- для класів, що встановлюютьmargin-bottom
абоpadding-bottom
s
- (початок) для класів, які встановлюютьсяmargin-left
абоpadding-left
в LTR,margin-right
абоpadding-right
в RTLe
- (кінець) для класів, які встановлюютьсяmargin-right
абоpadding-right
в LTR,margin-left
абоpadding-left
в RTLx
- для класів, які встановлюють і*-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
(Ви можете додати більше розмірів, додавши записи до $spacers
змінної карти Sass.)
Приклади
Ось кілька типових прикладів цих класів:
.mt-0 {
margin-top: 0 !important;
}
.ms-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 class="mx-auto" style="width: 200px;">
Centered element
</div>
Від'ємна маржа
У CSS margin
властивості можуть використовувати від’ємні значення ( padding
не можна). Ці негативні поля вимкнено за умовчанням , але їх можна ввімкнути в Sass, налаштувавши $enable-negative-margins: true
.
Синтаксис майже такий самий, як утиліти позитивної маржі за замовчуванням, але з додаванням n
перед запитуваним розміром. Ось приклад класу, протилежного до .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Розрив
Використовуючи display: grid
, ви можете використовувати gap
утиліти в батьківському контейнері сітки. Це може заощадити на необхідності додавати утиліти маржин до окремих елементів сітки (дочірніх елементів display: grid
контейнера). Утиліти Gap адаптивні за замовчуванням і створюються через наш API утиліт на основі $spacers
карти Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Підтримка включає адаптивні параметри для всіх контрольних точок сітки Bootstrap, а також шість розмірів із $spacers
карти ( 0
– 5
). Немає .gap-auto
класу корисності, оскільки він фактично такий самий, як .gap-0
.
Сасс
Карти
Утиліти інтервалів оголошуються через карту Sass, а потім генеруються за допомогою нашого API утиліт.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
API утиліт
Утиліти проміжків оголошено в нашому API утиліт у scss/_utilities.scss
. Дізнайтеся, як використовувати API утиліт.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),