Spasi
Bootstrap ngawengku rupa-rupa margin responsif shorthand, padding, sarta kelas utiliti gap pikeun ngaropéa penampilan hiji unsur urang.
Margin jeung padding
Napelkeun responsif-friendly margin
atawa padding
nilai ka unsur atawa sawaréh sisi na kalawan kelas shorthand. Ngawengku pangrojong pikeun sipat individu, sadaya sipat, sareng sipat vertikal sareng horizontal. Kelas diwangun tina peta Sass standar mimitian ti .25rem
ka 3rem
.
Ngagunakeun modul perenah CSS Grid? Pertimbangkeun ngagunakeun utilitas gap .
Notasi
Spasi Utiliti nu lumaku pikeun sakabéh breakpoints, ti xs
ka xxl
, euweuh breakpoint singketan di dinya. Ieu kusabab kelas-kelas ieu diterapkeun ti min-width: 0
sareng ka luhur, sahingga henteu kaiket ku pamundut média. The breakpoints sésana, kumaha oge, kaasup hiji singketan breakpoint.
Kelas-kelas kasebut dingaranan nganggo format {property}{sides}-{size}
for xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
, jeung xxl
.
Dimana harta mangrupikeun salah sahiji:
m
- pikeun kelas nu diaturmargin
p
- pikeun kelas nu diaturpadding
Dimana sisi mangrupa salah sahiji:
t
- pikeun kelas nu diaturmargin-top
atawapadding-top
b
- pikeun kelas nu diaturmargin-bottom
atawapadding-bottom
s
- (mimitian) pikeun kelas anu disetélmargin-left
atanapipadding-left
di LTR,margin-right
atanapipadding-right
di RTLe
- (tungtung) pikeun kelas anu disetélmargin-right
atanapipadding-right
di LTR,margin-left
atanapipadding-left
di RTLx
- pikeun kelas nu diatur duanana*-left
jeung*-right
y
- pikeun kelas nu diatur duanana*-top
jeung*-bottom
- kosong - pikeun kelas anu nyetél
margin
atawapadding
dina sakabéh 4 sisi unsur
Dimana ukuranana mangrupikeun salah sahiji:
0
- pikeun kelas anu ngaleungitkeunmargin
atanapipadding
ku netepkeunana0
1
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * .25
2
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * .5
3
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer
4
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * 1.5
5
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * 3
auto
- pikeun kelas anu nyetélmargin
otomatis
(Anjeun tiasa nambihan langkung seueur ukuran ku nambihan éntri kana $spacers
variabel peta Sass.)
Contona
Ieu sababaraha conto perwakilan kelas ieu:
.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;
}
Puseur horisontal
Sajaba ti, Bootstrap ogé ngawengku hiji .mx-auto
kelas pikeun horisontal centering eusi tingkat blok-lebar dibereskeun-nyaéta, eusi nu boga display: block
jeung width
susunan-ku netepkeun margins horizontal ka auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin négatif
Dina CSS, margin
sipat bisa ngamangpaatkeun nilai négatip ( padding
teu bisa). Margin négatip ieu ditumpurkeun sacara standar , tapi tiasa diaktipkeun dina Sass ku setelan $enable-negative-margins: true
.
Sintaksisna ampir sami sareng standar, utilitas margin positif, tapi ditambah n
sateuacan ukuran anu dipénta. Ieu conto kelas anu sabalikna tina .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Nalika nganggo display: grid
, anjeun tiasa nganggo gap
utilitas dina wadah grid indungna. Ieu tiasa ngahemat kedah nambihan utilitas margin kana barang-barang grid individu (anak display: grid
wadah). Utiliti Gap responsif sacara standar, sareng dihasilkeun tina API utilitas kami, dumasar kana $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>
Rojongan ngawengku pilihan responsif pikeun sakabéh breakpoints grid Bootstrap, kitu ogé genep ukuran tina $spacers
peta ( 0
- 5
). Henteu aya .gap-auto
kelas utilitas sabab sacara efektif sami sareng .gap-0
.
Sass
Peta
Utiliti jarak dinyatakeun via peta Sass teras didamel nganggo API utilitas kami.
$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);
Utiliti API
Utiliti jarak dinyatakeun dina API utilitas kami di scss/_utilities.scss
. Diajar kumaha ngagunakeun Utiliti 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
),