Аралыгы
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
- blank - элементтин бардык 4 тарабында a
margin
же орнотулган класстар үчүнpadding
Бул жерде өлчөмү бир:
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
- автоматтык режимге коюлган класстар үчүн
$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>