Mipata
Bootstrap imaphatikizapo mitundu ingapo yoyankha mwachidule, padding, ndi makalasi ogwiritsira ntchito gap kuti asinthe mawonekedwe a chinthu.
Margin ndi padding
Perekani zovomerezeka margin
kapena padding
zofunikira ku chinthu kapena kagawo kakang'ono ka mbali zake ndi makalasi achidule. Zimaphatikizapo chithandizo cha katundu aliyense payekha, katundu yense, ndi zowoneka ndi zopingasa. Maphunziro amapangidwa kuchokera pamapu okhazikika a Sass kuyambira .25rem
mpaka 3rem
.
Mukugwiritsa ntchito gawo la CSS Grid? Ganizirani kugwiritsa ntchito gap utility .
Kuzindikira
Zida zopangira masitayilo zomwe zimagwira ntchito kumadera onse, kuyambira xs
mpaka xxl
, zilibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0
ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.
Maphunzirowa amatchulidwa pogwiritsa ntchito mawonekedwe {property}{sides}-{size}
a xs
, , , , ndi .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Kumene katundu ndi imodzi mwa:
m
- kwa makalasi omwe akhazikitsidwamargin
p
- kwa makalasi omwe akhazikitsidwapadding
Kumene mbali ndi imodzi mwa:
t
- kwa makalasi omwe amakhazikitsamargin-top
kapenapadding-top
b
- kwa makalasi omwe amakhazikitsamargin-bottom
kapenapadding-bottom
s
- (yambani) pamakalasi omwe amakhalamargin-left
kapenapadding-left
mu LTR,margin-right
kapenapadding-right
mu RTLe
- (mapeto) pamakalasi omwe amakhalamargin-right
kapenapadding-right
mu LTR,margin-left
kapenapadding-left
mu RTLx
- kwa makalasi omwe amakhazikitsa onse*-left
ndi*-right
y
- kwa makalasi omwe amakhazikitsa onse*-top
ndi*-bottom
- opanda kanthu - m'makalasi omwe amayika mbali
margin
zonsepadding
zinayi za chinthucho
Kumene kukula ndi chimodzi mwa:
0
- m'makalasi omwe amachotsamargin
kapenapadding
kuyiyika0
1
- (mwachisawawa) pamakalasi omwe amakhazikitsamargin
kapenapadding
ku$spacer * .25
2
- (mwachisawawa) pamakalasi omwe amakhazikitsamargin
kapenapadding
ku$spacer * .5
3
- (mwachisawawa) pamakalasi omwe amakhazikitsamargin
kapenapadding
ku$spacer
4
- (mwachisawawa) pamakalasi omwe amakhazikitsamargin
kapenapadding
ku$spacer * 1.5
5
- (mwachisawawa) pamakalasi omwe amakhazikitsamargin
kapenapadding
ku$spacer * 3
auto
- pamakalasi omwe amakhazikitsamargin
auto
(Mutha kuwonjezera kukula kwake powonjezera zolemba $spacers
pamapu a Sass.)
Zitsanzo
Nazi zitsanzo zoimira makalasi awa:
.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;
}
Chopingasa pakati
Kuphatikiza apo, Bootstrap imaphatikizansopo .mx-auto
kalasi yokhazikika yopingasa mulingo wa block - ndiye kuti, zomwe zili display: block
ndi width
seti - pokhazikitsa malire opingasa mpaka auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Mtsinje wopanda pake
Mu CSS, margin
katundu amatha kugwiritsa ntchito zinthu zolakwika ( padding
sangathe). Mitsinje yolakwika iyi imayimitsidwa mwachisawawa , koma ikhoza kuyatsidwa mu Sass pokhazikitsa $enable-negative-margins: true
.
Mawuwo ali pafupifupi ofanana ndi osasinthika, abwino am'mphepete mwazinthu zofunikira, koma ndikuwonjezera n
kukula kwake komwe kusanachitike. Nayi kalasi yachitsanzo yomwe ili yosiyana ndi .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Kusiyana
Mukamagwiritsa ntchito display: grid
, mutha kugwiritsa gap
ntchito zida zomwe zili pachidebe cha grid ya makolo. Izi zitha kupulumutsa pakuwonjezera zida zam'mphepete kuzinthu zamtundu uliwonse (ana a display: grid
chidebe). Zida za Gap zimagwira ntchito mwachisawawa, ndipo zimapangidwa kudzera pazida zathu za API, kutengera $spacers
mapu a 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>
Thandizo limaphatikizapo njira zoyankhira pamagulu onse a Bootstrap a gridi, komanso masaizi asanu ndi limodzi $spacers
pamapu ( 0
- 5
). Palibe .gap-auto
gulu lothandizira chifukwa ndilofanana ndi .gap-0
.
Sass
Mapu
Zothandizira zapakati zimalengezedwa kudzera pamapu a Sass kenako zimapangidwa ndi zida zathu za 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
Zothandizira patali zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss
. Phunzirani momwe mungagwiritsire ntchito 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
),