Atstarpes

Bootstrap ietver plašu saīsināto atsauces piemales, polsterējuma un atstarpes lietderības klašu klāstu, lai mainītu elementa izskatu.

Šajā lapā

Piemale un polsterējums

Piešķiriet elementam vai tā malu apakškopai atsaucīgas vērtības marginvai vērtības, izmantojot stenogrāfijas klases. paddingIetver atsevišķu rekvizītu, visu rekvizītu, kā arī vertikālo un horizontālo rekvizītu atbalstu. Klases ir veidotas no noklusējuma Sass kartes diapazonā no .25remlīdz 3rem.

Vai izmantojat CSS Grid izkārtojuma moduli? Apsveriet iespēju izmantot utilītu starpība .

Apzīmējums

Atstarpju utilītas, kas attiecas uz visiem pārtraukuma punktiem no xslīdz xxl, nesatur pārtraukuma punkta saīsinājumu. Tas ir tāpēc, ka šīs klases tiek lietotas no min-width: 0un uz augšu, un tādējādi tās nav saistītas ar multivides vaicājumu. Tomēr atlikušajos pārtraukuma punktos ir ietverts pārtraukuma punkta saīsinājums.

Klases tiek nosauktas, izmantojot formātu {property}{sides}-{size}, xs, {property}{sides}-{breakpoint}-{size}, sm, un .mdlgxlxxl

Ja īpašums ir viens no:

m- klasēm, kas komplektāmargin
p- klasēm, kas komplektāpadding

Kur malas ir viena no:

t- klasēm, kas nosaka margin-topvaipadding-top
b- klasēm, kas nosaka margin-bottomvaipadding-bottom
s- (sākums) klasēm, kas iestatītas margin-leftvai padding-leftLTR, margin-rightvai padding-rightRTL
e- (beigas) klasēm, kas iestatītas margin-rightvai padding-rightLTR, margin-leftvai padding-leftRTL
x- klasēm, kas nosaka gan *-leftun*-right
y- klasēm, kas nosaka gan *-topun*-bottom
tukšs - klasēm, kas nosaka a marginvai paddinguz visām 4 elementa pusēm

Ja izmērs ir viens no:

0- klasēm, kas novērš marginvai paddingiestatot to uz0
1- (pēc noklusējuma) klasēm, kas iestata marginvai paddinguz$spacer * .25
2- (pēc noklusējuma) klasēm, kas iestata marginvai paddinguz$spacer * .5
3- (pēc noklusējuma) klasēm, kas iestata marginvai paddinguz$spacer
4- (pēc noklusējuma) klasēm, kas iestata marginvai paddinguz$spacer * 1.5
5- (pēc noklusējuma) klasēm, kas iestata marginvai paddinguz$spacer * 3
auto- klasēm, kas iestata marginuz automātisko

(Varat pievienot citus izmērus, pievienojot ierakstus $spacersSass kartes mainīgajam.)

Piemēri

Šeit ir daži reprezentatīvi šo klašu piemēri:

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

Horizontālā centrēšana

Turklāt Bootstrap ietver arī .mx-autoklasi fiksēta platuma bloka līmeņa satura horizontālai centrēšanai, tas ir, saturam, kuram ir display: blockun widthkopa, iestatot horizontālās piemales uz auto.

Centrēts elements

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

Negatīvā starpība

CSS marginrekvizītos var izmantot negatīvas vērtības ( paddingnevar). Šīs negatīvās piemales pēc noklusējuma ir atspējotas , taču tās var iespējot programmā Sass, iestatot $enable-negative-margins: true.

Sintakse ir gandrīz tāda pati kā noklusējuma pozitīvās piemales utilītas, taču ir pievienots npirms pieprasītā lieluma. Šeit ir klases piemērs, kas ir pretējs .mt-1:

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

Plaisa

Izmantojot display: grid, varat izmantot gaputilītprogrammas vecākrežģa konteinerā. display: gridTas var ietaupīt, jo atsevišķiem režģa elementiem ( konteinera bērniem) jāpievieno rezerves utilītas . Gap utilītas pēc noklusējuma ir atsaucīgas, un tās tiek ģenerētas, izmantojot mūsu utilītu API, pamatojoties uz $spacersSass karti.

1. režģa vienums

Režģa 2. vienums

Režģa 3. vienums

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

Atbalsts ietver atsaucīgas opcijas visiem Bootstrap režģa pārtraukuma punktiem, kā arī sešus izmērus no $spacerskartes ( 0– 5). Nav .gap-autolietderības klases, jo tā faktiski ir tāda pati kā .gap-0.

Sass

Kartes

Atstarpes utilītas tiek deklarētas, izmantojot Sass karti, un pēc tam ģenerētas, izmantojot mūsu utilītu 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);

Utilities API

Atstarpju utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss. Uzziniet, kā izmantot utilītu 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
    ),