Yɔrɔjanbɔli

Bootstrap bɛ ni shorthand responsive margin ani padding utility classes caman ye walasa ka fɛn dɔ cogoya sɛmɛntiya.

A bɛ baara kɛ cogo min na

A’ ye jaabi-terikɛ marginwalima paddingnafaw Di fɛn dɔ ma walima a fanw kulu fitinin dɔ ma ni sɛbɛnni surun kalanw ye. Dɛmɛ bɛ sɔrɔ nafolo kelen-kelenw na, nafolo bɛɛ, ani nafolo jɔlenw ni jɔlenw na. Kalansow bɛ jɔ ka bɔ Sass karti dafalen na min bɛ daminɛ ka .25remse 3rem.

Kɔlɔsili

Spacing utilities minnu bɛ tali kɛ breakpoints bɛɛ la, k’a ta xska se xl, breakpoint surunyalen tɛ olu la. O bɛ Kɛ k’a sababu Kɛ o kàlanw bɛ Kɛ ka Bɔ min-width: 0ka Taa san fɛ, wa o cogo la u tɛ siri ni kunnafonidilan ɲininkali ye. Nka, kari-yɔrɔ tɔw la, kari-yɔrɔ surunyalen dɔ bɛ yen.

Kalansow tɔgɔ bɛ fɔ ni cogoya {property}{sides}-{size}ye , , , ani .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Yɔrɔ min na nafolo ye dɔ ye:

m- ka ɲɛsin kalanw ma minnu bɛ sigimargin
p- ka ɲɛsin kalanw ma minnu bɛ sigipadding

Yɔrɔ min na fanw ye kelen ye:

t- ka ɲɛsin kalanw ma minnu bɛ sigi margin-topwalimapadding-top
b- ka ɲɛsin kalanw ma minnu bɛ sigi margin-bottomwalimapadding-bottom
l- ka ɲɛsin kalanw ma minnu bɛ sigi margin-leftwalimapadding-left
r- ka ɲɛsin kalanw ma minnu bɛ sigi margin-rightwalimapadding-right
x- ka ɲɛsin kalanw ma minnu bɛ u fila bɛɛ sigi *-leftani*-right
y- ka ɲɛsin kalanw ma minnu bɛ u fila bɛɛ sigi *-topani*-bottom
blank - ka ɲɛsin kalanw ma minnu bɛ a marginwalima paddinga sigi element fan 4 bɛɛ kan

Yɔrɔ min na bonya ye dɔ ye:

0- ka ɲɛsin kalanw ma minnu bɛ marginwalima paddingni a sigili ye0
1- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * .25
2- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * .5
3- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer
4- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * 1.5
5- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * 3
auto- ka ɲɛsin kalanw ma minnu bɛ sigi ka marginto auto

(Aw bɛ se ka hakɛ wɛrɛw fara a kan ni aw ye sɛbɛnniw fara $spacersSass karti sɛgɛsɛgɛli kan.)

Misaliw

Nin kalan ninnu misali jiralen dɔw filɛ nin ye:

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

Cɛmancɛ-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko

Ka fara o kan, Bootstrap fana bɛ .mx-autokalasi dɔ kɔnɔ min bɛ kɛ ka fixed-width block level kɔnɔkow cɛmancɛ kɛ tilennen na—o kɔrɔ ye ko kɔnɔkow minnu bɛ yen display: blockani widthset dɔ—ni u bɛ margins horizontalw sigi auto.

Eleman min bɛ cɛmancɛ la

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