in English

Kosala esika oyo ezali na kati

Bootstrap ezali na ba classes ya utilité ya marge, padding, mpe gap oyo ezo répondre na stenographie ya ndenge na ndenge mpo na ko modifier apparence ya élément moko.

Na lokasa oyo

Marge na padding

Bopesa responsive-friendly marginto paddingba valeurs na élément to sous-ensemble ya ba côtés na yango na ba classes ya stenographie. Esangisi lisungi ya ba propriétés moko moko, ba propriétés nionso, mpe ba propriétés verticales mpe horizontales. Ba kelasi etongami uta na karte ya Sass ya liboso oyo ebandi na .25remkino na 3rem.

Kosalela module ya layout ya Grille CSS? Tala kosalela utilitaire ya gap na esika na yango.

Notation ya kokoma

Ba utilitaires ya espacement oyo etali ba points de rupture nionso, kobanda xsna xxl, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0mpe likolo, mpe bongo ekangami te na motuna ya media. Nzokande, ba points de rupture oyo etikali ezali na abréviation ya point de rupture.

Ba kelasi epesameli nkombo na kosalelaka format {property}{sides}-{size}mpo na xsmpe {property}{sides}-{breakpoint}-{size}mpo na sm, md, lg, xl, mpe xxl.

Epayi wapi biloko ezali moko ya:

m- pona ba classes oyo ezo setmargin
p- pona ba classes oyo ezo setpadding

Epayi wapi mipanzi ezali moko ya:

t- pona ba classes oyo etie margin-toptopadding-top
b- pona ba classes oyo etie margin-bottomtopadding-bottom
s- (kobanda) pona ba classes oyo etie margin-leftto padding-leftna LTR, margin-rightto padding-rightna RTL
e- (suka) pona ba classes oyo etie margin-rightto padding-rightna LTR, margin-leftto padding-leftna RTL
x- mpo na bakelasi oyo etie nyonso mibale *-leftmpe*-right
y- mpo na bakelasi oyo etie nyonso mibale *-topmpe*-bottom
blank - pona ba classes oyo etie a marginto paddingna ba côtés nionso 4 ya élément

Epayi wapi bonene ezali moko ya:

0- mpo na bakelasi oyo elongolaka marginto paddingna kotiaka yango na0
1- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .25
2- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .5
3- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer
4- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 1.5
5- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 3
auto- mpo na bakelasi oyo etyaka marginna auto

(Okoki kobakisa ba taille mosusu na kobakisa ba entrées na $spacersvariable ya carte Sass.)

Bandakisa

Talá mwa bandakisa oyo ezali komonisa bakelasi yango:

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

Centrée horizontale

En plus, Bootstrap ezali mpe na .mx-autoclasse moko mpo na ko centrer horizontalement contenus ya niveau ya bloc ya largeur fixe —elingi koloba, contenus oyo ezali na yango display: blockmpe widthensemble moko —na kotiaka ba marges horizontales na auto.

Elemento centrado

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

Marge ya négatif

Na CSS, marginba propriétés ekoki kosalela ba valeurs négatives ( paddingekoki te). Ba marges oyo ya mabe ezali désactivé par défaut , kasi ekoki kozala activé na Sass na paramètre $enable-negative-margins: true.

Syntaxe ezali pene na ndenge moko na ba utilitaires ya marge ya défaut, ya malamu, kasi na kobakisa ya nliboso ya bonene oyo esengami. Tala classe ya exemple oyo ezali opposé na .mt-1:

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

Bokeseni

Ntango ozali kosalela display: grid, okoki kosalela ba gaputilitaires na conteneur ya grille parent. Yango ekoki kobomba na kozala na mposa ya kobakisa ba utilitaires ya marge na biloko ya grille moko moko (bana ya display: gridconteneur). Ba utilitaires ya gap ezali responsive par défaut, mpe esalemi na nzela ya API ya ba utilitaires na biso, na kotalela $spacerscarte ya Sass.

Eloko ya grille 1

Eloko ya grille 2

Eloko ya grille 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>

Lisungi ezali na ba options ya eyano mpo na ba points de rupture ya grille nionso ya Bootstrap, mpe lisusu ba taille motoba uta na $spacerscarte ( 0– 5). Classe ya utilité ezali te .gap-autolokola ezali efficacement ndenge moko na .gap-0.

Sass oyo azali

Bakarte

Ba utilitaires ya espacement e déclaré via carte Sass et puis e généré na API ya ba utilitaires na biso.

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

API ya ba utilitaires

Ba utilitaires ya espacement esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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