Інтэрвал

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>