Перейти до основного вмісту Перейти до навігації документами
Check
in English

Інтервал

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в RTL
  • e- (кінець) для класів, які встановлюються margin-rightабо padding-rightв LTR, margin-leftабо padding-leftв RTL
  • 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- для класів, які встановлюють значення marginauto

(Ви можете додати більше розмірів, додавши записи до $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.

Елемент сітки 1
Елемент сітки 2
Елемент сітки 3
html
<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карти ( 05). Немає .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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),