अंतर

मार्जिन और पैडिंग

शॉर्टहैंड कक्षाओं के साथ किसी तत्व या उसके पक्षों के सबसेट को उत्तरदायी-अनुकूल marginया मान असाइन करें। paddingव्यक्तिगत गुणों, सभी गुणों और लंबवत और क्षैतिज गुणों के लिए समर्थन शामिल है। कक्षाएं एक डिफ़ॉल्ट Sass मानचित्र से .25remलेकर 3rem.

CSS ग्रिड लेआउट मॉड्यूल का उपयोग करना? गैप उपयोगिता का उपयोग करने पर विचार करें ।

नोटेशन

स्पेसिंग यूटिलिटीज जो सभी ब्रेकपॉइंट्स पर लागू होती हैं, से से xsतक xxl, उनमें कोई ब्रेकपॉइंट संक्षेप नहीं है। ऐसा इसलिए है क्योंकि उन वर्गों को min-width: 0ऊपर और ऊपर से लागू किया जाता है, और इस प्रकार मीडिया क्वेरी से बाध्य नहीं होते हैं। हालाँकि, शेष विराम बिंदुओं में एक विराम बिंदु संक्षिप्त नाम शामिल है।

वर्गों का नाम {property}{sides}-{size}for xsऔर {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, और के प्रारूप का उपयोग करके रखा गया है xxl।

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

• m- सेट करने वाली कक्षाओं के लिएmargin
• p- सेट करने वाली कक्षाओं के लिएpadding

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

• tmargin-top- या सेट करने वाली कक्षाओं के लिएpadding-top
• bmargin-bottom- या सेट करने वाली कक्षाओं के लिएpadding-bottom
• s- (शुरू) उन कक्षाओं के लिए जो एलटीआर में margin-leftया आरटीएल में सेट हैंpadding-leftmargin-rightpadding-right
• e- (अंत) उन कक्षाओं के लिए जो सेट margin-rightया padding-rightएलटीआर में margin-leftया padding-leftआरटीएल में हैं
• 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;
}

.ms-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नहीं कर सकते)। ये नकारात्मक मार्जिन डिफ़ॉल्ट रूप से अक्षम होते हैं , लेकिन Sass में सेटिंग द्वारा सक्षम किए जा सकते हैं $enable-negative-margins: true।

सिंटैक्स लगभग डिफ़ॉल्ट, सकारात्मक मार्जिन उपयोगिताओं के समान है, लेकिन nअनुरोधित आकार से पहले जोड़ने के साथ। यहां एक उदाहरण वर्ग है जो इसके विपरीत है .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

अंतर

उपयोग करते समय , आप पैरेंट ग्रिड कंटेनर पर उपयोगिताओं display: gridका उपयोग कर सकते हैं । यह अलग-अलग ग्रिड आइटम ( कंटेनर gapके बच्चे) में मार्जिन उपयोगिताओं को जोड़ने पर बचा सकता है । गैप यूटिलिटीज डिफ़ॉल्ट रूप से रिस्पॉन्सिव होती हैं, और सैस मैप display: gridके आधार पर हमारी यूटिलिटीज एपीआई के जरिए जेनरेट होती हैं ।$spacers

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

समर्थन में बूटस्ट्रैप के सभी ग्रिड ब्रेकप्वाइंट के साथ-साथ $spacersमानचित्र से छह आकार ( 0- 5) के लिए उत्तरदायी विकल्प शामिल हैं। कोई .gap-autoउपयोगिता वर्ग नहीं है क्योंकि यह प्रभावी रूप से .gap-0.

सास

एमएपीएस

स्पेसिंग यूटिलिटीज को सैस मैप के जरिए घोषित किया जाता है और फिर हमारे यूटिलिटीज एपीआई के साथ जेनरेट किया जाता है।

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

यूटिलिटीज एपीआई

स्पेसिंग यूटिलिटीज को हमारी यूटिलिटीज एपीआई में scss/_utilities.scss. उपयोगिताओं API का उपयोग करना सीखें।

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),