अंतर

बूटस्ट्रॅपमध्ये घटकाचे स्वरूप सुधारण्यासाठी शॉर्टहँड रिस्पॉन्सिव्ह मार्जिन आणि पॅडिंग युटिलिटी क्लासेसची विस्तृत श्रेणी समाविष्ट आहे.

हे कसे कार्य करते

लघुलेखन वर्गांसह घटक किंवा त्याच्या बाजूंच्या उपसंचासाठी प्रतिसाद-अनुकूल marginकिंवा मूल्ये नियुक्त करा. paddingवैयक्तिक गुणधर्म, सर्व गुणधर्म आणि अनुलंब आणि क्षैतिज गुणधर्मांसाठी समर्थन समाविष्ट आहे. पासून वर्ग डीफॉल्ट Sass नकाशावरून तयार केले .25remजातात 3rem.

नोटेशन

सर्व ब्रेकपॉइंट्सवर लागू होणार्‍या स्पेसिंग युटिलिटीज, पासून xsते xl, त्यांच्यामध्ये कोणतेही ब्रेकपॉइंट संक्षेप नाही. याचे कारण असे की ते वर्ग वरून min-width: 0आणि वर लागू केले जातात आणि त्यामुळे मीडिया क्वेरीने बांधील नाहीत. तथापि, उर्वरित ब्रेकपॉइंट्समध्ये ब्रेकपॉइंट संक्षेप समाविष्ट आहे.

वर्गांची नावे , , , आणि {property}{sides}-{size}साठी फॉरमॅट वापरून दिली आहेत .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

जिथे मालमत्ता यापैकी एक आहे:

• 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रिक्त - घटकाच्या सर्व padding4 बाजूंना सेट करणार्‍या वर्गांसाठी

जेथे आकार एक आहे:

• 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
• automargin- ऑटो वर सेट करणार्‍या वर्गांसाठी

$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>