Інтэрвал

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- для класаў, якія ўсталёўваюць marginauto

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

Прыклады

Вось некалькі тыповых прыкладаў гэтых класаў:

.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 class="mx-auto" style="width: 200px;">
  Centered element
</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 class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>