Tarpai
„Bootstrap“ apima platų sutrumpinto atsako paraštės ir užpildymo naudingumo klasių asortimentą, kad pakeistų elemento išvaizdą.
Kaip tai veikia
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
.
Žymėjimas
Tarpų priemonės, taikomos visoms lūžio taškams nuo xs
iki xl
, 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
ir lg
.xl
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
l
- klasėms, kurios nustatomargin-left
arbapadding-left
r
- klasėms, kurios nustatomargin-right
arbapadding-right
x
- 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;
}
.ml-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). Nuo 4.2 pridėjome neigiamos paraštės komunalinių paslaugų prie kiekvieno pirmiau nurodyto sveikojo skaičiaus, kuris nėra nulinis (pvz., 1
, 2
, 3
, 4
, 5
). Šios komunalinės priemonės idealiai tinka tinklelio stulpelių latakams pritaikyti tarp lūžio taškų.
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;
}
Štai pavyzdys, kaip tinkinti „Bootstrap“ tinklelį vidutiniame ( md
) ir aukštesniame taške. .col
Padidinome paminkštinimus naudodami pagrindinį elementą, .px-md-5
o tada prieš .mx-md-n5
jį pašalinome .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>