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 margin
eða padding
gildum 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á .25rem
til 3rem
.
Nótaskrift
Bil tól sem eiga við um alla brotpunkta, frá xs
til xl
, hafa enga brotpunkta skammstöfun í þeim. Þetta er vegna þess að þessir flokkar eru notaðir frá min-width: 0
og 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 xs
og {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 setjamargin-top
eðapadding-top
b
- fyrir flokka sem setjamargin-bottom
eðapadding-bottom
l
- fyrir flokka sem setjamargin-left
eðapadding-left
r
- fyrir flokka sem setjamargin-right
eðapadding-right
x
- fyrir flokka sem setja bæði*-left
og*-right
y
- fyrir flokka sem setja bæði*-top
og*-bottom
- auður - fyrir flokka sem setja a
margin
eðapadding
á allar 4 hliðar frumefnisins
Þar sem stærð er ein af:
0
- fyrir flokka sem útrýmamargin
eðapadding
með því að stilla það á0
1
- (sjálfgefið) fyrir flokka sem stillamargin
eðapadding
á$spacer * .25
2
- (sjálfgefið) fyrir flokka sem stillamargin
eðapadding
á$spacer * .5
3
- (sjálfgefið) fyrir flokka sem stillamargin
eðapadding
á$spacer
4
- (sjálfgefið) fyrir flokka sem stillamargin
eðapadding
á$spacer * 1.5
5
- (sjálfgefið) fyrir flokka sem stillamargin
eðapadding
á$spacer * 3
auto
- fyrir flokka sem stilla ámargin
sjálfvirkt
(Þú getur bætt við fleiri stærðum með því að bæta færslum við $spacers
Sass 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-auto
flokk til að miðja efni með fastri breidd blokkarstigs lárétt – það er efni sem hefur display: block
og width
sett – með því að stilla láréttu spássíuna á auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Neikvæð framlegð
Í CSS geta margin
eignir notað neikvæð gildi ( padding
get 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ð á n
undan 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ð .col
bólstrunin með .px-md-5
og síðan brugðist við því með .mx-md-n5
á foreldri .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>