Source

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ą marginarba reikšmes naudodami stenografijos klases. paddingApima atskirų savybių, visų savybių ir vertikalių bei horizontalių savybių palaikymą. Klasės sukurtos pagal numatytąjį Sass žemėlapį nuo .25remiki 3rem.

Žymėjimas

Tarpų priemonės, taikomos visoms lūžio taškams nuo xsiki xl, neturi lūžio taško santrumpos. Taip yra todėl, kad šios klasės taikomos nuo min-width: 0pradž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, mdir 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 nustato margin-toparbapadding-top
b- klasėms, kurios nustato margin-bottomarbapadding-bottom
l- klasėms, kurios nustato margin-leftarbapadding-left
r- klasėms, kurios nustato margin-rightarbapadding-right
x- klasėms, kurios nustato ir *-leftir*-right
y- klasėms, kurios nustato ir *-topir*-bottom
tuščia – klasėms, kurios nustato a marginarba paddingvisose 4 elemento pusėse

Kai dydis yra vienas iš:

0- klasėms, kurios pašalina marginarba paddingnustatydami jį į0
1- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * .25
2- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * .5
3- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer
4- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * 1.5
5- (pagal numatytuosius nustatymus) klasėms, kurios nustato marginarba paddingį$spacer * 3
auto- klasėms, kuriose nustatytas marginautomatinis

(Galite pridėti daugiau dydžių, įtraukdami įrašus į $spacersSass ž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-autoklasę, skirtą horizontaliai centruoti fiksuoto pločio bloko lygio turinį, ty turinį, kuris turi display: blockir widthrinkinį, nustatant horizontalias paraštes į auto.

Centruotas elementas

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Neigiama marža

CSS marginypatybėse gali būti naudojamos neigiamos reikšmės ( paddingnegalima). 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 nprieš 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) pertraukos taške ir aukščiau. .colPadidinome paminkštinimus naudodami pagrindinį elementą, .px-md-5o tada prieš .mx-md-n5jį pašalinome .row.

Pasirinktinis stulpelio užpildymas

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>