स्पेसिंग करना

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

आशुलिपि वर्गें कन्नै इक तत्व जां उसदे पक्षें दे इक उप-समूह गी प्रतिक्रियाशील-अनुकूल 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
• blank - उनें वर्गें आस्तै जेह् ड़ियां इक marginजां paddingतत्व दे सारे 4 पास्सें पर सेट करदियां न

जित्थें आकार इक ऐ:

• 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(तुस सस्स मैप चर च प्रविश्टियां जोड़ियै होर आकार जोड़ सकदे ओ ।)

उदाहरण दे

इनें वर्गें दे किश प्रतिनिधि उदाहरण दित्ते गेदे न:

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