Vahekaugus
Bootstrap sisaldab elemendi välimuse muutmiseks laias valikus kiirkirjas kasutatavaid veerisi, polsterdust ja lünka.
Veeris ja polster
Määrake kiirkirjaklassidega elemendile või selle külgede alamhulgale reageerimissõbralikkus margin
või väärtused. padding
Sisaldab üksikute atribuutide, kõigi atribuutide ning vertikaalsete ja horisontaalsete atribuutide tuge. Klassid on koostatud Sassi vaikekaardilt vahemikus .25rem
kuni 3rem
.
Kas kasutate CSS-ruudustiku paigutusmoodulit? Kaaluge vaheutiliidi kasutamist .
Märge
Kõigile murdepunktidele (alates xs
kuni xxl
) kehtivatel vaheutiliitidel pole murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0
ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.
Klassid on nimetatud vormingus {property}{sides}-{size}
, , , , xs
ja {property}{sides}-{breakpoint}-{size}
jaoks .sm
md
lg
xl
xxl
Kui vara on üks järgmistest:
m
- klasside jaoks, mis seavadmargin
p
- klasside jaoks, mis seavadpadding
Kus küljed on üks järgmistest:
t
- klassidele, mis seavadmargin-top
võipadding-top
b
- klassidele, mis seavadmargin-bottom
võipadding-bottom
s
- (start) klasside jaoks, mis on määratud LTR -is võimargin-left
RTL -ispadding-left
margin-right
padding-right
e
- (lõpp) klasside jaoks, mis on määratud LTR -is võimargin-right
RTL -ispadding-right
margin-left
padding-left
x
- klassidele, mis määravad nii*-left
ja*-right
y
- klassidele, mis määravad nii*-top
ja*-bottom
- tühi – klasside jaoks, mis määravad a
margin
võipadding
elemendi kõigile neljale küljele
Kui suurus on üks järgmistest:
0
- klassidele, mis kõrvaldavadmargin
võipadding
määrates selle0
1
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * .25
2
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * .5
3
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer
4
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * 1.5
5
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * 3
auto
- klassidele, mis määravadmargin
automaatseks
(Saate lisada rohkem suurusi, lisades kirjeid $spacers
Sassi kaardimuutujale.)
Näited
Siin on mõned tüüpilised näited nendest klassidest:
.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;
}
Horisontaalne tsentreerimine
Lisaks sisaldab Bootstrap ka .mx-auto
klassi fikseeritud laiusega plokitaseme sisu, st sisu, millel on display: block
ja width
komplekt, horisontaalseks tsentreerimiseks, määrates horisontaalsed veerised väärtusele auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatiivne marginaal
CSS-is võivad margin
atribuudid kasutada negatiivseid väärtusi ( padding
ei saa). Need negatiivsed veerised on vaikimisi keelatud , kuid neid saab Sassis lubada sätte abil $enable-negative-margins: true
.
Süntaks on peaaegu sama, mis vaikimisi positiivse veerise utiliidid, kuid lisatud on n
enne nõutud suurust. Siin on näide klassist, mis on vastupidine .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Lõhe
Kui kasutate display: grid
, saate kasutada gap
põhivõrgu konteineris olevaid utiliite. display: grid
See võib säästa üksikutele ruudustikuüksustele ( konteineri lapsed) marginaaliutiliitide lisamist . Gap utiliidid reageerivad vaikimisi ja genereeritakse meie utiliidide API kaudu $spacers
Sassi kaardi alusel.
<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>
Tugi sisaldab reageerivaid valikuid kõigi Bootstrapi ruudustiku katkestuspunktide jaoks, aga ka kuut suurust $spacers
kaardil ( 0
– 5
). .gap-auto
Kasulikkusklassi pole , kuna see on sisuliselt sama, mis .gap-0
.
Sass
Kaardid
Vaheutiliidid deklareeritakse Sassi kaardi kaudu ja genereeritakse seejärel meie utiliitide API-ga.
$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);
Utiliidide API
Tühikute utiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss
. Siit saate teada, kuidas utiliitide API-t kasutada.
"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
),