स्पेसिङ
बुटस्ट्र्यापले तत्वको उपस्थिति परिमार्जन गर्नको लागि शर्टह्यान्ड रिस्पोन्सिभ मार्जिन, प्याडिङ, र ग्याप युटिलिटी क्लासहरू समावेश गर्दछ।
मार्जिन र प्याडिङ
उत्तरदायी-अनुकूल margin
वा padding
मानहरू एक तत्व वा यसको छेउहरूको उपसमूहलाई शर्टह्यान्ड कक्षाहरू प्रदान गर्नुहोस्। व्यक्तिगत गुणहरू, सबै गुणहरू, र ठाडो र तेर्सो गुणहरूको लागि समर्थन समावेश गर्दछ। कक्षाहरू एक पूर्वनिर्धारित Sass नक्सा बाट .25rem
बाट बनाइन्छ 3rem
।
CSS ग्रिड लेआउट मोड्युल प्रयोग गर्दै हुनुहुन्छ? ग्याप उपयोगिता प्रयोग गर्ने बारे विचार गर्नुहोस् ।
नोटेशन
सबै ब्रेकपोइन्टहरूमा लागू हुने स्पेसिङ युटिलिटीहरू, देखि xs
, xxl
तिनीहरूमा कुनै ब्रेकपोइन्ट संक्षिप्त नाम छैन। यो किनभने ती कक्षाहरू बाट min-width: 0
र माथि लागू हुन्छन्, र यसैले मिडिया क्वेरीद्वारा बाध्य हुँदैनन्। बाँकी ब्रेकपोइन्टहरू, तथापि, ब्रेकपोइन्ट संक्षिप्त नाम समावेश गर्दछ।
, , , , र को लागि {property}{sides}-{size}
ढाँचा प्रयोग गरेर कक्षाहरू नामकरण गरिन्छ ।xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
जहाँ सम्पत्ति मध्ये एक हो:
m
- सेट गरिएको कक्षाहरूको लागिmargin
p
- सेट गरिएको कक्षाहरूको लागिpadding
जहाँ पक्षहरू मध्ये एक हो:
t
- सेट गर्ने कक्षाहरूको लागिmargin-top
वाpadding-top
b
- सेट गर्ने कक्षाहरूको लागिmargin-bottom
वाpadding-bottom
s
- सेटmargin-left
वाpadding-left
LTR मा,margin-right
वाpadding-right
RTL मा कक्षाहरूको लागि (सुरु)e
- (अन्त) कक्षाहरूका लागि जुन सेटmargin-right
वाpadding-right
LTR मा,margin-left
वाpadding-left
RTL माx
*-left
- दुवै र सेट गर्ने कक्षाहरूको लागि*-right
y
*-top
- दुवै र सेट गर्ने कक्षाहरूको लागि*-bottom
margin
खाली - ए वाpadding
सबै 4 पक्षहरूमा सेट गर्ने कक्षाहरूका लागि
जहाँ आकार मध्ये एक हो:
0
- मेटाउनेmargin
वाpadding
यसलाई सेट गरेर कक्षाहरूका लागि0
1
margin
- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूकोpadding
लागि$spacer * .25
2
margin
- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूकोpadding
लागि$spacer * .5
3
margin
- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूकोpadding
लागि$spacer
4
margin
- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूकोpadding
लागि$spacer * 1.5
5
margin
- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूकोpadding
लागि$spacer * 3
auto
margin
- स्वतः सेट गर्ने कक्षाहरूको लागि
$spacers
(तपाईं सास नक्सा चरमा प्रविष्टिहरू थपेर थप आकारहरू थप्न सक्नुहुन्छ ।)
उदाहरणहरू
यहाँ यी वर्गहरूको केही प्रतिनिधि उदाहरणहरू छन्:
.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;
}
तेर्सो केन्द्रीकरण
थप रूपमा, बुटस्ट्र्यापले .mx-auto
निश्चित-चौडाइ ब्लक स्तर सामग्रीलाई तेर्सो रूपमा केन्द्रित गर्ने कक्षा पनि समावेश गर्दछ—अर्थात, सामग्री भएको display: block
र width
सेट-मा तेर्सो मार्जिनहरू सेट गरेर auto
।
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
नकारात्मक मार्जिन
CSS मा, margin
गुणहरूले नकारात्मक मानहरू प्रयोग गर्न padding
सक्छन् (सकिँदैन)। यी नकारात्मक मार्जिनहरू पूर्वनिर्धारित रूपमा असक्षम हुन्छन् , तर सेटिङद्वारा Sass मा सक्षम गर्न सकिन्छ $enable-negative-margins: true
।
सिन्ट्याक्स लगभग पूर्वनिर्धारित, सकारात्मक मार्जिन उपयोगिताहरू जस्तै हो, तर n
अनुरोध गरिएको आकार अघिको थपको साथ। यहाँ एउटा उदाहरण वर्ग हो जुन यसको विपरीत हो .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ग्याप
प्रयोग गर्दा display: grid
, तपाईंले gap
अभिभावक ग्रिड कन्टेनरमा उपयोगिताहरू प्रयोग गर्न सक्नुहुन्छ। यसले व्यक्तिगत ग्रिड वस्तुहरू (एक display: grid
कन्टेनरका बच्चाहरू) मा मार्जिन उपयोगिताहरू थप्नमा बचत गर्न सक्छ। $spacers
Gap उपयोगिताहरू पूर्वनिर्धारित रूपमा उत्तरदायी हुन्छन्, र Sass नक्सामा आधारित हाम्रो उपयोगिता API मार्फत उत्पन्न हुन्छन् ।
<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>
समर्थनमा सबै बुटस्ट्र्यापको ग्रिड ब्रेकपोइन्टहरूका लागि उत्तरदायी विकल्पहरू, साथै $spacers
नक्सा ( 0
- 5
) बाट छ आकारहरू समावेश छन्। त्यहाँ कुनै .gap-auto
उपयोगिता वर्ग छैन किनकि यो प्रभावकारी रूपमा उस्तै छ .gap-0
।
सास
नक्सा
स्पेसिङ उपयोगिताहरू Sass नक्सा मार्फत घोषणा गरिन्छ र त्यसपछि हाम्रो उपयोगिता 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);
उपयोगिता API
स्पेसिङ उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ scss/_utilities.scss
। उपयोगिता 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
),