Фосила

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ба худкор муқаррар кардаанд

(Шумо метавонед бо илова кардани сабтҳо ба $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>