Atstarpes

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

Kā tas strādā

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.

Apzīmējums

Atstarpju utilītas, kas attiecas uz visiem pārtraukuma punktiem no xslīdz xl, 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}, , , xsun .{property}{sides}-{breakpoint}-{size}smmdlgxl

Ja īpašums ir viens no:

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

Ja malas ir viena no:

t- klasēm, kas nosaka margin-topvaipadding-top
b- klasēm, kas nosaka margin-bottomvaipadding-bottom
l- klasēm, kas nosaka margin-leftvaipadding-left
r- klasēm, kas nosaka margin-rightvaipadding-right
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;
}

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