Аралыгы

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(Сиз картанын өзгөрмөсүнө жазууларды кошуу менен көбүрөөк өлчөмдөрдү кошо аласыз .)

Мисалдар

Бул жерде бул класстардын кээ бир өкүлү мисалдар:

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