فاصلو

بوٽ اسٽريپ ۾ شارٽ هينڊ جوابي مارجن، پيڊنگ، ۽ گپ يوٽيلٽي ڪلاس جو هڪ وسيع سلسلو شامل آهي هڪ عنصر جي ظاهر کي تبديل ڪرڻ لاءِ.

هن صفحي تي

مارجن ۽ padding

شارٽ هينڊ ڪلاسن سان هڪ عنصر يا ان جي پاسن جي هڪ ذيلي سيٽ کي جوابي-دوستانه marginيا قدر ڏيو. paddingانفرادي ملڪيتن، سڀني ملڪيتن، ۽ عمودي ۽ افقي ملڪيتن جي حمايت شامل آھي. ڪلاس هڪ ڊفالٽ Sass نقشي مان ٺهيل آهن جن جي حد .25remتائين 3rem.

CSS گرڊ لي آئوٽ ماڊل استعمال ڪري رهيا آهيو؟ ان جي بدران گپ افاديت استعمال ڪرڻ تي غور ڪريو .

نوٽيفڪيشن

اسپيسنگ يوٽيلٽيز جيڪي سڀني بريڪ پوائنٽس تي لاڳو ٿين ٿيون، کان xsوٺي xxl، انهن ۾ بريڪ پوائنٽ جو مخفف نه آهي. اهو ئي سبب آهي ته اهي طبقا لاڳو ڪيا ويا آهن min-width: 0۽ مٿي کان، ۽ اهڙيء طرح ميڊيا جي سوال جي پابند نه آهن. باقي وقفي پوائنٽن ۾، جيتوڻيڪ، هڪ وقفي پوائنٽ مخفف شامل آهي.

طبقن کي فارميٽ استعمال ڪندي نالو ڏنو ويو آهي {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, and xxl.

جتي ملڪيت مان هڪ آهي:

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
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ڪنٽينر جا ٻار) ۾ شامل ڪرڻ تي. گپ يوٽيلٽيز ڊفالٽ طور تي جوابدار آهن، ۽ اسان جي يوٽيلٽيز API ذريعي ٺاهيا ويا آهن، $spacersساس نقشي جي بنياد تي.

گرڊ آئٽم 1

گرڊ آئٽم 2

گرڊ آئٽم 3

html

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

يوٽيلٽيز 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),