Bil
Bootstrap inniheldur mikið úrval af skammstöfum sem bregðast við spássíu, fyllingu og bilabúnaðarflokkum til að breyta útliti þáttar.
Spássía og fylling
Ú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
.
Notarðu CSS Grid skipulagseininguna? Íhugaðu að nota gap tólið .
Nótaskrift
Bil tól sem eiga við um alla brotpunkta, frá xs
til xxl
, 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
, xl
, og xxl
.
Þ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
s
- (byrjun) fyrir flokka sem setjamargin-left
eðapadding-left
í LTR,margin-right
eðapadding-right
í RTLe
- (endir) fyrir flokka sem setjamargin-right
eðapadding-right
í LTR,margin-left
eðapadding-left
í RTLx
- 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;
}
.ms-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). Þessar neikvæðu spássíur eru sjálfgefnar óvirkar en hægt er að virkja þær í Sass með því að stilla $enable-negative-margins: true
.
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;
}
Gap
Þegar þú notar display: grid
geturðu nýtt þér gap
tól á foreldrisílátinu. Þetta getur sparað á að þurfa að bæta framlegðartólum við einstaka ristliði (börn í display: grid
ílát). Gap tól eru sjálfgefið móttækileg og eru framleidd með tólum API okkar, byggt á $spacers
Sass kortinu.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Stuðningur felur í sér móttækilega valkosti fyrir alla rist brotpunkta Bootstrap, auk sex stærða af $spacers
kortinu ( 0
– 5
). Það er enginn .gap-auto
nytjaflokkur þar sem hann er í raun það sama og .gap-0
.
Sass
Kort
Tilkynnt er um bilaforrit með Sass korti og síðan búið til með forritaskilum veitunnar okkar.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utilities API
Tilgreint er frá bili í forritaskilum tóla okkar í scss/_utilities.scss
. Lærðu hvernig á að nota utilities API.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),