Інтэрвал

Bootstrap уключае шырокі спектр карысных класаў палёў, запаўнення і прамежкаў, каб змяніць знешні выгляд элемента.

На гэтай старонцы

Паля і запаўненне

Прызначце зручныя для рэагавання marginабо paddingзначэнні для элемента або падмноства яго бакоў з дапамогай стэнаграфічных класаў. Уключае падтрымку асобных уласцівасцей, усіх уласцівасцей, а таксама вертыкальных і гарызантальных уласцівасцей. Класы ствараюцца з карты Sass па змаўчанні ў дыяпазоне ад .25remда 3rem.

Выкарыстоўваеце модуль макета CSS Grid? Разгледзьце магчымасць выкарыстання ўтыліты gap .

Абазначэнне

Утыліты разрыву, якія прымяняюцца да ўсіх кропак супыну, ад xsда xxl, не маюць абрэвіятуры кропкі супыну. Гэта адбываецца таму, што гэтыя класы прымяняюцца ад min-width: 0і ўверх і, такім чынам, не прывязаны да медыя-запыту. Аднак астатнія кропкі супыну ўключаюць абрэвіятуру кропкі супыну.

Класы называюцца ў фармаце {property}{sides}-{size}для xsі {property}{sides}-{breakpoint}-{size}для 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
пусты - для класаў, якія ўсталёўваюць 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

<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
    ),