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 margin
vai vērtības, izmantojot stenogrāfijas klases. padding
Ietver 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 .25rem
līdz 3rem
.
Apzīmējums
Atstarpju utilītas, kas attiecas uz visiem pārtraukuma punktiem no xs
līdz xl
, nesatur pārtraukuma punkta saīsinājumu. Tas ir tāpēc, ka šīs klases tiek lietotas no min-width: 0
un 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}
, , , xs
un .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
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 nosakamargin-top
vaipadding-top
b
- klasēm, kas nosakamargin-bottom
vaipadding-bottom
l
- klasēm, kas nosakamargin-left
vaipadding-left
r
- klasēm, kas nosakamargin-right
vaipadding-right
x
- klasēm, kas nosaka gan*-left
un*-right
y
- klasēm, kas nosaka gan*-top
un*-bottom
- tukšs - klasēm, kas nosaka a
margin
vaipadding
uz visām 4 elementa pusēm
Ja izmērs ir viens no:
0
- klasēm, kas novēršmargin
vaipadding
iestatot to uz0
1
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * .25
2
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * .5
3
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer
4
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * 1.5
5
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * 3
auto
- klasēm, kas iestatamargin
uz automātisko
(Varat pievienot citus izmērus, pievienojot ierakstus $spacers
Sass 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-auto
klasi fiksēta platuma bloka līmeņa satura horizontālai centrēšanai, tas ir, saturam, kuram ir display: block
un width
kopa, iestatot horizontālās piemales uz auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatīvā starpība
CSS margin
rekvizītos var izmantot negatīvas vērtības ( padding
nevar). 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 n
pirms 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 .col
polsterējumu ar .px-md-5
un pēc tam to novērsām, izmantojot .mx-md-n5
vecāku .row
.
<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>