स्पेसिङ

बुटस्ट्र्यापले तत्वको उपस्थिति परिमार्जन गर्नको लागि शर्टह्यान्ड रिस्पोन्सिभ मार्जिन र प्याडिङ उपयोगिता वर्गहरूको विस्तृत दायरा समावेश गर्दछ।

यसले कसरी काम गर्छ

उत्तरदायी-अनुकूल 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खाली - ए वा paddingसबै 4 पक्षहरूमा सेट गर्ने कक्षाहरूका लागि

जहाँ आकार मध्ये एक हो:

• 0- मेटाउने marginवा paddingयसलाई सेट गरेर कक्षाहरूका लागि0
• 1margin- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूको paddingलागि$spacer * .25
• 2margin- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूको paddingलागि$spacer * .5
• 3margin- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूको paddingलागि$spacer
• 4margin- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूको paddingलागि$spacer * 1.5
• 5margin- (पूर्वनिर्धारित रूपमा) वा सेट गर्ने कक्षाहरूको 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>