Isikhala
I-Bootstrap ihlanganisa ububanzi bemajini esabelayo e-shorthand, i-padding, namakilasi ensiza ye-gap ukuze kulungiswe ukubukeka kwento.
I-Margin kanye ne-padding
Nikeza okusabelayo okunobungane margin
noma padding
amanani kusici noma isethi engaphansi yezinhlangothi zayo ezinezigaba ezimfishane. Kufaka phakathi ukusekelwa kwezakhiwo ezingazodwana, zonke izakhiwo, kanye nezakhiwo eziqondile nezivundlile. Amakilasi akhiwe kusuka kumephu ye-Sass ezenzakalelayo ukusuka .25rem
ku- 3rem
.
Usebenzisa imojuli yesakhiwo seGridi ye-CSS? Cabangela ukusebenzisa insiza ye-gap .
Isaziso
Izinsiza zokuhlukanisa ezisebenza kuwo wonke ama-breakpoint, ukusuka xs
kuye ukuya ku- xxl
, azinaso isifinyezo se-breakpoint kuzo. Lokhu kungenxa yokuthi lawo makilasi asetshenziswa ukusuka min-width: 0
naphezulu, futhi ngaleyo ndlela awaboshiwe umbuzo wemidiya. Ama-breakpoint asele, nokho, afaka isifinyezo se-breakpoint.
Amakilasi aqanjwe kusetshenziswa ifomethi {property}{sides}-{size}
yokuthi xs
, , , , kanye .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Lapho impahla ingenye ye:
m
- amakilasi asethiwemargin
p
- amakilasi asethiwepadding
Lapho izinhlangothi zingenye yalezi:
t
- amakilasi abekamargin-top
nomapadding-top
b
- amakilasi abekamargin-bottom
nomapadding-bottom
s
- (qala) amakilasi asethayomargin-left
nomapadding-left
ku-LTR,margin-right
nomapadding-right
ku-RTLe
- (ekugcineni) kumakilasi asethayomargin-right
nomapadding-right
ku-LTR,margin-left
nomapadding-left
ku-RTLx
- amakilasi asetha kokubili*-left
futhi*-right
y
- amakilasi asetha kokubili*-top
futhi*-bottom
- blank - amakilasi asetha i-a
margin
nomapadding
kuzo zonke izinhlangothi ezi-4 zesici
Lapho usayizi ungomunye walokhu:
0
- amakilasi asusamargin
nomapadding
ngokuyibeka kuwo0
1
- (ngokuzenzakalelayo) kumakilasi asetha i-margin
nomapadding
ku$spacer * .25
2
- (ngokuzenzakalelayo) kumakilasi asetha i-margin
nomapadding
ku$spacer * .5
3
- (ngokuzenzakalelayo) kumakilasi asetha i-margin
nomapadding
ku$spacer
4
- (ngokuzenzakalelayo) kumakilasi asetha i-margin
nomapadding
ku$spacer * 1.5
5
- (ngokuzenzakalelayo) kumakilasi asetha i-margin
nomapadding
ku$spacer * 3
auto
- kumakilasi asetha okuthimargin
okuzenzakalelayo
(Ungangeza osayizi abengeziwe ngokungeza okufakiwe $spacers
kokuhluka kwemephu ye-Sass.)
Izibonelo
Nazi ezinye izibonelo ezimele lawa makilasi:
.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;
}
I-Horizontal centering
Ukwengeza, i-Bootstrap iphinde ihlanganise .mx-auto
nekilasi lokumisa phakathi nendawo okuqukethwe kwezinga lebhulokhi enobubanzi obungashintshi—okungukuthi, okuqukethwe okunayo display: block
kanye width
nesethi—ngokusetha amamajini avundlile ukuze auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Imajini enegethivu
Ku-CSS, margin
izakhiwo zingasebenzisa amanani angalungile ( padding
angeke). Lawa mamajini anegethivu akhutshazwa ngokuzenzakalela , kodwa anganikwa amandla ku-Sass ngokusetha $enable-negative-margins: true
.
I-syntax icishe ifane nokuzenzakalelayo, izinsiza zemajini ephozithivu, kodwa ngokwengezwa n
kwangaphambi kosayizi oceliwe. Nasi ikilasi lesibonelo eliphambene ne- .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Igebe
Uma usebenzisa i- display: grid
, ungasebenzisa gap
izinsiza esiqukathi segridi engumzali. Lokhu kungasindisa ekungezeni izinsiza zemajini ezintweni zegridi ngayinye (izingane display: grid
zesiqukathi). Izinsiza ze-Gap zisabela ngokuzenzakalelayo, futhi zenziwa ngezinsiza zethu ze-API, ngokusekelwe $spacers
kumephu 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>
Ukusekelwa kufaka phakathi izinketho zokusabela kuzo zonke izindawo zokunqamuka kwegridi ye-Bootstrap, kanye nosayizi abayisithupha abavela $spacers
kumephu ( 0
– 5
). Asikho .gap-auto
isigaba sosizo njengoba sifana ngokuphumelelayo ne- .gap-0
.
Sass
Amamephu
Izinsiza zokubeka isikhala zimenyezelwa ngemephu ye-Sass bese zenziwa ngezinsiza 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);
I-Utilities API
Izinsiza zokubeka isikhala zimenyezelwa kuzinsiza zethu ze-API ku- scss/_utilities.scss
. Funda indlela yokusebenzisa i-API yezinsiza.
"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
),