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

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

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

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