Espas
Bootstrap gen ladann yon pakèt klas itilite stenografi ak padding pou modifye aparans yon eleman.
Ki jan li fonksyone
Bay yon eleman ki zanmitay repons margin
oswa padding
valè pou yon eleman oswa yon sou-ansanm kote li yo ak klas kout. Gen ladan sipò pou pwopriyete endividyèl, tout pwopriyete, ak pwopriyete vètikal ak orizontal. Klas yo bati apati de yon kat Sass default ki soti nan .25rem
jiska 3rem
.
Notasyon
Espas sèvis piblik ki aplike nan tout pwen rupture, soti nan xs
rive xl
, pa gen okenn abrevyasyon pwen rupture ladan yo. Sa a se paske klas sa yo aplike soti nan min-width: 0
ak 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 xs
ak {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 metemargin-top
oswapadding-top
b
- pou klas ki metemargin-bottom
oswapadding-bottom
l
- pou klas ki metemargin-left
oswapadding-left
r
- pou klas ki metemargin-right
oswapadding-right
x
- pou klas ki mete tou de*-left
ak*-right
y
- pou klas ki mete tou de*-top
ak*-bottom
- vid - pou klas ki mete yon
margin
oswapadding
sou tout 4 kote eleman an
Ki kote gwosè se youn nan:
0
- pou klas ki elimine amargin
oswapadding
pa mete li nan0
1
- (pa default) pou klas ki metemargin
oswapadding
pou$spacer * .25
2
- (pa default) pou klas ki metemargin
oswapadding
pou$spacer * .5
3
- (pa default) pou klas ki metemargin
oswapadding
pou$spacer
4
- (pa default) pou klas ki metemargin
oswapadding
pou$spacer * 1.5
5
- (pa default) pou klas ki metemargin
oswapadding
pou$spacer * 3
auto
- pou klas ki mete nanmargin
oto
(Ou ka ajoute plis gwosè lè w ajoute antre nan $spacers
varyab 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-auto
klas pou santre orizontal kontni nivo blòk lajè fiks-sa vle di, kontni ki gen display: block
ak yon width
seri-pa mete maj orizontal yo nan auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marge negatif
Nan CSS, margin
pwopriyete yo ka itilize valè negatif ( padding
pa kapab). Apati 4.2, nou te ajoute sèvis piblik maj negatif pou chak gwosè non-zewo nonb antye ki nan lis pi wo a (egzanp, 1
, 2
, 3
, 4
, 5
). Sèvis piblik sa yo ideyal pou pèsonalize goutyè kolòn kadriyaj atravè pwen rupture.
Sentaks la se prèske menm jan ak default, itilite maj pozitif, men ak adisyon a nan n
anvan gwosè a mande. Men yon egzanp klas ki opoze a .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Men yon egzanp pèsonalizasyon kadriyaj Bootstrap la nan pwen rupture mwayen ( md
) ak pi wo a. Nou te ogmante .col
padding a ak .px-md-5
Lè sa a, kontrekare sa ak .mx-md-n5
sou paran an .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>