Izithuba
I-Bootstrap ibandakanya uluhlu olubanzi lwe-shorthand ephendulayo ephendulayo kunye neeklasi eziluncedo zokuguqula ukuguqula inkangeleko yento.
Ingaba isebenza kanjani
Yabela i-responsive-friendly margin
or padding
values to element or subset of its sides neeclasses shorthand. Ibandakanya inkxaso yeepropati zomntu ngamnye, zonke iipropati, kunye neepropati ezithe nkqo nezithe tye. Iiklasi zakhiwe ukusuka kwimephu ye-Sass engagqibekanga ukusuka .25rem
kwi 3rem
.
Ukuphawula
Izithuba zemisebenzi ezisebenza kuzo zonke iindawo zokuqhawula, ukusuka xs
ukuya ukuya xl
, azinazifinyezo zebreakpoint kuzo. Oku kungenxa yokuba ezo klasi zisetyenziswa ukusuka min-width: 0
nangaphezulu, kwaye ke azibotshwanga ngumbuzo wemidiya. Ii-breakpoints ezishiyekileyo, nangona kunjalo, zibandakanya isifinyezo se-breakpoint.
Iiklasi zithiywe kusetyenziswa ifomathi {property}{sides}-{size}
ye xs
kunye {property}{sides}-{breakpoint}-{size}
ne sm
, md
, lg
, kunye xl
.
Apho ipropati yenye ye:
m
- kwiiklasi ezibekamargin
p
- kwiiklasi ezibekapadding
Apho amacala yenye ye:
t
- kwiiklasi ezibekamargin-top
okanyepadding-top
b
- kwiiklasi ezibekamargin-bottom
okanyepadding-bottom
l
- kwiiklasi ezibekamargin-left
okanyepadding-left
r
- kwiiklasi ezibekamargin-right
okanyepadding-right
x
- kwiiklasi ezibeka zombini*-left
kunye*-right
y
- kwiiklasi ezibeka zombini*-top
kunye*-bottom
- blank - kwiiklasi ezicwangcisa i
margin
okanyepadding
kuwo onke amacala ama-4 ento
Apho ubukhulu buyenye ye:
0
- kwiiklasi ezisusamargin
okanyepadding
ngokuyicwangcisa0
1
- (ngokungagqibekanga) kwiiklasi ezicwangcisa imargin
okanyepadding
ukuya$spacer * .25
2
- (ngokungagqibekanga) kwiiklasi ezicwangcisa imargin
okanyepadding
ukuya$spacer * .5
3
- (ngokungagqibekanga) kwiiklasi ezicwangcisa imargin
okanyepadding
ukuya$spacer
4
- (ngokungagqibekanga) kwiiklasi ezicwangcisa imargin
okanyepadding
ukuya$spacer * 1.5
5
- (ngokungagqibekanga) kwiiklasi ezicwangcisa imargin
okanyepadding
ukuya$spacer * 3
auto
- kwiiklasi eziseta i-margin
auto
(Unokongeza ubungakanani obungakumbi ngokongeza amangeno $spacers
kuguquko lwemephu ye-Sass.)
Imizekelo
Nantsi eminye imizekelo emele ezi klasi:
.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;
}
Ukuzinzisa okuthe tye
Ukongezelela, i-Bootstrap ikwabandakanya .mx-auto
iklasi yokumisa i-horizontally centering blocked-width wide-fixed content level-oko kukuthi, umxholo onawo display: block
kunye width
nesethi-ngokubeka imida ethe tye ukuya auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Umda ongalunganga
Kwi-CSS, margin
iipropathi zinokusebenzisa amaxabiso angalunganga ( padding
awanako). Ukusukela ngo-4.2, songeze izinto ezingalunganga zomda wesayizi nganye engeyo-zero epheleleyo edweliswe ngasentla (umz., 1
, 2
, 3
, 4
, 5
). Ezi zixhobo zilungele ukwenza ngokwezifiso iigutter zekholamu zegridi kuzo zonke iindawo zokuphumla.
I-syntax iphantse yafana nokungagqibekanga, izinto eziluncedo zomda, kodwa ngokongezwa n
kwangaphambi kobungakanani obuceliweyo. Nanku umzekelo weklasi ochaseneyo .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Nanku umzekelo wokwenza ngokusesikweni igridi yeBootstrap kwindawo ephakathi ( md
) yebreakpoint nangaphezulu. Siye sanyusa i- .col
padding kunye .px-md-5
kwaye saphinda sayichasa loo .mx-md-n5
nto ngomzali .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>