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>