oghere

Bootstrap na-agụnye akụkụ dị iche iche na-anabata mkpirisi, padding, na klaasị mmekọ gap iji gbanwee ọdịdị ihe.

Na ibe a

Oke na padding

Kenye anabata-enyi na enyi marginma ọ bụ paddingụkpụrụ na mmewere ma ọ bụ akụkụ nke akụkụ ya nwere klaasị mkpirisi. Gụnyere nkwado maka akụrụngwa onye ọ bụla, akụrụngwa niile, yana ihe kwụ ọtọ na kwụ ọtọ. Ewubere klaasị site na maapụ Sass ndabara sitere na .25remruo 3rem.

Iji modul okirikiri nhọrọ ukwuu CSS? Tụlee iji ohere oghere kama.

Nkọwapụta

Ngwa ime oghere na-emetụta ebe nkwụsịtụ niile, site xsna ruo xxl, enweghị mbiri ntụpọ nkwụsịtụ n'ime ha. Nke a bụ n'ihi na a na-etinye klaasị ndị ahụ site min-width: 0na elu, yabụ na ajụjụ mgbasa ozi ejighị ya. Otú ọ dị, ebe nkwụsịtụ fọdụrụ na-agụnye mbiri nkebi nkwụsịtụ.

A na-akpọ klaasị ahụ site na iji usoro {property}{sides}-{size}maka xsna {property}{sides}-{breakpoint}-{size}maka sm, md, lg, xl, na xxl.

Ebe ihe onwunwe bụ otu n'ime:

m- maka klaasị nke setịpụrụmargin
p- maka klaasị nke setịpụrụpadding

Ebe akụkụ bụ otu n'ime:

t- maka klaasị na setịpụrụ margin-topma ọ bụpadding-top
b- maka klaasị na setịpụrụ margin-bottomma ọ bụpadding-bottom
s- (malite) maka klaasị setịpụrụ margin-leftma ọ bụ padding-leftna LTR, margin-rightma ọ bụ padding-rightna RTL
e- (njedebe) maka klaasị setịpụrụ margin-rightma ọ bụ padding-rightna LTR, margin-leftma ọ bụ padding-leftna RTL
x- maka klaasị nke setịpụrụ ma *-leftna*-right
y- maka klaasị nke setịpụrụ ma *-topna*-bottom
oghere - maka klaasị setịpụrụ marginma ọ bụ paddingn'akụkụ 4 niile nke mmewere

Ebe nha bụ otu n'ime:

0- maka klaasị na-ewepụ marginma ọ bụ paddingsite na ịtọ ya0
1- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * .25
2- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * .5
3- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer
4- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * 1.5
5- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * 3
auto- maka klaasị na-eme marginka akpaaka

(Ị nwere ike ịgbakwunye nha ndị ọzọ site na ịgbakwunye ndenye na $spacersmgbanwe maapụ Sass.)

Ihe atụ

Nke a bụ ọmụmaatụ ụfọdụ ihe atụ nke klaasị ndị a:

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

N'etiti kwụ ọtọ

Na mgbakwunye, Bootstrap gụnyekwara .mx-autoklaasị maka ọdịnaya ọkwa mgbochi obosara kwụ n'ahịrị—ya bụ, ọdịnaya nwere display: blockyana widthntọala—site n'itinye oke ala ka ọ bụrụ auto.

Ihe etiti etiti

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

Oke adịghị mma

Na CSS, marginakụrụngwa nwere ike iji ụkpụrụ ọjọọ ( paddingenweghị ike). Akwụsịghị oke oke ndị a na ndabara , mana enwere ike ịme ya na Sass site na ịtọ ntọala $enable-negative-margins: true.

Syntax ahụ fọrọ nke nta ka ọ bụrụ otu ihe ndabara, akụrụngwa oke oke dị mma, mana yana mgbakwunye nke ntupu nha achọrọ. Nke a bụ klas ihe atụ nke na-emegide ya .mt-1:

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

Oghere

Mgbe ị na-eji display: grid, ị nwere ike iji gapakụrụngwa na akpa grid nne na nna. Nke a nwere ike ichekwa na ịnwe ịgbakwunye akụrụngwa oke n'ihe ngwa ngwa (ụmụ nke display: gridakpa). Ngwa ndị nwere oghere na-anabata ya na ndabara, ma na-ebute ya site na ngwa API anyị, dabere na $spacersmaapụ Sass.

Grid ihe 1

Grid ihe 2

Grid ihe 3

html

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

Nkwado gụnyere nhọrọ anabatara maka ebe nkwụsịtụ grid Bootstrap, yana nha isii sitere na $spacersmaapụ ( 0- 5). Enweghị .gap-autoklaasị ịba uru dịka ọ na-arụ ọrụ nke ọma yana .gap-0.

Sass

Maapụ

A na-ekwupụta ngwa ọrụ spacing site na maapụ Sass wee jiri API ngwa anyị mepụta ya.

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

Utilities API

Ekwuwapụtara akụrụngwa ohere ohere na API ngwa anyị na scss/_utilities.scss. Mụta otu esi eji ngwa API.

    "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
    ),