स्पेसिंग

बूटस्ट्रैप मे कोनों तत्व कें रूप कें संशोधित करय कें लेल आशुलिपि प्रतिक्रियाशील मार्जिन, पैडिंग, आ गैप उपयोगिता वर्गक कें एकटा विस्तृत श्रृंखला शामिल छै.

इस पेज पर

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

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

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

संकेतन

स्पेसिंग उपयोगिता जे सब ब्रेकपॉइंट पर लागू होयत छै, सं 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 - क्लास के लेल जे तत्व के सब 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 मैप चर मे प्रविष्टि जोड़ि कए आओर आकार जोड़ि सकैत छी .)

उदाहरण के लिये

एहि वर्गक किछु प्रतिनिधि उदाहरण प्रस्तुत अछि :

.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सस नक्शा कें आधार पर छै.

ग्रिड आइटम 1

ग्रिड मद 2

ग्रिड मद 3

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