स्पेसिङ

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

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

उत्तरदायी-अनुकूल 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>

नकारात्मक मार्जिन

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>