Vahekaugus

Bootstrap sisaldab elemendi välimuse muutmiseks laias valikus kiirkirjas kasutatavaid veerisi, polsterdust ja lünka.

Sellel lehel

Veeris ja polster

Määrake kiirkirjaklassidega elemendile või selle külgede alamhulgale reageerimissõbralikkus marginvõi väärtused. paddingSisaldab üksikute atribuutide, kõigi atribuutide ning vertikaalsete ja horisontaalsete atribuutide tuge. Klassid on koostatud Sassi vaikekaardilt vahemikus .25remkuni 3rem.

Kas kasutate CSS-ruudustiku paigutusmoodulit? Kaaluge vaheutiliidi kasutamist .

Märge

Kõigile murdepunktidele (alates xskuni xxl) kehtivatel vaheutiliitidel pole murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.

Klassid on nimetatud vormingus {property}{sides}-{size}, , , , xsja {property}{sides}-{breakpoint}-{size}jaoks .smmdlgxlxxl

Kui vara on üks järgmistest:

m- klasside jaoks, mis seavadmargin
p- klasside jaoks, mis seavadpadding

Kus küljed on üks järgmistest:

t- klassidele, mis seavad margin-topvõipadding-top
b- klassidele, mis seavad margin-bottomvõipadding-bottom
s- (start) klasside jaoks, mis on määratud LTR -is või margin-leftRTL -ispadding-leftmargin-rightpadding-right
e- (lõpp) klasside jaoks, mis on määratud LTR -is või margin-rightRTL -ispadding-rightmargin-leftpadding-left
x- klassidele, mis määravad nii *-leftja*-right
y- klassidele, mis määravad nii *-topja*-bottom
tühi – klasside jaoks, mis määravad a marginvõi paddingelemendi kõigile neljale küljele

Kui suurus on üks järgmistest:

0- klassidele, mis kõrvaldavad marginvõi paddingmäärates selle0
1- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * .25
2- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * .5
3- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer
4- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * 1.5
5- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * 3
auto- klassidele, mis määravad marginautomaatseks

(Saate lisada rohkem suurusi, lisades kirjeid $spacersSassi kaardimuutujale.)

Näited

Siin on mõned tüüpilised näited nendest klassidest:

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

Horisontaalne tsentreerimine

Lisaks sisaldab Bootstrap ka .mx-autoklassi fikseeritud laiusega plokitaseme sisu, st sisu, millel on display: blockja widthkomplekt, horisontaalseks tsentreerimiseks, määrates horisontaalsed veerised väärtusele auto.

Tsentreeritud element

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

Negatiivne marginaal

CSS-is võivad marginatribuudid kasutada negatiivseid väärtusi ( paddingei saa). Need negatiivsed veerised on vaikimisi keelatud , kuid neid saab Sassis lubada sätte abil $enable-negative-margins: true.

Süntaks on peaaegu sama, mis vaikimisi positiivse veerise utiliidid, kuid lisatud on nenne nõutud suurust. Siin on näide klassist, mis on vastupidine .mt-1:

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

Lõhe

Kui kasutate display: grid, saate kasutada gappõhivõrgu konteineris olevaid utiliite. display: gridSee võib säästa üksikutele ruudustikuüksustele ( konteineri lapsed) marginaaliutiliitide lisamist . Gap utiliidid reageerivad vaikimisi ja genereeritakse meie utiliidide API kaudu $spacersSassi kaardi alusel.

Ruudustiku üksus 1

Ruudustiku üksus 2

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

Tugi sisaldab reageerivaid valikuid kõigi Bootstrapi ruudustiku katkestuspunktide jaoks, aga ka kuut suurust $spacerskaardil ( 0– 5). .gap-autoKasulikkusklassi pole , kuna see on sisuliselt sama, mis .gap-0.

Sass

Kaardid

Vaheutiliidid deklareeritakse Sassi kaardi kaudu ja genereeritakse seejärel meie utiliitide API-ga.

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

Utiliidide API

Tühikute utiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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