Tarpai
„Bootstrap“ apima platų sutrumpinto atsako paraštės, užpildymo ir tarpo naudingumo klasių asortimentą, kad pakeistų elemento išvaizdą.
Paraštė ir užpildymas
Priskirkite elementui ar jo kraštinių poaibiui jautrumą margin
arba reikšmes naudodami stenografijos klases. padding
Apima atskirų savybių, visų savybių ir vertikalių bei horizontalių savybių palaikymą. Klasės sukurtos pagal numatytąjį Sass žemėlapį nuo .25rem
iki 3rem
.
Naudojate CSS tinklelio išdėstymo modulį? Apsvarstykite galimybę naudoti tarpų įrankį .
Žymėjimas
Tarpų priemonės, taikomos visoms lūžio taškams nuo xs
iki xxl
, neturi lūžio taško santrumpos. Taip yra todėl, kad šios klasės taikomos nuo min-width: 0
pradžios iki galo ir todėl nėra susietos su medijos užklausa. Tačiau likusiuose lūžio taškuose yra lūžio taško santrumpa.
Klasės pavadintos naudojant formatą {property}{sides}-{size}
ir xs
, {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
ir xl
.xxl
Kai nuosavybė yra viena iš:
m
- klasėms, kurios nustatomosmargin
p
- klasėms, kurios nustatomospadding
Kurios pusės yra viena iš:
t
- klasėms, kurios nustatomargin-top
arbapadding-top
b
- klasėms, kurios nustatomargin-bottom
arbapadding-bottom
s
- (pradžia) klasėms, kurios nustatomosmargin-left
arbapadding-left
LTR,margin-right
arbapadding-right
RTLe
- (pabaiga) klasėms, kurios nustatomosmargin-right
arbapadding-right
LTR,margin-left
arbapadding-left
RTLx
- klasėms, kurios nustato ir*-left
ir*-right
y
- klasėms, kurios nustato ir*-top
ir*-bottom
- tuščia – klasėms, kurios nustato a
margin
arbapadding
visose 4 elemento pusėse
Kai dydis yra vienas iš:
0
- klasėms, kurios pašalinamargin
arbapadding
nustatydami jį į0
1
- (pagal numatytuosius nustatymus) klasėms, kurios nustatomargin
arbapadding
į$spacer * .25
2
- (pagal numatytuosius nustatymus) klasėms, kurios nustatomargin
arbapadding
į$spacer * .5
3
- (pagal numatytuosius nustatymus) klasėms, kurios nustatomargin
arbapadding
į$spacer
4
- (pagal numatytuosius nustatymus) klasėms, kurios nustatomargin
arbapadding
į$spacer * 1.5
5
- (pagal numatytuosius nustatymus) klasėms, kurios nustatomargin
arbapadding
į$spacer * 3
auto
- klasėms, kuriose nustatytasmargin
automatinis
(Galite pridėti daugiau dydžių, įtraukdami įrašus į $spacers
Sass žemėlapio kintamąjį.)
Pavyzdžiai
Štai keletas tipiškų šių klasių pavyzdžių:
.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;
}
Horizontalus centravimas
Be to, „Bootstrap“ taip pat apima .mx-auto
klasę, skirtą horizontaliai centruoti fiksuoto pločio bloko lygio turinį, ty turinį, kuris turi display: block
ir width
rinkinį, nustatant horizontalias paraštes į auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Neigiama marža
CSS margin
ypatybėse gali būti naudojamos neigiamos reikšmės ( padding
negalima). Šios neigiamos paraštės yra išjungtos pagal numatytuosius nustatymus , bet jas galima įjungti Sass nustačius $enable-negative-margins: true
.
Sintaksė yra beveik tokia pati kaip numatytosios teigiamos maržos komunalinės programos, tačiau pridėta n
prieš reikalaujamą dydį. Štai pavyzdinė klasė, kuri yra priešinga .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Tarpas
Kai naudojate display: grid
, galite naudoti gap
pagrindinio tinklelio konteinerio komunalines paslaugas. Taip galima sutaupyti nuo atskirų tinklelio elementų ( display: grid
konteinerio antrinių) pridėti maržos paslaugų. Pagal numatytuosius nustatymus „Gp“ paslaugos yra reaguojančios ir generuojamos naudojant mūsų paslaugų API, remiantis „ $spacers
Sass“ žemėlapiu.
<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>
Palaikymas apima visų „Bootstrap“ tinklelio lūžio taškų jautrias parinktis, taip pat šešis $spacers
žemėlapio dydžius ( 0
– 5
). Nėra .gap-auto
naudingumo klasės, nes ji iš esmės yra tokia pati kaip .gap-0
.
Sass
Žemėlapiai
Tarpų komunalinės paslaugos deklaruojamos naudojant Sass žemėlapį ir sugeneruojamos naudojant mūsų paslaugų 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
Tarpų tarpinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss
. Sužinokite, kaip naudoti paslaugų 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
),