Razmik

Bootstrap vključuje široko paleto stenografskih odzivnih razredov pripomočkov za rob, oblazinjenje in vrzel za spreminjanje videza elementa.

Na tej strani

Rob in oblazinjenje

Elementu ali podmnožici njegovih strani dodelite odzivno prijazne marginali paddingvrednosti s stenografskimi razredi. Vključuje podporo za posamezne lastnosti, vse lastnosti ter navpične in vodoravne lastnosti. Razredi so zgrajeni iz privzetega zemljevida Sass v razponu od .25remdo 3rem.

Uporabljate modul postavitve CSS Grid? Razmislite o uporabi pripomočka za vrzel .

Notacija

Pripomočki za razmik, ki veljajo za vse prelomne točke, od xsdo xxl, nimajo okrajšav prekinitvene točke. To je zato, ker se ti razredi uporabljajo od min-width: 0in navzgor in zato niso vezani na predstavnostno poizvedbo. Preostale mejne točke pa vključujejo okrajšavo mejne točke.

Razredi so poimenovani v obliki {property}{sides}-{size}za xsin {property}{sides}-{breakpoint}-{size}za sm, md, lg, xlin xxl.

Če je lastnina eno od:

m- za razrede, ki določajomargin
p- za razrede, ki določajopadding

Kjer je stran eno od:

t- za razrede, ki določajo margin-topozpadding-top
b- za razrede, ki določajo margin-bottomozpadding-bottom
s- (začetek) za razrede, ki so nastavljeni margin-leftali padding-leftv LTR margin-rightali padding-rightv RTL
e- (konec) za razrede, ki so nastavljeni margin-rightali padding-rightv LTR margin-leftali padding-leftv RTL
x- za razrede, ki določajo tako *-leftin*-right
y- za razrede, ki določajo tako *-topin*-bottom
prazno - za razrede, ki nastavijo marginali paddingna vseh 4 straneh elementa

Kjer je velikost eno od:

0- za razrede, ki odpravijo marginali paddingz nastavitvijo na0
1- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * .25
2- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * .5
3- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer
4- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * 1.5
5- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * 3
auto- za razrede, ki nastavijo marginna auto

(Dodate lahko več velikosti tako, da dodate vnose v $spacersspremenljivko zemljevida Sass.)

Primeri

Tukaj je nekaj reprezentativnih primerov teh razredov:

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

Horizontalno centriranje

Poleg tega Bootstrap vključuje tudi .mx-autorazred za vodoravno centriranje vsebine na ravni bloka s fiksno širino – to je vsebine, ki ima display: blockniz width– z nastavitvijo vodoravnih robov na auto.

Sredinski element

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

Negativna marža

V CSS lahko marginlastnosti uporabljajo negativne vrednosti ( paddingne morejo). Te negativne marže so privzeto onemogočene , vendar jih je mogoče omogočiti v Sass z nastavitvijo $enable-negative-margins: true.

Sintaksa je skoraj enaka privzetim pripomočkom s pozitivno maržo, vendar z dodatkom npred zahtevano velikostjo. Tukaj je primer razreda, ki je nasproten od .mt-1:

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

Gap

Ko uporabljate display: grid, lahko uporabite gappripomočke v vsebniku nadrejene mreže. To lahko prihrani pri dodajanju pripomočkov za marže posameznim mrežnim elementom (otrokom display: gridvsebnika). Pripomočki Gap so privzeto odzivni in se ustvarijo prek našega API-ja za pripomočke, ki temelji na $spacerszemljevidu Sass.

Element mreže 1

Element mreže 2

3. element mreže

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

Podpora vključuje odzivne možnosti za vse prelomne točke mreže Bootstrap, kot tudi šest velikosti iz $spacerszemljevida ( 0– 5). Ni .gap-autorazreda uporabnosti, saj je dejansko enak .gap-0.

Sass

Zemljevidi

Pripomočki za razmik so deklarirani prek zemljevida Sass in nato ustvarjeni z našim API-jem za pripomočke.

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

API za pripomočke

Pripomočki za razmik so navedeni v našem API-ju za pripomočke v scss/_utilities.scss. Naučite se uporabljati API za pripomočke.

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