अंतर दवरप

बूटस्ट्रॅपांत घटकाचें स्वरूप बदलपाखातीर आशुलिपी प्रतिसाद दिवपी मार्जिन, पॅडींग, आनी गॅप उपयुक्तताय वर्गांची विस्तृत श्रेणी आसपावीत केल्या.

ह्या पानाचेर

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

आशुलिपी वर्ग आशिल्ल्या घटकाक वा ताच्या बाजूच्या उपसमुहाक प्रतिसाद-अनुकूल marginवा मोलां नेमून दिवचीं. paddingवैयक्तीक गुणधर्म, सगळे गुणधर्म, आनी उबे आनी आडवे गुणधर्मांक आदार समाविष्ट करता. वर्ग मुलभूत Sass नकाशा पासून तयार केल्यात जो .25remते 3rem.

CSS ग्रिड मांडावळ मॉड्यूल वापरप? ताचे बदला गॅप उपयुक्तताय वापरपाचो विचार करात .

संकेतन

सगळ्या ब्रेकपॉइंटांक लागू जावपी स्पेसिंग उपयुक्तताय, ते पासून xs, xxlतातूंत ब्रेकपॉइंट संक्षेप ना. कारण ते वर्ग पासून min-width: 0आनी वयर लागू जातात, आनी अशे तरेन माध्यम क्वेरीन बंधनकारक नात. उरिल्ल्या ब्रेकपॉइंटांत मात ब्रेकपॉइंट संक्षेपाचो आस्पाव जाता.

, , , , आनी {property}{sides}-{size}खातीर xsआनी {property}{sides}-{breakpoint}-{size}खातीर स्वरूप वापरून वर्गांक नांव दितात .smmdlgxlxxl

जंय मालमत्ता एक आसता: १.

m- सेट करपी वर्गां खातीरmargin
p- सेट करपी वर्गां खातीरpadding

जंय बाजू एक आसता: १.

tmargin-top- वा सेट करपी वर्गांखातीरpadding-top
bmargin-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
blank - घटकाच्या सगळ्या 4 वटांनी एक marginवा सेट करपी वर्गांखातीरpadding

जंय आकार एक आसा:

0- marginवा paddingतें सेट करून काडून उडोवपी वर्गां खातीर0
1margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * .25
2margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * .5
3margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer
4margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * 1.5
5margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * 3
auto- marginto auto सेट करपी वर्गां खातीर

$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गॅप उपयुक्तताय पूर्वनिर्धारीतपणान प्रतिसाद दितात, आनी आमच्या उपयुक्तताय API वरवीं तयार करतात, $spacersSass नकाशाचेर आदारीत.

जाळी आयटम 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>

आदारांत Bootstrap च्या सगळ्या ग्रिड ब्रेकपॉइंटां खातीर प्रतिसाद दिवपी पर्याय आसपावीत आसात, तशेंच $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,
);

उपयुक्तताय एपीआय

अंतर उपयुक्तताय आमच्या उपयुक्तताय API मदीं 2019 वर्सा जाहीर केल्यात 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),