Atstarpes
Bootstrap ietver plašu saīsināto atsauces piemales, polsterējuma un atstarpes lietderības klašu klāstu, lai mainītu elementa izskatu.
Piemale un polsterējums
Piešķiriet elementam vai tā malu apakškopai atsaucīgas vērtības margin
vai vērtības, izmantojot stenogrāfijas klases. padding
Ietver atsevišķu rekvizītu, visu rekvizītu, kā arī vertikālo un horizontālo rekvizītu atbalstu. Klases ir veidotas no noklusējuma Sass kartes diapazonā no .25rem
līdz 3rem
.
Vai izmantojat CSS Grid izkārtojuma moduli? Apsveriet iespēju izmantot utilītu starpība .
Apzīmējums
Atstarpju utilītas, kas attiecas uz visiem pārtraukuma punktiem no xs
līdz xxl
, nesatur pārtraukuma punkta saīsinājumu. Tas ir tāpēc, ka šīs klases tiek lietotas no min-width: 0
un uz augšu, un tādējādi tās nav saistītas ar multivides vaicājumu. Tomēr atlikušajos pārtraukuma punktos ir ietverts pārtraukuma punkta saīsinājums.
Klases tiek nosauktas, izmantojot formātu {property}{sides}-{size}
, xs
, {property}{sides}-{breakpoint}-{size}
, sm
, un .md
lg
xl
xxl
Ja īpašums ir viens no:
m
- klasēm, kas komplektāmargin
p
- klasēm, kas komplektāpadding
Kur malas ir viena no:
t
- klasēm, kas nosakamargin-top
vaipadding-top
b
- klasēm, kas nosakamargin-bottom
vaipadding-bottom
s
- (sākums) klasēm, kas iestatītasmargin-left
vaipadding-left
LTR,margin-right
vaipadding-right
RTLe
- (beigas) klasēm, kas iestatītasmargin-right
vaipadding-right
LTR,margin-left
vaipadding-left
RTLx
- klasēm, kas nosaka gan*-left
un*-right
y
- klasēm, kas nosaka gan*-top
un*-bottom
- tukšs - klasēm, kas nosaka a
margin
vaipadding
uz visām 4 elementa pusēm
Ja izmērs ir viens no:
0
- klasēm, kas novēršmargin
vaipadding
iestatot to uz0
1
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * .25
2
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * .5
3
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer
4
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * 1.5
5
- (pēc noklusējuma) klasēm, kas iestatamargin
vaipadding
uz$spacer * 3
auto
- klasēm, kas iestatamargin
uz automātisko
(Varat pievienot citus izmērus, pievienojot ierakstus $spacers
Sass kartes mainīgajam.)
Piemēri
Šeit ir daži reprezentatīvi šo klašu piemēri:
.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;
}
Horizontālā centrēšana
Turklāt Bootstrap ietver arī .mx-auto
klasi fiksēta platuma bloka līmeņa satura horizontālai centrēšanai, tas ir, saturam, kuram ir display: block
un width
kopa, iestatot horizontālās piemales uz auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatīvā starpība
CSS margin
rekvizītos var izmantot negatīvas vērtības ( padding
nevar). Šīs negatīvās piemales pēc noklusējuma ir atspējotas , taču tās var iespējot programmā Sass, iestatot $enable-negative-margins: true
.
Sintakse ir gandrīz tāda pati kā noklusējuma pozitīvās piemales utilītas, taču ir pievienots n
pirms pieprasītā lieluma. Šeit ir klases piemērs, kas ir pretējs .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Plaisa
Izmantojot display: grid
, varat izmantot gap
utilītprogrammas vecākrežģa konteinerā. display: grid
Tas var ietaupīt, jo atsevišķiem režģa elementiem ( konteinera bērniem) jāpievieno rezerves utilītas . Gap utilītas pēc noklusējuma ir atsaucīgas, un tās tiek ģenerētas, izmantojot mūsu utilītu API, pamatojoties uz $spacers
Sass karti.
<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>
Atbalsts ietver atsaucīgas opcijas visiem Bootstrap režģa pārtraukuma punktiem, kā arī sešus izmērus no $spacers
kartes ( 0
– 5
). Nav .gap-auto
lietderības klases, jo tā faktiski ir tāda pati kā .gap-0
.
Sass
Kartes
Atstarpes utilītas tiek deklarētas, izmantojot Sass karti, un pēc tam ģenerētas, izmantojot mūsu utilītu API.
$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
Atstarpju utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss
. Uzziniet, kā izmantot utilītu 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
),