Interspacigo
Bootstrap inkluzivas ampleksan gamon de stenografio respondema marĝeno, remburaĵo, kaj interspaco utileco klasoj por modifi elemento aspekto.
Rando kaj kompletigo
Asignu respondemajn amikajn margin
aŭ padding
valorojn al elemento aŭ subaro de ĝiaj flankoj kun stenografioklasoj. Inkluzivas subtenon por individuaj propraĵoj, ĉiuj propraĵoj, kaj vertikalaj kaj horizontalaj propraĵoj. Klasoj estas konstruitaj de defaŭlta Sass-mapo intervalanta de .25rem
ĝis 3rem
.
Ĉu vi uzas la CSS Grid-aranĝan modulon? Konsideru uzi la interspacan ilon .
Notacio
Interspacaj iloj kiuj validas por ĉiuj rompopunktoj, de xs
ĝis xxl
, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0
kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.
La klasoj estas nomitaj uzante la formaton {property}{sides}-{size}
por xs
kaj {property}{sides}-{breakpoint}-{size}
por sm
, md
, lg
, xl
, kaj xxl
.
Kie posedaĵo estas unu el:
m
- por klasoj kiuj starigismargin
p
- por klasoj kiuj starigispadding
Kie flankoj estas unu el:
t
- por klasoj kiuj starigasmargin-top
aŭpadding-top
b
- por klasoj kiuj starigasmargin-bottom
aŭpadding-bottom
s
- (komenco) por klasoj kiuj fiksasmargin-left
aŭpadding-left
en LTR,margin-right
aŭpadding-right
en RTLe
- (fino) por klasoj kiuj fiksasmargin-right
aŭpadding-right
en LTR,margin-left
aŭpadding-left
en RTLx
- por klasoj kiuj starigas ambaŭ*-left
kaj*-right
y
- por klasoj kiuj starigas ambaŭ*-top
kaj*-bottom
- malplena - por klasoj kiuj starigas a
margin
aŭpadding
sur ĉiuj 4 flankoj de la elemento
Kie grandeco estas unu el:
0
- por klasoj kiuj forigas lamargin
aŭpadding
agordante ĝin al0
1
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * .25
2
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * .5
3
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer
4
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * 1.5
5
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * 3
auto
- por klasoj kiuj agordas lamargin
al aŭtomata
(Vi povas aldoni pliajn grandecojn aldonante enskribojn al la $spacers
Sass-mapo-variablo.)
Ekzemploj
Jen kelkaj reprezentaj ekzemploj de ĉi tiuj klasoj:
.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;
}
Horizontala centrado
Aldone, Bootstrap ankaŭ inkluzivas .mx-auto
klason por horizontale centrado de fiks-larĝa bloknivela enhavo—tio estas, enhavo kiu havas display: block
kaj width
aron—agordante la horizontalajn randojn al auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativa marĝeno
En CSS, margin
propraĵoj povas utiligi negativajn valorojn ( padding
ne povas). Ĉi tiuj negativaj randoj estas malebligitaj defaŭlte , sed povas esti ebligitaj en Sass per agordo $enable-negative-margins: true
.
La sintakso estas preskaŭ la sama kiel la defaŭltaj, pozitivaj marĝenaj utilecoj, sed kun aldono de n
antaŭ la petita grandeco. Jen ekzempla klaso kiu estas la malo de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Kiam vi uzas display: grid
, vi povas uzi gap
ilojn sur la gepatra kradujo. Ĉi tio povas ŝpari devi aldoni marĝenservaĵojn al individuaj kradaj eroj (infanoj de display: grid
ujo). Gap-servaĵoj estas respondemaj defaŭlte, kaj estas generitaj per niaj iloj API, bazita sur la $spacers
Sass-mapo.
<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>
Subteno inkluzivas respondemajn eblojn por ĉiuj kradaj rompopunktoj de Bootstrap, kaj ankaŭ ses grandecoj de la $spacers
mapo ( 0
– 5
). Ne ekzistas .gap-auto
utilklaso ĉar ĝi estas efektive la sama kiel .gap-0
.
Sass
Mapoj
Interspacaj utilecoj estas deklaritaj per Sass-mapo kaj poste generitaj per niaj utilecoj 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);
Utilaĵoj API
Interspacaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss
. Lernu kiel uzi la utilecojn 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
),