Izithuba
I-Bootstrap ibandakanya uluhlu olubanzi lomda ophendulayo omfutshane, i-padding, kunye neeklasi eziluncedo ze-gap ukulungisa inkangeleko yento.
Umda kunye ne-padding
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
.
Usebenzisa imodyuli yoyilo lwegridi yeCSS? Cinga ukusebenzisa i-gap eluncedo .
Ukuphawula
Izithuba zemisebenzi ezisebenza kuzo zonke iindawo zokuqhawula, ukusuka xs
ukuya ukuya xxl
, 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
, xl
, kunye xxl
.
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
s
- (qala) kwiiklasi ezisetayomargin-left
okanyepadding-left
kwi-LTR,margin-right
okanyepadding-right
kwi-RTLe
- (isiphelo) kwiiklasi ezisetayomargin-right
okanyepadding-right
kwi-LTR,margin-left
okanyepadding-left
kwi-RTLx
- 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;
}
.ms-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). Le mida ingalunganga ivaliwe ngokungagqibekanga , kodwa inokwenziwa kwi Sass ngokucwangcisa $enable-negative-margins: true
.
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;
}
Umsantsa
Xa usebenzisa display: grid
, unokusebenzisa gap
izinto eziluncedo kwisikhongozeli segridi yomzali. Oku kunokonga ekongezeni izixhobo zomda kwizinto zegridi nganye (abantwana display: grid
besikhongozeli). I-Gap utility iphendula ngokungagqibekanga, kwaye iveliswa ngokusebenzisa izixhobo zethu ze-API, ngokusekelwe $spacers
kwimephu ye-Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Inkxaso ibandakanya iinketho zokuphendula kuzo zonke iindawo zokuqhawula igridi yeBootstrap, kunye nobukhulu obuthandathu ukusuka $spacers
kwimephu ( 0
– 5
). Akukho .gap-auto
klasi yoncedo njengoko iyafana ngokusebenzayo ne .gap-0
.
Sass
Iimephu
Izithuba zemisebenzi zibhengezwa ngemephu ye-Sass kwaye ziveliswe ngezinto zethu ze-API.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utilities API
Izithuba zemisebenzi zibhengezwe kwizinto eziluncedo zethu kwi-API kwi scss/_utilities.scss
. Funda indlela yokusebenzisa izinto eziluncedo API.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),