Source

Spazjar

Bootstrap jinkludi firxa wiesgħa ta' klassijiet ta' marġni ta' rispons shorthand u ta' utilità għall-ikkuttunar biex jimmodifika d-dehra ta' element.

Kif taħdem

Assenja responsive-friendly marginjew paddingvaluri lil element jew subsett tal-ġnub tiegħu bi klassijiet shorthand. Jinkludi appoġġ għall-proprjetajiet individwali, il-proprjetajiet kollha, u l-proprjetajiet vertikali u orizzontali. Il-klassijiet huma mibnija minn mappa Sass default li tvarja minn .25remsa 3rem.

Notazzjoni

Utilitajiet ta' spazjar li japplikaw għall-punti ta' waqfien kollha, minn xssa xl, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0u 'l fuq, u għalhekk mhumiex marbuta b'interrogazzjoni tal-midja. Il-punti ta' waqfien li jifdal, madankollu, jinkludu abbrevjazzjoni ta' breakpoint.

Il-klassijiet huma msemmija bl-użu tal-format {property}{sides}-{size}għal xsu {property}{sides}-{breakpoint}-{size}għal sm, md, lg, u xl.

Fejn il-proprjetà hija waħda minn:

m- għal klassijiet li jistabbilixxumargin
p- għal klassijiet li jistabbilixxupadding

Fejn il -ġnub huwa wieħed minn:

t- għal klassijiet li jistabbilixxu margin-topjewpadding-top
b- għal klassijiet li jistabbilixxu margin-bottomjewpadding-bottom
l- għal klassijiet li jistabbilixxu margin-leftjewpadding-left
r- għal klassijiet li jistabbilixxu margin-rightjewpadding-right
x- għal klassijiet li jistabbilixxu kemm *-leftu*-right
y- għal klassijiet li jistabbilixxu kemm *-topu*-bottom
vojt - għal klassijiet li jistabbilixxu a marginjew paddingfuq l-4 naħat kollha tal-element

Fejn id- daqs huwa wieħed minn:

0- għal klassijiet li jeliminaw il- marginjew paddingbilli jistabbilixxuh għal0
1- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .25
2- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .5
3- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer
4- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 1.5
5- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 3
auto- għal klassijiet li jissettjaw il- margingħal auto

(Tista 'żżid aktar daqsijiet billi żżid entrati mal- $spacersvarjabbli tal-mappa Sass.)

Eżempji

Hawn huma xi eżempji rappreżentattivi ta’ dawn il-klassijiet:

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

Centering orizzontali

Barra minn hekk, Bootstrap jinkludi wkoll .mx-autoklassi biex iċċentra orizzontalment kontenut tal-livell tal-blokki b'wisa 'fiss—jiġifieri, kontenut li għandu display: blocku widthsett—billi jiġu stabbiliti l-marġini orizzontali għal auto.

Element iċċentrat

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