Mipata

Bootstrap imaphatikizapo magawo angapo omvera amfupi komanso makalasi othandizira kuti asinthe mawonekedwe a chinthu.

Momwe zimagwirira ntchito

Perekani zovomerezeka marginkapena paddingzofunikira ku chinthu kapena kagawo kakang'ono ka mbali zake ndi makalasi achidule. Zimaphatikizapo chithandizo cha katundu payekha, katundu yense, ndi zopingasa ndi zopingasa. Maphunziro amapangidwa kuchokera pamapu okhazikika a Sass kuyambira .25remmpaka 3rem.

Kuzindikira

Zida zopangira masitayilo zomwe zimagwira ntchito kumadera onse, kuyambira xsmpaka xl, zilibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.

Maphunzirowa amatchulidwa pogwiritsa ntchito mawonekedwe {property}{sides}-{size}a xs, , , ndi .{property}{sides}-{breakpoint}-{size}smmdlgxl

Kumene katundu ndi imodzi mwa:

m- kwa makalasi omwe akhazikitsidwamargin
p- kwa makalasi omwe akhazikitsidwapadding

Kumene mbali ndi imodzi mwa:

t- kwa makalasi omwe amakhazikitsa margin-topkapenapadding-top
b- kwa makalasi omwe amakhazikitsa margin-bottomkapenapadding-bottom
l- kwa makalasi omwe amakhazikitsa margin-leftkapenapadding-left
r- kwa makalasi omwe amakhazikitsa margin-rightkapenapadding-right
x- kwa makalasi omwe amakhazikitsa onse *-leftndi*-right
y- kwa makalasi omwe amakhazikitsa onse *-topndi*-bottom
opanda kanthu - m'makalasi omwe amayika mbali marginzonse paddingzinayi za chinthucho

Kumene kukula ndi chimodzi mwa:

0- m'makalasi omwe amachotsa marginkapena paddingkuyiyika0
1- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .25
2- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .5
3- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer
4- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 1.5
5- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 3
auto- pamakalasi omwe amakhazikitsa marginauto

(Mutha kuwonjezera kukula kwake powonjezera zolemba $spacerspamapu a Sass.)

Zitsanzo

Nazi zitsanzo zoimira makalasi awa:

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

Chopingasa pakati

Kuphatikiza apo, Bootstrap imaphatikizansopo .mx-autokalasi yokhazikika yopingasa mulingo wa block - ndiye kuti, zomwe zili display: blockndi widthseti - pokhazikitsa malire opingasa mpaka auto.

Chigawo chapakati

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