Jarak
Bootstrap kalebu macem-macem kelas margin responsif singkatan, padding, lan gap kanggo ngowahi tampilan unsur.
Margin lan padding
Nemtokake nilai-nilai responsif margin
utawa padding
nilai kanggo unsur utawa subset saka sisih karo kelas shorthand. Kalebu dhukungan kanggo properti individu, kabeh properti, lan properti vertikal lan horisontal. Kelas dibangun saka peta Sass standar wiwit saka .25rem
nganti 3rem
.
Nggunakake modul tata letak Grid CSS? Coba gunakake sarana gap .
Notasi
Utilitas spasi sing ditrapake kanggo kabeh breakpoints, saka xs
nganti xxl
, ora ana singkatan breakpoint. Iki amarga kelas kasebut diterapake saka min-width: 0
lan munggah, lan kanthi mangkono ora kaiket karo pitakon media. Nanging, breakpoints sing isih ana, kalebu singkatan breakpoint.
Kelas kasebut dijenengi nggunakake format {property}{sides}-{size}
kanggo xs
lan {property}{sides}-{breakpoint}-{size}
kanggo sm
, md
, lg
, xl
, lan xxl
.
Ing endi properti minangka salah sawijining:
m
- kanggo kelas sing nyetelmargin
p
- kanggo kelas sing nyetelpadding
Ing ngendi sisih iku salah siji saka:
t
- kanggo kelas sing nyetelmargin-top
utawapadding-top
b
- kanggo kelas sing nyetelmargin-bottom
utawapadding-bottom
s
- (wiwitan) kanggo kelas sing nyetelmargin-left
utawapadding-left
ing LTR,margin-right
utawapadding-right
ing RTLe
- (mburi) kanggo kelas sing nyetelmargin-right
utawapadding-right
ing LTR,margin-left
utawapadding-left
ing RTLx
- kanggo kelas sing nyetel loro*-left
lan*-right
y
- kanggo kelas sing nyetel loro*-top
lan*-bottom
- blank - kanggo kelas sing nyetel
margin
utawapadding
ing kabeh 4 sisih unsur
Ngendi ukuran salah siji saka:
0
- kanggo kelas sing ngilangimargin
utawapadding
kanthi nyetel menyang0
1
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * .25
2
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * .5
3
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer
4
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * 1.5
5
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * 3
auto
- kanggo kelas sing nyetelmargin
otomatis
(Sampeyan bisa nambah ukuran liyane kanthi nambahake entri menyang $spacers
variabel peta Sass.)
Tuladha
Ing ngisor iki sawetara conto perwakilan saka kelas kasebut:
.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;
}
Pusat horisontal
Kajaba iku, Bootstrap uga kalebu .mx-auto
kelas kanggo horisontal centering isi tingkat pamblokiran jembaré tetep-yaiku, isi sing wis display: block
lan width
set-kanthi nyetel wates horisontal kanggo auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin negatif
Ing CSS, margin
properti bisa nggunakake nilai negatif ( padding
ora bisa). Margin negatif iki dipateni kanthi gawan , nanging bisa diaktifake ing Sass kanthi nyetel $enable-negative-margins: true
.
Sintaks meh padha karo standar, utilitas margin positif, nanging kanthi tambahan n
sadurunge ukuran sing dijaluk. Iki minangka conto kelas sing kosok balene .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
gap
Nalika nggunakake display: grid
, sampeyan bisa nggunakake gap
utilitas ing wadhah kothak induk. Iki bisa ngirit yen kudu nambah utilitas margin menyang item kothak individu (anak saka display: grid
wadhah). Utilitas Gap responsif kanthi standar, lan digawe liwat API utilitas, adhedhasar $spacers
peta 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>
Dhukungan kalebu opsi responsif kanggo kabeh breakpoints kothak Bootstrap, uga enem ukuran saka $spacers
peta ( 0
- 5
). Ora ana .gap-auto
kelas utilitas amarga efektif padha karo .gap-0
.
Sass
Peta
Utilitas jarak diumumake liwat peta Sass banjur digawe nganggo API keperluan kita.
$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
Utilitas jarak diumumake ing API keperluan kita ing scss/_utilities.scss
. Sinau carane nggunakake API keperluan.
"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
),