Bil

Bootstrap inniheldur mikið úrval af skammstöfum sem bregðast við spássíu og bólstrun gagnsemi flokkum til að breyta útliti þáttar.

Hvernig það virkar

Úthlutaðu viðbragðsvænum gildum margineða paddinggildum til þáttar eða undirmengi hliðar hans með stuttmyndaflokkum. Inniheldur stuðning fyrir einstakar eignir, allar eignir og lóðrétta og lárétta eiginleika. Flokkar eru byggðir úr sjálfgefnu Sass korti, allt frá .25remtil 3rem.

Nótaskrift

Bil tól sem eiga við um alla brotpunkta, frá xstil xl, hafa enga brotpunkta skammstöfun í þeim. Þetta er vegna þess að þessir flokkar eru notaðir frá min-width: 0og upp og eru því ekki bundnir af fjölmiðlafyrirspurn. Hinir brotpunktarnir innihalda hins vegar brotpunkta skammstöfun.

Flokkarnir eru nefndir með sniðinu {property}{sides}-{size}fyrir xsog {property}{sides}-{breakpoint}-{size}fyrir sm, md, lg, og xl.

Þar sem eign er ein af:

• m- fyrir flokka sem setjamargin
• p- fyrir flokka sem setjapadding

Þar sem hliðar eru ein af:

• t- fyrir flokka sem setja margin-topeðapadding-top
• b- fyrir flokka sem setja margin-bottomeðapadding-bottom
• l- fyrir flokka sem setja margin-lefteðapadding-left
• r- fyrir flokka sem setja margin-righteðapadding-right
• x- fyrir flokka sem setja bæði *-leftog*-right
• y- fyrir flokka sem setja bæði *-topog*-bottom
• auður - fyrir flokka sem setja a margineða paddingá allar 4 hliðar frumefnisins

Þar sem stærð er ein af:

• 0- fyrir flokka sem útrýma margineða paddingmeð því að stilla það á0
• 1- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * .25
• 2- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * .5
• 3- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer
• 4- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * 1.5
• 5- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * 3
• auto- fyrir flokka sem stilla á marginsjálfvirkt

(Þú getur bætt við fleiri stærðum með því að bæta færslum við $spacersSass kortabreytuna.)

Dæmi

Hér eru nokkur dæmigerð dæmi um þessa flokka:

.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;
}

Lárétt miðja

Að auki inniheldur Bootstrap einnig .mx-autoflokk til að miðja efni með fastri breidd blokkarstigs lárétt – það er efni sem hefur display: blockog widthsett – með því að stilla láréttu spássíuna á auto.

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