Аралыгы

Bootstrap элементтин көрүнүшүн өзгөртүү үчүн стенографиялык жооп берүүчү маржа жана толтуруучу пайдалуу класстардын кеңири спектрин камтыйт.

Бул кантип иштейт

Стенограмма класстары менен элементке же анын тараптарынын бир бөлүгүнө жооп берүүчү marginже баалуулуктарды дайындаңыз . paddingЖеке касиеттерди, бардык касиеттерди жана вертикалдык жана горизонталдык касиеттерди колдоону камтыйт. Класстар демейки Sass картасынан .25remтүзүлөт 3rem.

Белгилөө

xsБардык үзүү чекиттерине тиешелүү болгон мейкиндик утилиталарында үзүлүү xlчекитинин аббревиатурасы жок. Себеби, ал класстар баштап min-width: 0жана андан жогору колдонулат, ошондуктан медиа суроо-талабы менен байланышпайт. Калган үзгүлтүккө учуроо чекиттери, бирок, үзгүлтүккө учуроо чекитинин аббревиатурасын камтыйт.

Класстар , , , жана {property}{sides}-{size}үчүн xsжана {property}{sides}-{breakpoint}-{size}үчүн форматын колдонуу менен аталат .smmdlgxl

Мүлк төмөндөгүлөрдүн бири болгон жерде :

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
automargin- автоматтык режимге коюлган класстар үчүн

$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>