Tazara
Bootstrap ya haɗa da faffadan kewayon gajarta amsa gajarta da azuzuwan kayan amfani don gyara kamannin wani abu.
Yadda yake aiki
Sanya ma'amala margin
ko padding
ƙima ga wani kashi ko ɓangaren ɓangaren sa tare da azuzuwan gajeren 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 .25rem
zuwa 3rem
.
Sanarwa
Abubuwan amfani tazara waɗanda suka shafi duk wuraren karya, daga xs
zuwa xl
, ba su da taƙaitaccen wuri a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0
sama da sama, don haka ba a ɗaure su da tambayar kafofin watsa labarai. Ragowar wuraren hutu, duk da haka, sun haɗa da gajarta wurin hutu.
Sunayen azuzuwan suna amfani da tsarin don {property}{sides}-{size}
, , , da .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
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 saitamargin-top
kopadding-top
b
- don azuzuwan da suka saitamargin-bottom
kopadding-bottom
l
- don azuzuwan da suka saitamargin-left
kopadding-left
r
- don azuzuwan da suka saitamargin-right
kopadding-right
x
- domin azuzuwan cewa saita biyu*-left
da kuma*-right
y
- domin azuzuwan cewa saita biyu*-top
da kuma*-bottom
- blank - don azuzuwan da suka saita
margin
kopadding
a duk bangarorin 4 na kashi
Inda girman daya daga cikin:
0
- don azuzuwan da ke kawar damargin
kopadding
ta saita shi zuwa0
1
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * .25
2
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * .5
3
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer
4
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * 1.5
5
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * 3
auto
- don azuzuwan da ke saitamargin
zuwa auto
(Zaka iya ƙara ƙarin masu girma dabam ta ƙara shigarwar zuwa $spacers
madaidaicin 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-auto
aji don a kwance madaidaiciya-tsaye ƙayyadadden abun ciki matakin toshe-wato abun ciki da ke display: block
da width
saiti- ta hanyar saita madaidaitan maginin zuwa auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Mara kyau gefe
A cikin CSS, margin
kaddarorin na iya amfani da munanan dabi'u ( padding
ba za su iya ba). Dangane da 4.2, mun ƙara abubuwan amfani mara kyau na gefe don kowane girman adadi mara sifili da aka jera a sama (misali, 1
, 2
, 3
, 4
, 5
). Waɗannan abubuwan amfani suna da kyau don keɓance magudanan ginshiƙan grid a cikin wuraren karya.
Rubutun ya kusan iri ɗaya ne da tsoho, kayan aikin gefe masu inganci, amma tare da ƙari n
kafin girman da ake nema. Ga misali ajin wanda ke da sabanin haka .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Anan ga misali na keɓance grid ɗin Bootstrap a matsakaici ( md
) ɓata lokaci da sama. Mun ƙãra .col
mashin ɗin tare .px-md-5
da kuma murkushe hakan .mx-md-n5
akan iyaye .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>