अंतर

बूटस्ट्रॅपमध्ये घटकाचे स्वरूप सुधारण्यासाठी शॉर्टहँड रिस्पॉन्सिव्ह मार्जिन, पॅडिंग आणि गॅप युटिलिटी क्लासेसची विस्तृत श्रेणी समाविष्ट असते.

या पृष्ठावर

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

लघुलेखन वर्गांसह घटक किंवा त्याच्या बाजूंच्या उपसंचासाठी प्रतिसाद-अनुकूल 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रिक्त - घटकाच्या सर्व padding4 बाजूंना सेट करणार्‍या वर्गांसाठी

जेथे आकार एक आहे:

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
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गॅप युटिलिटिज डीफॉल्टनुसार रिस्पॉन्सिव्ह असतात आणि $spacersSass मॅपवर आधारित आमच्या युटिलिटी API द्वारे व्युत्पन्न केल्या जातात.

ग्रिड आयटम 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.

सस

नकाशे

स्पेसिंग युटिलिटीज 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
    ),