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.

Miðjaður þáttur

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

Neikvæð framlegð

Í CSS geta margineignir notað neikvæð gildi ( paddingget ekki). Frá og með 4.2 höfum við bætt við tólum fyrir neikvæða framlegð fyrir hverja stærð sem er ekki núll og taldar upp hér að ofan (td , 1, 2, 3, 4) 5. Þessi tól eru tilvalin til að sérsníða rist súlurennur yfir brotpunkta.

Setningafræðin er næstum sú sama og sjálfgefna, jákvæð framlegðartól, en með því að bæta við á nundan umbeðinni stærð. Hér er dæmi um flokk sem er andstæða við .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Hér er dæmi um að sérsníða Bootstrap-netið við miðlungs ( md) brotpunkt og ofar. Við höfum aukið .colbólstrunin með .px-md-5og síðan brugðist við því með .mx-md-n5á foreldri .row.

Sérsniðin dálkfylling

<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>