Tazara

Bootstrap ya haɗa da faffadan kewayon gajarta amsa gajarta da azuzuwan kayan amfani don canza kamannin wani abu.

Yadda yake aiki

Sanya ma'amala marginko paddingƙima ga wani yanki ko ɓangaren ɓangaren sa tare da azuzuwan gajerun hannu. Ya haɗa da tallafi don kaddarorin mutum ɗaya, duk kaddarorin, da kaddarorin a tsaye da a kwance. An gina azuzuwan daga taswirar Sass tsoho daga .25remzuwa 3rem.

Sanarwa

Abubuwan amfani tazara waɗanda suka shafi duk wuraren karya, daga xszuwa xl, ba su da taƙaitaccen wuri a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0sama da sama, don haka ba su da alaƙa da tambayar kafofin watsa labarai. Ragowar wuraren karya, duk da haka, sun haɗa da gajarta wurin hutu.

Sunan azuzuwan suna amfani da tsari {property}{sides}-{size}don , , , da .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Inda dukiya take daya daga cikin:

m- don azuzuwan da aka saitamargin
p- don azuzuwan da aka saitapadding

Inda bangarorin daya ne:

t- don azuzuwan da suka saita margin-topkopadding-top
b- don azuzuwan da suka saita margin-bottomkopadding-bottom
l- don azuzuwan da suka saita margin-leftkopadding-left
r- don azuzuwan da suka saita margin-rightkopadding-right
x- domin azuzuwan cewa saita biyu *-leftda kuma*-right
y- domin azuzuwan cewa saita biyu *-topda kuma*-bottom
blank - don azuzuwan da suka saita marginko paddinga duk bangarorin 4 na kashi

Inda girman daya daga cikin:

0- don azuzuwan da ke kawar da marginko paddingta saita shi zuwa0
1- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .25
2- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .5
3- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer
4- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 1.5
5- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 3
auto- don azuzuwan da ke saita marginzuwa auto

(Zaka iya ƙara ƙarin masu girma dabam ta ƙara shigarwar zuwa $spacersmadaidaicin taswirar Sass.)

Misalai

Ga wasu misalan wakilai na waɗannan azuzuwan:

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

Tsaya a kwance

Bugu da ƙari, Bootstrap kuma ya haɗa da .mx-autoaji don a kwance madaidaiciya-tsaye ƙayyadadden abun ciki matakin toshe-wato abun ciki da ke display: blockda widthsaiti- ta hanyar saita madaidaitan maginin zuwa auto.

Abun tsakiya

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