स्पेसिंग
बूटस्ट्रैप मे कोनों तत्व कें रूप कें संशोधित करय कें लेल आशुलिपि प्रतिक्रियाशील मार्जिन, पैडिंग, आ गैप उपयोगिता वर्गक कें एकटा विस्तृत श्रृंखला शामिल छै.
मार्जिन आ पैडिंग
आशुलिपि वर्गक कें साथ कोनों तत्व या ओकर पक्षक कें एकटा उपसमूह कें लेल प्रतिक्रियाशील-अनुकूल 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
एलटीआर मे,margin-right
याpadding-right
आरटीएल मेe
- (अंत) कक्षाक कें लेल जे सेट करय छैmargin-right
याpadding-right
एलटीआर मे,margin-left
याpadding-left
आरटीएल मेx
- कक्षाक लेल जे दुनू सेट करैत अछि*-left
आ*-right
y
- कक्षाक लेल जे दुनू सेट करैत अछि*-top
आ*-bottom
- blank - क्लास के लेल जे तत्व के सब 4 पक्ष पर एकटा
margin
या सेट करैत अछि |padding
जहाँ आकार एक अछि :
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
(आप Sass मैप चर मे प्रविष्टि जोड़ि कए आओर आकार जोड़ि सकैत छी .)
उदाहरण के लिये
एहि वर्गक किछु प्रतिनिधि उदाहरण प्रस्तुत अछि :
.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
सस नक्शा कें आधार पर छै.
<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
.
सस्स
नक्शे के
स्पेसिंग यूटिलिटीज कें सस मैप कें माध्यम सं घोषित कैल जायत छै आ ओकर बाद हमर यूटिलिटीज एपीआई सं जेनरेट कैल जायत छै.
$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);
उपयोगिता एपीआई
स्पेसिंग उपयोगिता हमर उपयोगिता एपीआई मे घोषित कएल गेल अछि scss/_utilities.scss
. उपयोगिता एपीआई क उपयोग करब सीखू।
"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
),