स्पेसिङ

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

यस पृष्ठमा

मार्जिन र प्याडिङ

उत्तरदायी-अनुकूल 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-leftLTR मा, margin-rightवा padding-rightRTL मा कक्षाहरूको लागि (सुरु)
e- (अन्त) कक्षाहरूका लागि जुन सेट margin-rightवा padding-rightLTR मा, margin-leftवा padding-leftRTL मा
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;
}

.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कन्टेनरका बच्चाहरू) मा मार्जिन उपयोगिताहरू थप्नमा बचत गर्न सक्छ। $spacersGap उपयोगिताहरू पूर्वनिर्धारित रूपमा उत्तरदायी हुन्छन्, र Sass नक्सामा आधारित हाम्रो उपयोगिता API मार्फत उत्पन्न हुन्छन् ।

ग्रिड वस्तु १

ग्रिड वस्तु २

ग्रिड वस्तु ३

<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।

सास

नक्सा

स्पेसिङ उपयोगिताहरू Sass नक्सा मार्फत घोषणा गरिन्छ र त्यसपछि हाम्रो उपयोगिता API मार्फत उत्पन्न गरिन्छ।

$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);

उपयोगिता API

स्पेसिङ उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ 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
    ),