in English

Spazjar

Bootstrap jinkludi firxa wiesgħa ta' klassijiet ta' utilità ta' marġni, padding u vojt li jirrispondu għal shorthand biex timmodifika d-dehra ta' element.

Fuq din il-paġna

Marġni u padding

Assenja responsive-friendly marginjew paddingvaluri lil element jew subsett tal-ġnub tiegħu bi klassijiet shorthand. Jinkludi appoġġ għall-proprjetajiet individwali, il-proprjetajiet kollha, u l-proprjetajiet vertikali u orizzontali. Il-klassijiet huma mibnija minn mappa Sass default li tvarja minn .25remsa 3rem.

Tuża l-modulu tat-tqassim tal-Grid CSS? Ikkunsidra li tuża l-utilità gap .

Notazzjoni

L-utilitajiet tal-ispazjar li japplikaw għall-punti ta' waqfien kollha, minn xssa xxl, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0u 'l fuq, u għalhekk mhumiex marbuta b'interrogazzjoni tal-midja. Il-punti ta' waqfien li jifdal, madankollu, jinkludu abbrevjazzjoni ta' breakpoint.

Il-klassijiet huma msemmija bl-użu tal-format {property}{sides}-{size}għal xsu {property}{sides}-{breakpoint}-{size}għal sm, md, lg, xl, u xxl.

Fejn il-proprjetà hija waħda minn:

m- għal klassijiet li jistabbilixxumargin
p- għal klassijiet li jistabbilixxupadding

Fejn il -ġnub huwa wieħed minn:

t- għal klassijiet li jistabbilixxu margin-topjewpadding-top
b- għal klassijiet li jistabbilixxu margin-bottomjewpadding-bottom
s- (bidu) għal klassijiet li jistabbilixxu margin-leftjew padding-leftf'LTR, margin-rightjew padding-rightf'RTL
e- (tmiem) għal klassijiet li jistabbilixxu margin-rightjew padding-rightf'LTR, margin-leftjew padding-leftf'RTL
x- għal klassijiet li jistabbilixxu kemm *-leftu*-right
y- għal klassijiet li jistabbilixxu kemm *-topu*-bottom
vojt - għal klassijiet li jistabbilixxu a marginjew paddingfuq l-4 naħat kollha tal-element

Fejn id- daqs huwa wieħed minn:

0- għal klassijiet li jeliminaw il- marginjew paddingbilli jistabbilixxuh għal0
1- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .25
2- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .5
3- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer
4- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 1.5
5- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 3
auto- għal klassijiet li jissettjaw il- margingħal auto

(Tista 'żżid aktar daqsijiet billi żżid entrati mal- $spacersvarjabbli tal-mappa Sass.)

Eżempji

Hawn huma xi eżempji rappreżentattivi ta’ dawn il-klassijiet:

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

Centering orizzontali

Barra minn hekk, Bootstrap jinkludi wkoll .mx-autoklassi biex iċċentra orizzontalment il-kontenut tal-livell tal-blokk b'wisa 'fiss—jiġifieri, kontenut li għandu display: blocku widthsett—billi jiġu stabbiliti l-marġini orizzontali għal auto.

Element iċċentrat

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

Marġini negattiv

Fis-CSS, il- marginproprjetajiet jistgħu jutilizzaw valuri negattivi ( paddingma jistgħux). Dawn il-marġini negattivi huma diżattivati awtomatikament , iżda jistgħu jiġu attivati f'Sass billi tissettja $enable-negative-margins: true.

Is-sintassi hija kważi l-istess bħall-utilitajiet tal-marġini pożittivi default, iżda biż-żieda ta ' nqabel id-daqs mitlub. Hawnhekk hawn eżempju ta 'klassi li hija l-oppost ta' .mt-1:

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

Gap

Meta tuża display: grid, tista 'tagħmel użu minn gaputilitajiet fuq il-kontenitur tal-grilja ġenitur. Dan jista 'jiffranka li jkollok iżżid l-utilitajiet tal-marġni għal oġġetti individwali tal-grilja (tfal ta' display: gridkontenitur). L-utilitajiet Gap huma responsivi awtomatikament, u huma ġġenerati permezz tal-API tal-utilitajiet tagħna, ibbażati fuq il- $spacersmappa Sass.

Oġġett tal-grilja 1

Oġġett tal-grilja 2

Oġġett tal-grilja 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>

L-appoġġ jinkludi għażliet li jirrispondu għall-punti ta' waqfien tal-grilja kollha ta' Bootstrap, kif ukoll sitt daqsijiet mill- $spacersmappa ( 0– 5). M'hemm l-ebda .gap-autoklassi ta 'utilità peress li effettivament hija l-istess bħal .gap-0.

Sass

Mapep

L-utilitajiet tal-ispazjar huma ddikjarati permezz tal-mappa Sass u mbagħad iġġenerati bl-API tal-utilitajiet tagħna.

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

Utilitajiet API

L-utilitajiet tal-ispazjar huma ddikjarati fl-API tal-utilitajiet tagħna f' scss/_utilities.scss. Tgħallem kif tuża l-API tal-utilitajiet.

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