Jarak
Bootstrap mencakup berbagai margin responsif singkatan, padding, dan kelas utilitas celah untuk memodifikasi tampilan elemen.
Margin dan bantalan
Tetapkan nilai margin
atau ramah-responsif padding
ke elemen atau subset sisinya dengan kelas singkatan. Termasuk dukungan untuk properti individu, semua properti, dan properti vertikal dan horizontal. Kelas dibangun dari peta Sass default mulai .25rem
dari 3rem
.
Menggunakan modul tata letak Grid CSS? Pertimbangkan untuk menggunakan utilitas celah .
Notasi
Utilitas spasi yang berlaku untuk semua breakpoint, dari xs
sampai xxl
, tidak memiliki singkatan breakpoint di dalamnya. Ini karena kelas tersebut diterapkan dari min-width: 0
dan ke atas, dan dengan demikian tidak terikat oleh kueri media. Breakpoints yang tersisa, bagaimanapun, termasuk singkatan breakpoint.
Kelas diberi nama menggunakan format {property}{sides}-{size}
untuk xs
dan {property}{sides}-{breakpoint}-{size}
untuk sm
, md
, lg
, xl
, dan xxl
.
Dimana properti adalah salah satu dari:
m
- untuk kelas yang ditetapkanmargin
p
- untuk kelas yang ditetapkanpadding
Dimana sisi adalah salah satu dari:
t
- untuk kelas yang mengaturmargin-top
ataupadding-top
b
- untuk kelas yang mengaturmargin-bottom
ataupadding-bottom
s
- (mulai) untuk kelas yang disetelmargin-left
ataupadding-left
di LTR,margin-right
ataupadding-right
di RTLe
- (akhir) untuk kelas yang ditetapkanmargin-right
ataupadding-right
di LTR,margin-left
ataupadding-left
di RTLx
- untuk kelas yang mengatur keduanya*-left
dan*-right
y
- untuk kelas yang mengatur keduanya*-top
dan*-bottom
- kosong - untuk kelas yang menetapkan a
margin
ataupadding
di keempat sisi elemen
Dimana ukuran adalah salah satu dari:
0
- untuk kelas yang menghilangkanmargin
ataupadding
dengan menyetelnya ke0
1
- (secara default) untuk kelas yang menyetelmargin
ataupadding
ke$spacer * .25
2
- (secara default) untuk kelas yang menyetelmargin
ataupadding
ke$spacer * .5
3
- (secara default) untuk kelas yang menyetelmargin
ataupadding
ke$spacer
4
- (secara default) untuk kelas yang menyetelmargin
ataupadding
ke$spacer * 1.5
5
- (secara default) untuk kelas yang menyetelmargin
ataupadding
ke$spacer * 3
auto
- untuk kelas yang menyetelmargin
ke otomatis
(Anda dapat menambahkan lebih banyak ukuran dengan menambahkan entri ke $spacers
variabel peta Sass.)
Contoh
Berikut adalah beberapa contoh representatif dari kelas-kelas ini:
.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;
}
Pemusatan horizontal
Selain itu, Bootstrap juga menyertakan .mx-auto
kelas untuk konten level blok lebar tetap yang terpusat secara horizontal—yaitu, konten yang memiliki display: block
dan satu width
set—dengan menyetel margin horizontal ke auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin negatif
Di CSS, margin
properti dapat memanfaatkan nilai negatif ( padding
tidak bisa). Margin negatif ini dinonaktifkan secara default , tetapi dapat diaktifkan di Sass dengan pengaturan $enable-negative-margins: true
.
Sintaksnya hampir sama dengan utilitas margin positif default, tetapi dengan penambahan n
sebelum ukuran yang diminta. Berikut adalah contoh kelas yang kebalikan dari .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Celah
Saat menggunakan display: grid
, Anda dapat menggunakan gap
utilitas pada wadah grid induk. Ini dapat menghemat keharusan menambahkan utilitas margin ke item kisi individual (anak-anak dari sebuah display: grid
wadah). Utilitas celah responsif secara default, dan dihasilkan melalui API utilitas kami, berdasarkan $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>
Dukungan mencakup opsi responsif untuk semua breakpoint grid Bootstrap, serta enam ukuran dari $spacers
peta ( 0
– 5
). Tidak ada .gap-auto
kelas utilitas karena secara efektif sama dengan .gap-0
.
Kelancangan
Peta
Utilitas spasi dideklarasikan melalui peta Sass dan kemudian dibuat dengan 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);
API Utilitas
Utilitas spasi dideklarasikan di API utilitas kami di scss/_utilities.scss
. Pelajari cara menggunakan API utilitas.
"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
),