अंतर
बूटस्ट्रैप में तत्व की उपस्थिति को संशोधित करने के लिए शॉर्टहैंड उत्तरदायी मार्जिन, पैडिंग और गैप उपयोगिता वर्गों की एक विस्तृत श्रृंखला शामिल है।
मार्जिन और पैडिंग
शॉर्टहैंड कक्षाओं के साथ किसी तत्व या उसके पक्षों के सबसेट को उत्तरदायी-अनुकूल margin
या मान असाइन करें। padding
व्यक्तिगत गुणों, सभी गुणों और लंबवत और क्षैतिज गुणों के लिए समर्थन शामिल है। कक्षाएं एक डिफ़ॉल्ट Sass मानचित्र से .25rem
लेकर 3rem
.
CSS ग्रिड लेआउट मॉड्यूल का उपयोग करना? गैप यूटिलिटी का उपयोग करने पर विचार करें ।
नोटेशन
स्पेसिंग यूटिलिटीज जो सभी ब्रेकपॉइंट्स पर लागू होती हैं, से से xs
तक xxl
, उनमें कोई ब्रेकपॉइंट संक्षेप नहीं है। ऐसा इसलिए है क्योंकि उन वर्गों को min-width: 0
ऊपर और ऊपर से लागू किया जाता है, और इस प्रकार मीडिया क्वेरी से बाध्य नहीं होते हैं। हालाँकि, शेष विराम बिंदुओं में एक विराम बिंदु संक्षिप्त नाम शामिल है।
वर्गों का नाम {property}{sides}-{size}
for xs
और {property}{sides}-{breakpoint}-{size}
for 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
- रिक्त - उन वर्गों के लिए जो तत्व के सभी 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 map वेरिएबल में प्रविष्टियां जोड़कर अधिक आकार जोड़ सकते हैं ।)
उदाहरण
इन वर्गों के कुछ प्रतिनिधि उदाहरण यहां दिए गए हैं:
.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
. उपयोगिताओं 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
),