Espas

Bootstrap gen ladann yon pakèt klas itilite sténographie, padding, ak gap pou modifye aparans yon eleman.

Nan paj sa a

Marge ak padding

Bay yon eleman ki zanmitay repons marginoswa paddingvalè pou yon eleman oswa yon sou-ansanm kote li yo ak klas kout. Gen ladan sipò pou pwopriyete endividyèl, tout pwopriyete, ak pwopriyete vètikal ak orizontal. Klas yo bati apati de yon kat Sass default ki soti nan .25remjiska 3rem.

Sèvi ak modil Layout Grid CSS la? Konsidere itilize sèvis piblik gap la olye de sa.

Notasyon

Espas sèvis piblik ki aplike nan tout pwen rupture, soti nan xsrive xxl, pa gen okenn abrevyasyon pwen rupture ladan yo. Sa a se paske klas sa yo aplike soti nan min-width: 0ak moute, epi konsa yo pa mare pa yon rechèch medya. Rès pwen yo, sepandan, gen ladan yon abrevyasyon breakpoint.

Yo bay non klas yo lè l sèvi avèk fòma {property}{sides}-{size}pou xsak {property}{sides}-{breakpoint}-{size}pou sm, md, lg, xl, ak xxl.

Kote pwopriyete se youn nan:

m- pou klas ki metemargin
p- pou klas ki metepadding

Ki kote kote yo se youn nan:

t- pou klas ki mete margin-toposwapadding-top
b- pou klas ki mete margin-bottomoswapadding-bottom
s- (kòmanse) pou klas ki mete margin-leftoswa padding-leftnan LTR, margin-rightoswa padding-rightnan RTL
e- (fen) pou klas ki mete margin-rightoswa padding-rightnan LTR, margin-leftoswa padding-leftnan RTL
x- pou klas ki mete tou de *-leftak*-right
y- pou klas ki mete tou de *-topak*-bottom
vid - pou klas ki mete yon marginoswa paddingsou tout 4 kote eleman an

Ki kote gwosè se youn nan:

0- pou klas ki elimine a marginoswa paddingpa mete li nan0
1- (pa default) pou klas ki mete marginoswa paddingpou$spacer * .25
2- (pa default) pou klas ki mete marginoswa paddingpou$spacer * .5
3- (pa default) pou klas ki mete marginoswa paddingpou$spacer
4- (pa default) pou klas ki mete marginoswa paddingpou$spacer * 1.5
5- (pa default) pou klas ki mete marginoswa paddingpou$spacer * 3
auto- pou klas ki mete nan marginoto

(Ou ka ajoute plis gwosè lè w ajoute antre nan $spacersvaryab kat Sass la.)

Egzanp yo

Men kèk egzanp reprezantatif nan klas sa yo:

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

Santral orizontal

Anplis de sa, Bootstrap gen ladan tou yon .mx-autoklas pou santre orizontal kontni nivo blòk lajè fiks-sa vle di, kontni ki gen display: blockak yon widthseri-pa mete maj orizontal yo nan auto.

Eleman santre

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

Marge negatif

Nan CSS, marginpwopriyete yo ka itilize valè negatif ( paddingpa kapab). Marge negatif sa yo enfim pa default , men yo ka aktive nan Sass lè w tabli $enable-negative-margins: true.

Sentaks la se prèske menm jan ak default, itilite maj pozitif, men ak adisyon a nan nanvan gwosè a mande. Men yon egzanp klas ki opoze a .mt-1:

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

Gap

Lè w ap itilize display: grid, ou ka sèvi ak gapsèvis piblik yo sou resipyan griy paran an. Sa a ka sove sou yo dwe ajoute sèvis piblik Marge nan atik kadriyaj endividyèl (timoun nan yon display: gridveso). Sèvis piblik Gap yo reponn pa default, epi yo pwodwi atravè API sèvis piblik nou an, ki baze sou $spacerskat Sass la.

Kadriyaj atik 1

Atik kadriyaj 2

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

Sipò gen ladan opsyon repons pou tout pwen kadriyaj Bootstrap yo, ansanm ak sis gwosè nan $spacerskat jeyografik la ( 0- 5). Pa gen okenn .gap-autoklas sèvis piblik paske li efektivman menm jan ak .gap-0.

Sass

Kat

Espas sèvis piblik yo deklare atravè kat Sass ak Lè sa a, pwodwi ak API sèvis piblik nou an.

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

Itilite API

Espas sèvis piblik yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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