Panagsisina

Margin ken padding

Ituding dagiti responsive-friendly marginwenno paddingdagiti pateg iti maysa nga elemento wenno ti subset dagiti sikiganna nga addaan kadagiti klase ti shorthand. Iramanna ti suporta para kadagiti indibidual a tagikua, amin a tagikua, ken dagiti bertikal ken horisontal a tagikua. Dagiti klase ket naibangon manipud iti default a mapa ti Sass manipud iti .25remaginggana iti 3rem.

Usarem ti modulo ti layout ti CSS Grid? Ibilangmo ti panangusar iti gap utility .

Notasion

Dagiti utilidad ti panagsisina a maipakat kadagiti amin a puntos ti panagburak, manipud iti xsaginggana xxl, ket awan ti pannakapaababa ti puntos ti panagsina kadagitoy. Daytoy ket gapu ta dagitoy a klase ket maipakat manipud min-width: 0ken agpangato, ken iti kasta ket saan a naisinggalut babaen ti maysa a panagsaludsod ti media. Nupay kasta, dagiti nabati a breakpoint ket talaga a mangiraman ti pannakapaababa ti breakpoint.

Dagiti klase ket nainaganan babaen ti panagusar ti pormat {property}{sides}-{size}para xsken {property}{sides}-{breakpoint}-{size}para iti sm, md, lg, xl, ken xxl.

No sadino a ti sanikua ket maysa kadagiti:

• m- para kadagiti klase nga agsetmargin
• p- para kadagiti klase nga agsetpadding

Sadino ti sides ket maysa kadagiti:

• t- para kadagiti klase a mangikeddeng margin-topwennopadding-top
• b- para kadagiti klase a mangikeddeng margin-bottomwennopadding-bottom
• s- (mangrugi) para kadagiti klase a mangiset margin-leftwenno padding-leftiti LTR, margin-rightwenno padding-rightiti RTL
• e- (end) para kadagiti klase nga agset margin-rightwenno padding-rightiti LTR, margin-leftwenno padding-leftiti RTL
• x- para kadagiti klase a mangikeddeng nga agpada *-leftken*-right
• y- para kadagiti klase a mangikeddeng nga agpada *-topken*-bottom
• blangko - para kadagiti klase a mangikeddeng ti maysa marginwenno paddingiti amin nga 4 a sikigan ti elemento

Saan a ti kadakkel ket maysa kadagiti:

• 0- para kadagiti klase a mangikkat iti marginwenno paddingbabaen ti panangisaad iti dayta iti0
• 1- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * .25
• 2- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * .5
• 3- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer
• 4- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * 1.5
• 5- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * 3
• auto- para kadagiti klase a mangiset ti marginto auto

(Mabalinmo ti manginayon kadagiti ad-adu pay a kadakkel babaen ti pananginayon kadagiti panagserrek iti $spacersvariable ti mapa ti Sass.)

Dagiti pagarigan

Adtoy dagiti sumagmamano a pannakabagi a pagarigan dagitoy a klase:

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

Paisaad a panagsentro

Iti pay maipatinayon, ti Bootstrap ket mangiraman pay ti maysa a .mx-autoklase para iti horisontal a panagsentro ti naikeddeng-kalawa a linaon ti lebel ti bloke—kayatna a sawen, ti linaon nga addaan display: blockken ti maysa a widthset—babaen ti panangisaad kadagiti horisontal a pingir iti auto.

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

Negatibo a margin

Iti CSS, margindagiti tagikua ket mabalinda nga usaren dagiti negatibo a pateg ( paddingsaan). Dagitoy a negatibo a margin ket nabalbaliwan babaen ti default , ngem mabalin a mapalubosan iti Sass babaen ti panagituding $enable-negative-margins: true.

Ti sintaksis ket gangani a kapada ti kasisigud, positibo a margin a utilidad, ngem addaan ti pannakainayon ti nsakbay ti kiniddaw a kadakkel. Adda ditoy ti pagarigan a klase a kasungani ti .mt-1:

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

Uwang

No agus -usar display: gridti , mabalinmo nga usaren dagiti gaputilidad iti nagannak a pagkargaan ti grid. Daytoy ket mabalin a makasalbar iti pannakasapul a manginayon kadagiti utilidad ti margin kadagiti indibidual a banag ti grid (dagiti annak ti maysa a display: gridpagkargaan). Dagiti utilidad ti giwang ket sumungbat babaen ti default, ken napataud babaen ti API dagiti utilidadmi, a naibatay iti $spacersmapa ti Sass.

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

Ti suporta ket mangiraman kadagiti makasungbat a pagpilian para kadagiti amin a grid breakpoint ti Bootstrap, ken dagiti pay innem a kadakkel manipud iti $spacersmapa ( 0– 5). Awan ti .gap-autoklase ti utilidad ta epektibo a kapada ti .gap-0.

Sass nga

Dagiti Mapa

Dagiti utilidad ti panagsisina ket maideklara babaen ti mapa ti Sass ken kalpasanna ket napataud babaen dagiti utilidadmi nga API.

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

API dagiti utilidad

Dagiti utilidad ti panagsisina ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti utilities 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
    ),