Nafasi
Bootstrap inajumuisha anuwai ya ukingo wa kuitikia kwa mkono mfupi, padding, na madarasa ya matumizi ya pengo ili kurekebisha mwonekano wa kipengele.
Pambizo na padding
Weka thamani zinazofaa kuitikia margin
au padding
thamani kwa kipengele au kikundi kidogo cha pande zake chenye madarasa ya mkato. Inajumuisha usaidizi wa sifa za kibinafsi, sifa zote, na sifa za wima na za mlalo. Madarasa hujengwa kutoka kwa ramani chaguo-msingi ya Sass kuanzia .25rem
hadi 3rem
.
Je, unatumia moduli ya mpangilio wa Gridi ya CSS? Fikiria kutumia matumizi ya pengo .
Nukuu
Huduma za kuweka nafasi zinazotumika kwa sehemu zote za kukatika, kuanzia xs
hadi xxl
, hazina muhtasari wa sehemu ya kukatika ndani yake. Hii ni kwa sababu madarasa hayo yanatumika kutoka min-width: 0
na juu, na kwa hivyo hayafungwi na hoja ya midia. Vizuizi vilivyosalia, hata hivyo, vinajumuisha muhtasari wa sehemu ya kuvunja.
Madarasa yanaitwa kwa kutumia umbizo {property}{sides}-{size}
la xs
na {property}{sides}-{breakpoint}-{size}
kwa sm
, md
, lg
, xl
, na xxl
.
Ambapo mali ni moja ya:
m
- kwa madarasa yaliyowekwamargin
p
- kwa madarasa yaliyowekwapadding
Ambapo pande ni moja ya:
t
- kwa madarasa yaliyowekwamargin-top
aupadding-top
b
- kwa madarasa yaliyowekwamargin-bottom
aupadding-bottom
s
- (anza) kwa madarasa yaliyowekwamargin-left
aupadding-left
katika LTR,margin-right
aupadding-right
katika RTLe
- (mwisho) kwa madarasa yaliyowekwamargin-right
aupadding-right
katika LTR,margin-left
aupadding-left
katika RTLx
- kwa madarasa ambayo yanaweka wote*-left
na*-right
y
- kwa madarasa ambayo yanaweka wote*-top
na*-bottom
- tupu - kwa madarasa ambayo yanaweka
margin
aupadding
pande zote 4 za kipengele
Ambapo saizi ni moja ya:
0
- kwa madarasa ambayo huondoamargin
aupadding
kwa kuiweka0
1
- (kwa chaguo-msingi) kwa madarasa ambayo yanawekamargin
aupadding
to$spacer * .25
2
- (kwa chaguo-msingi) kwa madarasa ambayo yanawekamargin
aupadding
to$spacer * .5
3
- (kwa chaguo-msingi) kwa madarasa ambayo yanawekamargin
aupadding
to$spacer
4
- (kwa chaguo-msingi) kwa madarasa ambayo yanawekamargin
aupadding
to$spacer * 1.5
5
- (kwa chaguo-msingi) kwa madarasa ambayo yanawekamargin
aupadding
to$spacer * 3
auto
- kwa madarasa ambayo yanawekamargin
kiotomatiki
(Unaweza kuongeza saizi zaidi kwa kuongeza maingizo kwenye utofauti wa $spacers
ramani ya Sass.)
Mifano
Hapa kuna mifano ya uwakilishi wa madarasa haya:
.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;
}
Kuweka katikati kwa usawa
Zaidi ya hayo, Bootstrap pia inajumuisha .mx-auto
darasa la kuweka mlalo maudhui ya kiwango cha kuzuia upana usiobadilika—yaani, maudhui ambayo yana display: block
na width
seti—kwa kuweka ukingo mlalo hadi auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ukingo hasi
Katika CSS, margin
sifa zinaweza kutumia maadili hasi ( padding
hayawezi). Pambizo hizi hasi huzimwa kwa chaguo-msingi , lakini zinaweza kuwashwa katika Sass kwa kuweka $enable-negative-margins: true
.
Sintaksia ni karibu sawa na huduma chaguo-msingi, chanya, lakini pamoja na nyongeza ya n
kabla ya saizi iliyoombwa. Hapa kuna darasa la mfano ambalo ni kinyume cha .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Pengo
Unapotumia display: grid
, unaweza kutumia gap
huduma kwenye kontena kuu la gridi ya taifa. Hii inaweza kuokoa kwa kulazimika kuongeza huduma za ukingo kwenye vipengee vya gridi ya mtu binafsi (watoto wa display: grid
kontena). Huduma za Pengo hujibu kwa chaguomsingi, na hutolewa kupitia huduma zetu API, kulingana na $spacers
ramani ya Sass.
<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>
Usaidizi unajumuisha chaguo jibu kwa sehemu zote za gridi ya Bootstrap, pamoja na saizi sita kutoka kwa $spacers
ramani ( 0
- 5
). Hakuna .gap-auto
darasa la matumizi kwani ni sawa na .gap-0
.
Sass
Ramani
Huduma za kuweka nafasi zinatangazwa kupitia ramani ya Sass na kisha kuzalishwa na API ya huduma zetu.
$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);
API ya Huduma
Huduma za kuweka nafasi zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss
. Jifunze jinsi ya kutumia API ya huduma.
"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
),