Espas

Bootstrap gen ladann yon pakèt klas itilite stenografi ak padding pou modifye aparans yon eleman.

Ki jan li fonksyone

Bay repons zanmitay marginoswa paddingvalè nan yon eleman oswa yon sou-ansanm nan kote li yo ak klas kout. Gen ladann sipò pou pwopriyete endividyèl, tout pwopriyete, ak pwopriyete vètikal ak orizontal. Klas yo bati apati de yon kat Sass default ki sòti nan .25remjiska 3rem.

Notasyon

Espas sèvis piblik ki aplike nan tout pwen rupture, soti nan xsrive xl, pa gen okenn abrevyasyon pwen rupture ladan yo. Sa a se paske klas sa yo aplike soti nan min-width: 0ak moute, epi konsa yo pa mare pa yon rechèch medya. Rès pwen yo, sepandan, gen ladan yon abrevyasyon breakpoint.

Yo bay non klas yo lè l sèvi avèk fòma {property}{sides}-{size}pou xsak {property}{sides}-{breakpoint}-{size}pou sm, md, lg, ak xl.

Kote pwopriyete se youn nan:

m- pou klas ki metemargin
p- pou klas ki metepadding

Ki kote kote yo se youn nan:

t- pou klas ki mete margin-toposwapadding-top
b- pou klas ki mete margin-bottomoswapadding-bottom
l- pou klas ki mete margin-leftoswapadding-left
r- pou klas ki mete margin-rightoswapadding-right
x- pou klas ki mete tou de *-leftak*-right
y- pou klas ki mete tou de *-topak*-bottom
vid - pou klas ki mete yon marginoswa paddingsou tout 4 kote eleman an

Ki kote gwosè se youn nan:

0- pou klas ki elimine a marginoswa paddingpa mete li nan0
1- (pa default) pou klas ki mete nan marginoswa paddingpou$spacer * .25
2- (pa default) pou klas ki mete nan marginoswa paddingpou$spacer * .5
3- (pa default) pou klas ki mete nan marginoswa paddingpou$spacer
4- (pa default) pou klas ki mete nan marginoswa paddingpou$spacer * 1.5
5- (pa default) pou klas ki mete nan marginoswa paddingpou$spacer * 3
auto- pou klas ki mete nan marginoto

(Ou ka ajoute plis gwosè lè w ajoute antre nan $spacersvaryab kat Sass la.)

Egzanp yo

Men kèk egzanp reprezantatif nan klas sa yo:

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

Santral orizontal

Anplis de sa, Bootstrap gen ladan tou yon .mx-autoklas pou santre orizontal kontni nivo blòk lajè fiks-sa vle di, kontni ki gen display: blockak yon widthseri-pa mete maj orizontal yo nan auto.

Eleman santre

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>