Spazamentu
Bootstrap include una larga gamma di classi di utilità di margine di risposta di shorthand, padding è gap per mudificà l'aspettu di un elementu.
Margine è padding
Assignà responsive-friendly margin
o padding
valori à un elementu o un sottumessu di i so lati cù classi di stenografia. Include supportu per e proprietà individuali, tutte e proprietà, è e proprietà verticali è horizontali. E classi sò custruiti da una mappa Sass predeterminata chì varieghja da .25rem
à 3rem
.
Utilizà u modulu di layout CSS Grid? Cunsiderate aduprà l'utilità gap .
Notazione
L'utilità di spaziatura chì s'applicanu à tutti i punti d'interruzzione, da xs
à xxl
, ùn anu micca abbreviazione di punti d'interruzzione in elli. Questu hè perchè queste classi sò applicate da min-width: 0
è in su, è cusì ùn sò micca ligati da una media query. I punti di breakpoint restanti, però, includenu un'abbreviazione di breakpoint.
I classi sò chjamati cù u formatu {property}{sides}-{size}
per xs
è {property}{sides}-{breakpoint}-{size}
per sm
, md
, lg
, xl
è xxl
.
Induve a pruprietà hè unu di:
m
- per e classi chì stabiliscenumargin
p
- per e classi chì stabiliscenupadding
Induve i lati hè unu di:
t
- per e classi chì stabiliscenumargin-top
opadding-top
b
- per e classi chì stabiliscenumargin-bottom
opadding-bottom
s
- (iniziu) per e classi chì stabiliscenumargin-left
opadding-left
in LTR,margin-right
opadding-right
in RTLe
- (fine) per e classi chì si stabiliscenumargin-right
opadding-right
in LTR,margin-left
opadding-left
in RTLx
- per e classi chì stabiliscenu tramindui*-left
è*-right
y
- per e classi chì stabiliscenu tramindui*-top
è*-bottom
- blank - per classi chì ponenu a
margin
opadding
nantu à tutti i 4 lati di l'elementu
Induve a dimensione hè unu di:
0
- per e classi chì eliminanu umargin
opadding
da mette in0
1
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * .25
2
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * .5
3
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer
4
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * 1.5
5
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * 3
auto
- per e classi chì ponenu l'margin
auto
(Pudete aghjunghje più dimensioni aghjunghjendu entrate à a $spacers
variabile di mappa Sass.)
Esempii
Eccu alcuni esempi rapprisentanti di sti classi:
.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;
}
Centratura horizontale
Inoltre, Bootstrap include ancu una .mx-auto
classa per u centru horizontale di u cuntenutu di u nivellu di bloccu di larghezza fissa - vale à dì, cuntenutu chì hà display: block
è un width
set - mettendu i margini horizontali à auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margine negativu
In CSS, margin
proprietà ponu utilizà valori negativi ( padding
ùn pò micca). Questi margini negativi sò disattivati per difettu , ma ponu esse attivati in Sass parendu $enable-negative-margins: true
.
A sintassi hè guasi listessa cum'è l'utilità di margine pusitivu predeterminatu, ma cù l'aghjunzione di n
prima di a dimensione dumandata. Eccu un esempiu di classi chì hè u cuntrariu di .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Quandu si usa display: grid
, pudete aduprà gap
utilità nantu à u cuntainer di griglia parent. Questu pò salvà di avè da aghjunghje utilità di marghjini à l'articuli di griglia individuali (figlioli di un display: grid
cuntinuu). L'utilità Gap sò responsive per difettu, è sò generate via a nostra API d'utilità, basatu annantu à a $spacers
mappa 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>
U supportu include opzioni di risposta per tutti i punti di rottura di a griglia di Bootstrap, è ancu sei dimensioni da a $spacers
mappa ( 0
- 5
). Ùn ci hè micca .gap-auto
una classe di utilità postu chì hè effettivamente uguale à .gap-0
.
Sass
Maps
L'utilità di spaziazione sò dichjarate via Sass map è poi generate cù a nostra API d'utilità.
$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
L'utilità di spaziatura sò dichjarate in a nostra API d'utilità in scss/_utilities.scss
. Amparate cumu utilizà l'API utilities.
"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
),