Tarpai

„Bootstrap“ apima platų sutrumpinto atsako paraštės, užpildymo ir tarpo naudingumo klasių asortimentą, kad pakeistų elemento išvaizdą.

Šiame puslapyje

Paraštė ir užpildymas

Priskirkite elementui ar jo kraštinių poaibiui jautrumą marginarba reikšmes naudodami stenografijos klases. paddingApima atskirų savybių, visų savybių ir vertikalių bei horizontalių savybių palaikymą. Klasės sukurtos pagal numatytąjį Sass žemėlapį nuo .25remiki 3rem.

Naudojate CSS tinklelio išdėstymo modulį? Apsvarstykite galimybę naudoti tarpų įrankį .

Žymėjimas

Tarpų priemonės, taikomos visoms lūžio taškams nuo xsiki xxl, neturi lūžio taško santrumpos. Taip yra todėl, kad šios klasės taikomos nuo min-width: 0pradžios iki galo ir todėl nėra susietos su medijos užklausa. Tačiau likusiuose lūžio taškuose yra lūžio taško santrumpa.

Klasės pavadintos naudojant formatą {property}{sides}-{size}ir xs, {property}{sides}-{breakpoint}-{size}, sm, md, lgir xl.xxl

Kai nuosavybė yra viena iš:

m- klasėms, kurios nustatomosmargin
p- klasėms, kurios nustatomospadding

Kurios pusės yra viena iš:

t- klasėms, kurios nustato margin-toparbapadding-top
b- klasėms, kurios nustato margin-bottomarbapadding-bottom
s- (pradžia) klasėms, kurios nustatomos margin-leftarba padding-leftLTR, margin-rightarba padding-rightRTL
e- (pabaiga) klasėms, kurios nustatomos margin-rightarba padding-rightLTR, margin-leftarba padding-leftRTL
x- klasėms, kurios nustato ir *-leftir*-right
y- klasėms, kurios nustato ir *-topir*-bottom
tuščia – klasėms, kurios nustato a marginarba paddingvisose 4 elemento pusėse

Kai dydis yra vienas iš:

0- klasėms, kurios pašalina marginarba paddingnustatydami jį į0
1- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * .25
2- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * .5
3- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer
4- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * 1.5
5- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * 3
auto- klasėms, kuriose nustatytas marginautomatinis

(Galite pridėti daugiau dydžių, įtraukdami įrašus į $spacersSass žemėlapio kintamąjį.)

Pavyzdžiai

Štai keletas tipiškų šių klasių pavyzdžių:

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

Horizontalus centravimas

Be to, „Bootstrap“ taip pat apima .mx-autoklasę, skirtą horizontaliai centruoti fiksuoto pločio bloko lygio turinį, ty turinį, kuris turi display: blockir widthrinkinį, nustatant horizontalias paraštes į auto.

Centruotas elementas

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

Neigiama marža

CSS marginypatybėse gali būti naudojamos neigiamos reikšmės ( paddingnegalima). Šios neigiamos paraštės yra išjungtos pagal numatytuosius nustatymus , bet jas galima įjungti Sass nustačius $enable-negative-margins: true.

Sintaksė yra beveik tokia pati kaip numatytosios teigiamos maržos komunalinės programos, tačiau pridėta nprieš reikalaujamą dydį. Štai pavyzdinė klasė, kuri yra priešinga .mt-1:

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

Tarpas

Kai naudojate display: grid, galite naudoti gappagrindinio tinklelio konteinerio komunalines paslaugas. Taip galima sutaupyti nuo atskirų tinklelio elementų ( display: gridkonteinerio antrinių) pridėti maržos paslaugų. Pagal numatytuosius nustatymus „Gp“ paslaugos yra reaguojančios ir generuojamos naudojant mūsų paslaugų API, remiantis „ $spacersSass“ žemėlapiu.

1 tinklelio elementas

2 tinklelio elementas

3 tinklelio elementas

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

Palaikymas apima visų „Bootstrap“ tinklelio lūžio taškų jautrias parinktis, taip pat šešis $spacersžemėlapio dydžius ( 0– 5). Nėra .gap-autonaudingumo klasės, nes ji iš esmės yra tokia pati kaip .gap-0.

Sass

Žemėlapiai

Tarpų komunalinės paslaugos deklaruojamos naudojant Sass žemėlapį ir sugeneruojamos naudojant mūsų paslaugų 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

Tarpų tarpinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų 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
    ),