Kosala esika oyo ezali na kati

Bootstrap ezali na ba classes ya utilitaire ya marge responsive ya stenographie mpe ya padding mpo na ko modifier apparence ya élément moko.

Ndenge oyo esalaka

Bopesa responsive-friendly marginto paddingba valeurs na élément to sous-ensemble ya ba côtés na yango na ba classes ya stenographie. Esangisi lisungi ya ba propriétés moko moko, ba propriétés nionso, mpe ba propriétés verticales mpe horizontales. Ba kelasi etongami uta na karte ya Sass ya liboso oyo ebandi na .25remkino na 3rem.

Notation ya kokoma

Ba utilitaires ya espacement oyo etali ba points de rupture nionso, kobanda xsna xl, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0mpe likolo, mpe bongo ekangami te na motuna ya media. Nzokande, ba points de rupture oyo etikali ezali na abréviation ya point de rupture.

Ba kelasi epesameli nkombo na kosalelaka format {property}{sides}-{size}mpo na xsmpe {property}{sides}-{breakpoint}-{size}mpo na sm, md, lg, mpe xl.

Epayi wapi biloko ezali moko ya:

m- pona ba classes oyo ezo setmargin
p- pona ba classes oyo ezo setpadding

Epayi wapi mipanzi ezali moko ya:

t- pona ba classes oyo etie margin-toptopadding-top
b- pona ba classes oyo etie margin-bottomtopadding-bottom
l- pona ba classes oyo etie margin-lefttopadding-left
r- pona ba classes oyo etie margin-righttopadding-right
x- mpo na bakelasi oyo etie nyonso mibale *-leftmpe*-right
y- mpo na bakelasi oyo etie nyonso mibale *-topmpe*-bottom
blank - pona ba classes oyo etie a marginto paddingna ba côtés nionso 4 ya élément

Epayi wapi bonene ezali moko ya:

0- mpo na bakelasi oyo elongolaka marginto paddingna kotiaka yango na0
1- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .25
2- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .5
3- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer
4- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 1.5
5- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 3
auto- mpo na bakelasi oyo etyaka marginna auto

(Okoki kobakisa ba taille mosusu na kobakisa ba entrées na $spacersvariable ya carte Sass.)

Bandakisa

Talá mwa bandakisa oyo ezali komonisa bakelasi yango:

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

Centrée horizontale

En plus, Bootstrap ezali mpe na .mx-autoclasse moko mpo na ko centrer horizontalement contenus ya niveau ya bloc ya largeur fixe —elingi koloba, contenus oyo ezali na yango display: blockmpe widthensemble moko —na kotiaka ba marges horizontales na auto.

Elemento centrado

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