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>

Negatīvā starpība

CSS marginrekvizītos var izmantot negatīvas vērtības ( paddingnevar). Sākot ar 4.2, mēs esam pievienojuši negatīvas piemales utilītas katram iepriekš norādītajam veselam skaitlim, kas nav nulle (piemēram, 1, 2, 3, 4, 5). Šīs utilītas ir ideāli piemērotas režģa kolonnu notekcauruļu pielāgošanai pārtraukuma punktos.

Sintakse ir gandrīz tāda pati kā noklusējuma pozitīvās piemales utilītas, taču ir pievienots npirms pieprasītā lieluma. Šeit ir klases piemērs, kas ir pretējs .mt-1:

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

Šeit ir piemērs Bootstrap režģa pielāgošanai vidējā ( md) pārtraukuma punktā un augstāk. Mēs esam palielinājuši .colpolsterējumu ar .px-md-5un pēc tam to novērsām, izmantojot .mx-md-n5vecāku .row.

Pielāgots kolonnu polsterējums

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>