Інтэрвал
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
- для класаў, якія ўсталёўваюцьmargin
auto
(Вы можаце дадаць больш памераў, дадаўшы запісы ў $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>