Kaʻawale
Loaʻa i ka Bootstrap kahi ākea ākea o ka palena pane pōkole, padding, a me nā papa pono gap e hoʻololi i ke ʻano o kahi mea.
ʻO ka palena a me ka pale
E hāʻawi i ka pane-aloha a i margin
ʻole padding
nā waiwai i kahi mea a i ʻole kahi ʻāpana o kona mau ʻaoʻao me nā papa pōkole. Loaʻa i ke kākoʻo no kēlā me kēia waiwai, nā waiwai a pau, a me nā waiwai kū a me ka pae. Kūkulu ʻia nā papa mai kahi palapala Sass paʻamau mai .25rem
ka 3rem
.
Ke hoʻohana nei i ka module CSS Grid layout? E noʻonoʻo e hoʻohana i ka pono gap .
Notation
ʻO nā pono hana hoʻokaʻawale e pili ana i nā wahi haʻihaʻi a pau, mai xs
ka xxl
, ʻaʻohe wahi pōkole i loko o ia mau mea. No ka mea ua hoʻohana ʻia kēlā mau papa mai min-width: 0
a i luna, a no laila ʻaʻole i hoʻopaʻa ʻia e kahi nīnau media. ʻO nā wahi haʻi i koe naʻe, loaʻa i kahi pōkole breakpoint.
Ua kapa ʻia nā papa me ke ʻano {property}{sides}-{size}
no xs
a {property}{sides}-{breakpoint}-{size}
no sm
, md
, lg
, xl
, a me xxl
.
ʻO kahi waiwai kekahi o:
m
- no nā papa i hoʻonohonohomargin
p
- no nā papa i hoʻonohonohopadding
ʻO kahi ʻaoʻao kekahi o:
t
- no nā papa i hoʻonohonoho a imargin-top
ʻolepadding-top
b
- no nā papa i hoʻonohonoho a imargin-bottom
ʻolepadding-bottom
s
- (hoʻomaka) no nā papa i hoʻonohonoho a imargin-left
ʻolepadding-left
ma LTR, a imargin-right
ʻolepadding-right
ma RTLe
- (hopena) no nā papa i hoʻonohonoho a imargin-right
ʻolepadding-right
ma LTR, a imargin-left
ʻolepadding-left
ma RTLx
- no nā papa i hoʻonohonoho ʻelua*-left
a*-right
y
- no nā papa i hoʻonohonoho ʻelua*-top
a*-bottom
- blank - no nā papa e hoʻonoho i kahi a i
margin
ʻolepadding
ma nā ʻaoʻao 4 āpau o ka mea
Aia ka nui o kekahi o:
0
- no nā papa e hoʻopau i ka a imargin
ʻolepadding
ma ka hoʻonohonoho ʻana iā ia0
1
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * .25
2
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * .5
3
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer
4
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * 1.5
5
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * 3
auto
- no nā papa i hoʻonohonoho i kamargin
auto
(Hiki iā ʻoe ke hoʻohui i nā nui hou aku ma ka hoʻohui ʻana i nā mea hoʻokomo i ka $spacers
loli palapala Sass.)
Nā laʻana
Eia kekahi mau hiʻohiʻona o kēia mau papa:
.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;
}
Ke kikowaena hoʻopololei
Eia hou, ua komo pū ʻo Bootstrap i kahi .mx-auto
papa no ka hoʻonohonoho ʻana i ka maʻiʻo pae ākea paʻa paʻa-ʻo ia hoʻi, ka maʻiʻo i loaʻa display: block
a me kahi width
hoʻonohonoho—ma ka hoʻonohonoho ʻana i nā palena ākea i auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
palena ʻino
Ma CSS, margin
hiki i nā waiwai ke hoʻohana i nā waiwai maikaʻi ʻole ( padding
ʻaʻole hiki). Hoʻopau ʻia kēia mau palena maikaʻi ʻole e ka paʻamau , akā hiki ke hoʻohana ʻia ma Sass ma ka hoʻonohonoho ʻana $enable-negative-margins: true
.
Aneane like ka syntax me ka mea paʻamau, nā pono palena maikaʻi, akā me ka hoʻohui ʻana n
ma mua o ka nui i noi ʻia. Eia kekahi laʻana papa ʻokoʻa o .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
I ka hoʻohana display: grid
ʻana iā , hiki iā ʻoe ke hoʻohana i nā gap
pono hana ma ka pahu pahu makua. Hiki i kēia ke mālama i ka hoʻohui ʻana i nā pono hana margin i nā mea kikoʻī pākahi (keiki o kahi display: grid
pahu). Hoʻopili ʻia nā pono hana Gap ma o ka paʻamau, a ua hana ʻia ma o kā mākou API ponoʻī, e pili ana i ka $spacers
palapala 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>
Loaʻa i ke kākoʻo nā koho pane no nā wahi haʻihaʻi āpau o Bootstrap, a me nā nui ʻeono mai ka $spacers
palapala ʻāina ( 0
– 5
). ʻAʻohe .gap-auto
papa hoʻohana e like me ka maikaʻi like me .gap-0
.
Sass
Palapala 'āina
Hōʻike ʻia nā pono hoʻokaʻawale ma o ka palapala ʻāina ʻo Sass a laila hana ʻia me kā mākou mau pono 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);
API no nā pono hana
Hōʻike ʻia nā pono hoʻokaʻawale i kā mākou API ponoʻī ma scss/_utilities.scss
. E aʻo pehea e hoʻohana ai i nā pono 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
),