Yɔrɔjanbɔli

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

Nin ɲɛ in kan

Margin ani padding

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.

Baara kɛ ni CSS Grid labɛncogo modulu ye wa? Aw ye jateminɛ kɛ ka baara kɛ ni gap utility ye o nɔ na.

Kɔlɔsili

Spacing utilities minnu bɛ tali kɛ breakpoints bɛɛ la, k’a ta xska se xxl, 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}smmdlgxlxxl

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
s- (daminɛ) kalanw kama minnu bɛ sigi margin-leftwalima padding-leftminnu bɛ LTR kɔnɔ, margin-rightwalima padding-rightminnu bɛ RTL kɔnɔ
e- (ban) ka ɲɛsin kalanw ma minnu bɛ sigi margin-rightwalima padding-rightminnu bɛ LTR kɔnɔ, margin-leftwalima padding-leftminnu bɛ RTL kɔnɔ
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;
}

.ms-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>

Marge négatif (Marge négatif) ye

CSS kɔnɔ, marginnafolomafɛnw bɛ se ka baara kɛ ni nafa juguw ye ( paddinga tɛ se ka kɛ). o margin jugu ninnu bɛ bali ka daminɛ , nka u bɛ se ka baara kɛ Sass kɔnɔ ni sigicogo $enable-negative-margins: trueye .

Sinsinnan bɛ surunya kelen na ni default, positive margin utilities ye, nka ni farali ye nka kɔn hakɛ ɲininen ɲɛ. Nin ye misali kalan ye min ni .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Furancɛ

Ni aw bɛ baara kɛ ni display: grid, aw bɛ se ka baara kɛ ni gapnafalanw ye bangebagaw ka grid minɛn kan. O bɛ se ka wari bɔ ka ɲɛsin margin utilities farali ma grid fɛn kelen-kelenw kan ( display: gridminɛn dɔ denw). Gap utilities bɛ jaabi di ka da a kan, wa u bɛ sɔrɔ an ka utilities API fɛ, ka da $spacersSass karti kan.

Grid item 1. Bamako, Mali

Grid fɛn 2nan

Grid fɛn 3nan

html ye

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Dɛmɛ bɛ jaabi sugandiliw di Bootstrap ka grid breakpoints bɛɛ la, ani hakɛ wɔɔrɔ ka bɔ $spacerskarti la ( 0– 5). Nafa .gap-autosɔrɔli kalasi tɛ yen i n'a fɔ a ni .gap-0.

Sass ye

Kartiw

Spacing utilities bɛ Laseli Sass map fɛ ka sɔrɔ ka Dabɔ ni an ka utilities API ye.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Nafamafɛnw API

Spacing utilities bɛ fɔ an ka utilities API kɔnɔ san scss/_utilities.scss. Aw ye baara kɛcogo dɔn ni utilities API ye.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),