Tartea

Bootstrap-ek marjina, betegarri eta hutsunearen erabilgarritasun klase laburrak biltzen ditu elementu baten itxura aldatzeko.

Orrialde honetan

Marjina eta betegarria

Esleitu responsive-friendly marginedo paddingbalioak elementu bati edo bere alboetako azpimultzo bati laburpen klaseekin. Banakako propietateen, propietate guztien eta propietate bertikal eta horizontalen euskarria barne hartzen du. Klaseak Sass mapa lehenetsi batetik eraikitzen .25remdira 3rem.

CSS Grid diseinuaren modulua erabiltzen? Demagun hutsunearen erabilgarritasuna erabiltzea .

Notazioa

Eten-puntu guztiei aplikatzen zaizkien tarte-erabilgarritasunek, tik xs, xxlez dute eten-puntuaren laburdurarik. Hau da, klase horiek batetik min-width: 0eta gora aplikatzen direlako, eta, beraz, ez daudelako multimedia kontsulta bati lotzen. Gainerako eten-puntuek, ordea, eten-puntuaren laburdura dute.

{property}{sides}-{size}Klaseei for xseta {property}{sides}-{breakpoint}-{size}for formatua erabiliz izendatzen dira sm, md, lg, xleta xxl.

Non jabetza hauetako bat den:

m- ezartzen diren klaseetarakomargin
p- ezartzen diren klaseetarakopadding

Non alboetako bat da:

t- ezartzen duten klaseetarako margin-topedopadding-top
b- ezartzen duten klaseetarako margin-bottomedopadding-bottom
s- (hasi) ezartzen duten klaseetarako margin-leftedo padding-leftLTRn, margin-rightedo padding-rightRTLn
e- (amaiera) ezartzen duten klaseetarako margin-rightedo padding-rightLTRn, margin-leftedo padding-leftRTLn
x*-left- biak eta biak ezartzen dituzten klaseetarako*-right
y*-top- biak eta biak ezartzen dituzten klaseetarako*-bottom
marginhutsik - a edo paddingelementuaren 4 aldeetan ezartzen duten klaseetarako

Non tamaina hauetako bat den:

0margin- edo ezabatzen duten paddingklaseetarako0
1- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * .25
2- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * .5
3- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer
4- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * 1.5
5- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * 3
automargin- Auto moduan ezartzen duten klaseetarako

(Tamaina gehiago gehi ditzakezu $spacersSass mapa aldagaiari sarrerak gehituta).

Adibideak

Hona hemen klase hauen adibide adierazgarri batzuk:

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

Zentraketa horizontala

Gainera, Bootstrap -ek .mx-autozabalera finkoko bloke-mailako edukia horizontalean zentratzeko klase bat ere barne hartzen du, hau da, edukia display: blocketa widthmultzoa duena, ertz horizontalak ezarriz auto.

Zentratutako elementua

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

Marjina negatiboa

CSS-n, marginpropietateek balio negatiboak erabil ditzakete ( paddingezin da). Marjina negatibo hauek lehenespenez desgaituta daude , baina Sass-en aktibatu daitezke ezarrita $enable-negative-margins: true.

Sintaxia marjina positiboaren utilitate lehenetsien ia berdina da, baina neskatutako tamainaren aurretik gehituta. Hona hemen adibide baten kontrakoa den klase bat .mt-1:

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

Hutsunea

Erabiltzean , sare nagusiko edukiontziko utilitateak display: griderabil ditzakezu . Honek sareko elementu indibidualetan ( edukiontzi gapbaten seme-alabak) marjina-utilitateak gehitu behar izatea aurreztu daiteke . display: gridGap utilitateek lehenespenez erantzuten dute, eta gure utilitateen APIaren bidez sortzen dira, $spacersSass mapan oinarrituta.

Sarearen elementua 1

Sare-elementua 2

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

Laguntzak Bootstrap-en sareko eten-puntu guztietarako erantzun-aukerak biltzen ditu, baita $spacersmapako sei tamaina ere ( 0– 5). Ez dago .gap-autoerabilgarritasun-klaserik, modu eraginkorrean berdina baita .gap-0.

Sass

Mapak

Tartetze utilitateak Sass maparen bidez deklaratzen dira eta, ondoren, gure utilitateen APIarekin sortzen dira.

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

Tartetze utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss. Ikasi utilitateen APIa erabiltzen.

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