अंतर
बूटस्ट्रॅपमध्ये घटकाचे स्वरूप सुधारण्यासाठी शॉर्टहँड रिस्पॉन्सिव्ह मार्जिन आणि पॅडिंग युटिलिटी क्लासेसची विस्तृत श्रेणी समाविष्ट आहे.
हे कसे कार्य करते
लघुलेखन वर्गांसह घटक किंवा त्याच्या बाजूंच्या उपसंचासाठी प्रतिसाद-अनुकूल margin
किंवा मूल्ये नियुक्त करा. padding
वैयक्तिक गुणधर्म, सर्व गुणधर्म आणि अनुलंब आणि क्षैतिज गुणधर्मांसाठी समर्थन समाविष्ट आहे. पासून वर्ग डीफॉल्ट Sass नकाशावरून तयार केले .25rem
जातात 3rem
.
नोटेशन
सर्व ब्रेकपॉइंट्सवर लागू होणार्या स्पेसिंग युटिलिटीज, पासून xs
ते xl
, त्यांच्यामध्ये कोणतेही ब्रेकपॉइंट संक्षेप नाही. याचे कारण असे की ते वर्ग वरून min-width: 0
आणि वर लागू केले जातात आणि त्यामुळे मीडिया क्वेरीने बांधील नाहीत. तथापि, उर्वरित ब्रेकपॉइंट्समध्ये ब्रेकपॉइंट संक्षेप समाविष्ट आहे.
वर्गांची नावे , , , आणि {property}{sides}-{size}
साठी फॉरमॅट वापरून दिली आहेत .xs
{property}{sides}-{breakpoint}-{size}
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
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;
}
.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>