Beàrnan

Iomall agus pleadhag

Sònraich luachan càirdeil marginno paddingfreagairteach do eileamaid no fo-sheata de na taobhan aige le clasaichean làmh-ghoirid. A’ toirt a-steach taic do thogalaichean fa leth, gach seilbh, agus togalaichean dìreach is còmhnard. Tha clasaichean air an togail bho mhapa àbhaisteach Sass a’ dol .25rembho 3rem.

A’ cleachdadh modal cruth CSS Grid? Beachdaich air a bhith a 'cleachdadh goireas beàrn .

Comharrachadh

Chan eil giorrachadh puing-bhriseadh annta aig goireasan farsaing a tha a’ buntainn ris a h-uile puing-briseadh, bho xsgu . xxlTha seo air sgàth gu bheil na clasaichean sin air an cur an sàs bho min-width: 0agus suas, agus mar sin chan eil iad air an ceangal le ceist mheadhanan. Tha na puingean brisidh a tha air fhàgail, ge-tà, a’ toirt a-steach giorrachadh puing-bhriseadh.

Tha na clasaichean air an ainmeachadh a’ cleachdadh cruth {property}{sides}-{size}airson xsagus {property}{sides}-{breakpoint}-{size}airson sm, md, lg, xl, agus xxl.

Far a bheil seilbh mar aon de:

• m- airson clasaichean a tha a 'suidheachadhmargin
• p- airson clasaichean a tha a 'suidheachadhpadding

Far a bheil taobhan mar aon de:

• t- airson clasaichean a shuidhich margin-topnopadding-top
• b- airson clasaichean a shuidhich margin-bottomnopadding-bottom
• s- (tòiseachadh) airson clasaichean a tha a’ suidheachadh margin-leftno padding-leftann an LTR, margin-rightno padding-rightann an RTL
• e- (deireadh) airson clasaichean a tha a’ suidheachadh margin-rightno padding-rightann an LTR, margin-leftno padding-leftann an RTL
• x- airson clasaichean a tha a 'suidheachadh an dà chuid *-leftagus*-right
• y- airson clasaichean a tha a 'suidheachadh an dà chuid *-topagus*-bottom
• bàn - airson clasaichean a tha a 'suidheachadh marginno paddingair a h-uile 4 taobh den eileamaid

Far a bheil meud mar aon de:

• 0- airson clasaichean a chuireas às do marginno paddingle bhith ga shuidheachadh0
• 1- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * .25
• 2- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * .5
• 3- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer
• 4- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * 1.5
• 5- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * 3
• auto- airson clasaichean a tha a 'suidheachadh an margingu fèin-ghluasadach

(Faodaidh tu barrachd mheudan a chur ris le bhith a’ cur inntrigidhean ri $spacerscaochladair mapa Sass.)

Eisimpleirean

Seo eisimpleirean riochdachail de na clasaichean seo:

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

Ionadachadh còmhnard

A bharrachd air an sin, tha Bootstrap cuideachd a’ toirt a-steach .mx-autoclas airson susbaint ìre bloc leud stèidhichte gu còmhnard - is e sin, susbaint aig a bheil display: blockagus widthseata - le bhith a ’suidheachadh na h-oirean còmhnard gu auto.

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

Iomall àicheil

Ann an CSS, marginfaodaidh togalaichean luachan àicheil a chleachdadh ( paddingchan urrainn). Tha na h-iomaill àicheil seo à comas gu bunaiteach , ach faodar an cur an comas ann an Sass le bhith a 'suidheachadh $enable-negative-margins: true.

Tha an co-chòrdadh cha mhòr an aon rud ris na goireasan iomaill dearbhach, adhartach, ach le cur ris nron mheud a chaidh iarraidh. Seo eisimpleir de chlas a tha mu choinneamh .mt-1:

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

Beàrn

Nuair a bhios tu a’ cleachdadh display: grid, faodaidh tu gapgoireasan a chleachdadh air an t-soitheach clèithe phàrant. Faodaidh seo sàbhaladh air a bhith agad ri goireasan iomaill a chur ri nithean clèithe fa leth (clann display: gridsoitheach). Tha goireasan beàrn a’ freagairt gu bunaiteach, agus air an gineadh tro ar goireasan API, stèidhichte air $spacersmapa 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>

Tha taic a’ toirt a-steach roghainnean freagairteach airson a h-uile puing brisidh clèithe aig Bootstrap, a bharrachd air sia meudan bhon $spacersmhapa ( 0- 5). Chan eil .gap-autoclas goireis ann oir tha e gu h-èifeachdach an aon rud ri .gap-0.

Sass

Mapaichean

Bithear a’ cur an cèill goireasan eadar-dhealaichte tro mhapa Sass agus an uairsin air an cruthachadh leis na goireasan API againn.

$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

Tha goireasan farsaing air an ainmeachadh anns na goireasan API againn ann an scss/_utilities.scss. Ionnsaich mar a chleachdas tu an API Utilities.

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