Spasiëring
Bootstrap bevat 'n wye reeks snelskrif-responsiewe marge-, opvulling en gapingsnutsklasse om 'n element se voorkoms te verander.
Marge en vulling
Ken responsvriendelike margin
of padding
waardes toe aan 'n element of 'n subset van sy kante met snelskrifklasse. Sluit ondersteuning vir individuele eiendomme, alle eiendomme en vertikale en horisontale eiendomme in. Klasse word gebou vanaf 'n verstek Sass-kaart wat wissel van .25rem
tot 3rem
.
Gebruik jy die CSS Grid-uitlegmodule? Oorweeg dit om die gapingsnutsding te gebruik .
Notasie
Spasiëringnutsprogramme wat op alle breekpunte van toepassing is, van xs
tot xxl
, het geen breekpunt-afkorting in nie. Dit is omdat daardie klasse van min-width: 0
en op toegepas word, en dus nie deur 'n medianavraag gebind word nie. Die oorblywende breekpunte bevat egter 'n breekpuntafkorting.
Die klasse word benoem deur gebruik te maak van die formaat {property}{sides}-{size}
vir xs
en {property}{sides}-{breakpoint}-{size}
vir sm
, md
, lg
, xl
, en xxl
.
Waar eiendom een van:
m
- vir klasse wat stelmargin
p
- vir klasse wat stelpadding
Waar sye een van is:
t
- vir klasse wat stelmargin-top
ofpadding-top
b
- vir klasse wat stelmargin-bottom
ofpadding-bottom
s
- (begin) vir klasse wat stelmargin-left
ofpadding-left
in LTR,margin-right
ofpadding-right
in RTLe
- (einde) vir klasse wat stelmargin-right
ofpadding-right
in LTR,margin-left
ofpadding-left
in RTLx
- vir klasse wat beide*-left
en stel*-right
y
- vir klasse wat beide*-top
en stel*-bottom
- leeg - vir klasse wat 'n
margin
ofpadding
aan al 4 kante van die element stel
Waar grootte een van is:
0
margin
- vir klasse wat die of uitskakelpadding
deur dit op te stel0
1
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * .25
2
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * .5
3
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer
4
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * 1.5
5
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * 3
auto
- vir klasse wat diemargin
op outomaties stel
(Jy kan meer groottes byvoeg deur inskrywings by die $spacers
Sass-kaartveranderlike by te voeg.)
Voorbeelde
Hier is 'n paar verteenwoordigende voorbeelde van hierdie klasse:
.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;
}
Horisontale sentrering
Boonop bevat Bootstrap ook 'n .mx-auto
klas vir die horisontale sentrering van vaste-wydte blokvlak-inhoud - dit wil sê inhoud wat ' display: block
n width
stel het - deur die horisontale kantlyne op te stel auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatiewe marge
In CSS kan margin
eiendomme negatiewe waardes gebruik ( padding
kan nie). Hierdie negatiewe marges is by verstek gedeaktiveer , maar kan in Sass geaktiveer word deur instelling $enable-negative-margins: true
.
Die sintaksis is amper dieselfde as die verstek, positiewe marge-hulpprogramme, maar met die byvoeging van n
voor die gevraagde grootte. Hier is 'n voorbeeldklas wat die teenoorgestelde is van .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gaping
Wanneer jy gebruik maak display: grid
, kan jy gebruik maak van gap
nutsprogramme op die ouerroosterhouer. Dit kan bespaar op die byvoeging van marge-hulpmiddels by individuele roosteritems (kinders van 'n display: grid
houer). Gap-nutsprogramme reageer by verstek en word gegenereer via ons nuts-API, gebaseer op die $spacers
Sass-kaart.
<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>
Ondersteuning sluit responsiewe opsies vir al Bootstrap se roosterafbreekpunte in, sowel as ses groottes vanaf die $spacers
kaart ( 0
– 5
). Daar is geen .gap-auto
nutsklas nie, want dit is effektief dieselfde as .gap-0
.
Sass
Kaarte
Spasiëringnutsprogramme word via Sass-kaart verklaar en dan gegenereer met ons hulpprogramme-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);
Utilities API
Spasiëring nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss
. Leer hoe om die utilities API te gebruik.
"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
),