अंतर

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

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

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

<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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>