अंतर

बूटस्ट्रैप में तत्व की उपस्थिति को संशोधित करने के लिए शॉर्टहैंड उत्तरदायी मार्जिन और पैडिंग उपयोगिता वर्गों की एक विस्तृत श्रृंखला शामिल है।

यह काम किस प्रकार करता है

शॉर्टहैंड कक्षाओं के साथ किसी तत्व या उसके पक्षों के सबसेट को उत्तरदायी-अनुकूल 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

जहां पक्ष इनमें से एक है:

• tmargin-top- या सेट करने वाली कक्षाओं के लिएpadding-top
• bmargin-bottom- या सेट करने वाली कक्षाओं के लिएpadding-bottom
• lmargin-left- या सेट करने वाली कक्षाओं के लिएpadding-left
• rmargin-right- या सेट करने वाली कक्षाओं के लिएpadding-right
• x- उन वर्गों के लिए जो *-leftऔर . दोनों को सेट करते हैं*-right
• y- उन वर्गों के लिए जो *-topऔर . दोनों को सेट करते हैं*-bottom
• रिक्त - उन वर्गों के लिए जो तत्व के सभी 4 पक्षों पर marginया सेट करते हैंpadding

जहां आकार इनमें से एक है:

• 0- उन वर्गों के लिए जो इसे समाप्त करते हैं marginया paddingइसे सेट करते हैं0
• 1- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो marginया paddingto . सेट करते हैं$spacer * .25
• 2- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो marginया paddingto . सेट करते हैं$spacer * .5
• 3- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो marginया paddingto . सेट करते हैं$spacer
• 4- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो marginया paddingto . सेट करते हैं$spacer * 1.5
• 5- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो marginया paddingto . सेट करते हैं$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और एक सेट है ।widthauto

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>