अंतर
बूटस्ट्रैप में तत्व की उपस्थिति को संशोधित करने के लिए शॉर्टहैंड उत्तरदायी मार्जिन और पैडिंग उपयोगिता वर्गों की एक विस्तृत श्रृंखला शामिल है।
यह काम किस प्रकार करता है
शॉर्टहैंड कक्षाओं के साथ किसी तत्व या उसके पक्षों के सबसेट को उत्तरदायी-अनुकूल margin
या मान असाइन करें। padding
व्यक्तिगत गुणों, सभी गुणों और लंबवत और क्षैतिज गुणों के लिए समर्थन शामिल है। कक्षाएं एक डिफ़ॉल्ट Sass मानचित्र से .25rem
लेकर 3rem
.
नोटेशन
स्पेसिंग यूटिलिटीज जो सभी ब्रेकपॉइंट्स पर लागू होती हैं, से से xs
तक xl
, उनमें कोई ब्रेकपॉइंट संक्षेप नहीं है। ऐसा इसलिए है क्योंकि उन वर्गों को min-width: 0
ऊपर और ऊपर से लागू किया जाता है, और इस प्रकार मीडिया क्वेरी से बाध्य नहीं होते हैं। हालाँकि, शेष विराम बिंदुओं में एक विराम बिंदु संक्षिप्त नाम शामिल है।
वर्गों का नाम {property}{sides}-{size}
for xs
और {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, और फ़ॉर्मैट का उपयोग करके रखा गया है xl
।
जहां संपत्ति इनमें से एक है:
m
- सेट करने वाली कक्षाओं के लिएmargin
p
- सेट करने वाली कक्षाओं के लिएpadding
जहां पक्ष इनमें से एक है:
t
margin-top
- या सेट करने वाली कक्षाओं के लिएpadding-top
b
margin-bottom
- या सेट करने वाली कक्षाओं के लिएpadding-bottom
l
margin-left
- या सेट करने वाली कक्षाओं के लिएpadding-left
r
margin-right
- या सेट करने वाली कक्षाओं के लिएpadding-right
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;
}
.ml-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
नहीं कर सकते)। 4.2 से, हमने ऊपर सूचीबद्ध प्रत्येक गैर-शून्य पूर्णांक आकार के लिए नकारात्मक मार्जिन उपयोगिताओं को जोड़ा है (उदाहरण के लिए, 1
, 2
, 3
, 4
, 5
)। ये उपयोगिताओं ब्रेकप्वाइंट में ग्रिड कॉलम गटर को अनुकूलित करने के लिए आदर्श हैं।
सिंटैक्स लगभग डिफ़ॉल्ट, सकारात्मक मार्जिन उपयोगिताओं के समान है, लेकिन n
अनुरोधित आकार से पहले जोड़ने के साथ। यहां एक उदाहरण वर्ग है जो इसके विपरीत है .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
यहां बूटस्ट्रैप ग्रिड को माध्यम ( md
) ब्रेकप्वाइंट और ऊपर पर अनुकूलित करने का एक उदाहरण दिया गया है। हमने .col
पैडिंग के साथ बढ़ा दिया है और फिर उसके साथ पैरेंट पर .px-md-5
प्रतिकार किया है ।.mx-md-n5
.row
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>