अंतर

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

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

लघुलेखन वर्गांसह घटक किंवा त्याच्या बाजूंच्या उपसंचासाठी प्रतिसाद-अनुकूल 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>