स्पेसिंग के बा

मार्जिन आ पैडिंग के बारे में बतावल गइल बा

आशुलिपि वर्ग के साथ कौनों तत्व भा एकरे साइड सभ के सबसेट के रिस्पांसिव-फ्रेंडली marginभा मान असाइन करीं। paddingअलग-अलग गुण, सभ गुण, आ ऊर्ध्वाधर आ क्षैतिज गुण सभ खातिर समर्थन शामिल बा। क्लास सभ के निर्माण डिफ़ॉल्ट सास मैप से कइल जाला जे से ले .25remके 3rem.

सीएसएस ग्रिड लेआउट मॉड्यूल के इस्तेमाल कइल जा रहल बा? गैप यूटिलिटी के इस्तेमाल करे पर विचार करीं .

संकेतन के बारे में बतावल गइल बा

स्पेसिंग यूटिलिटी सभ जे सभ ब्रेकपॉइंट सभ पर लागू होखे लीं, से xsले के xxl, इनहन में कौनों ब्रेकपॉइंट संक्षिप्त नाँव ना होला। एकर कारण ई बा कि ऊ क्लास सभ से min-width: 0ऊपर से लागू होलें, आ एह तरीका से मीडिया क्वेरी से बान्हल ना जालें। हालाँकि, बाकी ब्रेकपॉइंट सभ में ब्रेकपॉइंट संक्षिप्त रूप जरूर सामिल बा।

कक्षा सभ के नाँव , , , , आ {property}{sides}-{size}खातिर xsआ {property}{sides}-{breakpoint}-{size}खातिर प्रारूप के इस्तेमाल से कइल जाला ।smmdlgxlxxl

जहाँ संपत्ति में से एगो बा:

• m- सेट करे वाली कक्षा खातिरmargin
• p- सेट करे वाली कक्षा खातिरpadding

जहाँ पक्ष में से एगो बा:

• t- कक्षा खातिर जवन सेट करेला margin-topयाpadding-top
• b- कक्षा खातिर जवन सेट करेला margin-bottomयाpadding-bottom
• s- (शुरुआत) ओह कक्षा सभ खातिर जे सेट ��रे margin-leftलीं या padding-leftएलटीआर में, margin-rightया padding-rightआरटीएल में
• e- (अंत) ओह कक्षा खातिर जवन सेट करेला margin-rightया padding-rightएलटीआर में, margin-leftया padding-leftआरटीएल में
• x- दुनों के सेट करे वाली कक्षा खातिर *-leftआ*-right
• y- दुनों के सेट करे वाली कक्षा खातिर *-topआ*-bottom
• खाली - अइसन क्लास सभ खातिर जे तत्व के सभ 4 साइड पर एगो marginया सेट करे लींpadding

जहाँ आकार में से एगो बा:

• 0margin- अइसन कक्षा सभ खातिर जे या 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( सस मैप चर में प्रविष्टि जोड़ के रउआँ अउरी साइज जोड़ सकत बानी ।)

उदाहरण खातिर दिहल गइल बा

इहाँ एह वर्ग सभ के कुछ प्रतिनिधि उदाहरण दिहल गइल बा:

.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आ एगो widthसेट-क्षैतिज मार्जिन सभ के सेट क के auto।

<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. उपयोगिता एपीआई के इस्तेमाल करे के तरीका जानें।

    "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
    ),