Spatiëring
Bootstrap bevat een breed scala aan steno-responsieve marge-, opvulling- en gap-hulpklassen om het uiterlijk van een element te wijzigen.
Marge en opvulling
Wijs responsieve-vriendelijke margin
of padding
waarden toe aan een element of een subset van zijn zijden met stenoklassen. Bevat ondersteuning voor afzonderlijke eigenschappen, alle eigenschappen en verticale en horizontale eigenschappen. Klassen zijn opgebouwd uit een standaard Sass-kaart, variërend van .25rem
tot 3rem
.
Gebruik je de CSS-rasterlay-outmodule? Overweeg het gebruik van het gap-hulpprogramma .
Notatie
Spatiëringshulpprogramma's die van toepassing zijn op alle breekpunten, van xs
tot xxl
, hebben geen breekpuntafkorting. Dit komt omdat die klassen vanaf min-width: 0
en hoger worden toegepast en dus niet gebonden zijn aan een mediaquery. De overige breekpunten bevatten echter wel een breekpuntafkorting.
De klassen worden benoemd met behulp van het formaat {property}{sides}-{size}
voor xs
en {property}{sides}-{breakpoint}-{size}
voor sm
, md
, lg
, xl
en xxl
.
Waar eigendom is een van:
m
- voor lessen die setmargin
p
- voor lessen die setpadding
Waar zijden een van is:
t
- voor klassen diemargin-top
ofpadding-top
b
- voor klassen diemargin-bottom
ofpadding-bottom
s
- (start) voor lessen die inmargin-left
ofpadding-left
in LTR,margin-right
ofpadding-right
in RTLe
- (einde) voor lessen die inmargin-right
ofpadding-right
in LTR,margin-left
ofpadding-left
in RTLx
- voor klassen die zowel*-left
and . instellen*-right
y
- voor klassen die zowel*-top
and . instellen*-bottom
- blanco - voor klassen die een
margin
ofpadding
op alle 4 zijden van het element plaatsen
Waar de maat een is van:
0
- voor klassen die demargin
of eliminerenpadding
door deze in te stellen op0
1
- (standaard) voor klassen die demargin
ofpadding
op$spacer * .25
2
- (standaard) voor klassen die demargin
ofpadding
op$spacer * .5
3
- (standaard) voor klassen die demargin
ofpadding
op$spacer
4
- (standaard) voor klassen die demargin
ofpadding
op$spacer * 1.5
5
- (standaard) voor klassen die demargin
ofpadding
op$spacer * 3
auto
- voor klassen die demargin
op automatisch zetten
(U kunt meer formaten toevoegen door items toe te voegen aan de $spacers
Sass-kaartvariabele.)
Voorbeelden
Hier zijn enkele representatieve voorbeelden van deze klassen:
.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;
}
Horizontale centrering
Daarnaast bevat Bootstrap ook een .mx-auto
klasse voor het horizontaal centreren van inhoud op blokniveau met een vaste breedte, dat wil zeggen inhoud met display: block
en een width
set, door de horizontale marges in te stellen op auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatieve marge
In CSS kunnen margin
eigenschappen negatieve waarden gebruiken ( padding
kan niet). Deze negatieve marges zijn standaard uitgeschakeld , maar kunnen in Sass worden ingeschakeld door in te stellen $enable-negative-margins: true
.
De syntaxis is bijna hetzelfde als de standaardhulpprogramma's voor positieve marge, maar met de toevoeging van n
vóór de gevraagde grootte. Hier is een voorbeeldklasse die het tegenovergestelde is van .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gat
Bij gebruik van display: grid
, kunt u gebruik maken van gap
hulpprogramma's op de bovenliggende rastercontainer. Dit kan besparen op het toevoegen van margehulpprogramma's aan individuele rasteritems (kinderen van een display: grid
container). Gap-hulpprogramma's reageren standaard en worden gegenereerd via onze hulpprogramma-API, op basis van de $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 omvat responsieve opties voor alle rasteronderbrekingspunten van Bootstrap, evenals zes formaten van de $spacers
kaart ( 0
– 5
). Er is geen .gap-auto
hulpprogramma-klasse omdat het in feite hetzelfde is als .gap-0
.
Sass
Kaarten
Spatiëringshulpprogramma's worden gedeclareerd via Sass-kaart en vervolgens gegenereerd met onze hulpprogramma's-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);
Hulpprogramma's-API
Spatiëringshulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss
. Leer hoe u de hulpprogramma's-API gebruikt.
"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
),