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>