فاصلو

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

اهو ڪيئن ڪم ڪري ٿو

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

نوٽيفڪيشن

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

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

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

m- ڪلاسن لاءِ جيڪي مقرر ڪيا وياmargin
p- ڪلاسن لاءِ جيڪي مقرر ڪيا وياpadding

جتي پاسن مان هڪ آهي:

t- طبقن لاءِ جيڪي سيٽ margin-topياpadding-top
b- طبقن لاءِ جيڪي سيٽ margin-bottomياpadding-bottom
l- طبقن لاءِ جيڪي سيٽ margin-leftياpadding-left
r- طبقن لاءِ جيڪي سيٽ margin-rightياpadding-right
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;
}

.ml-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نه ٿي سگھي). 4.2 تائين، اسان مٿي ڏنل فهرستن جي هر غير صفر انٽيجر سائيز لاءِ منفي مارجن يوٽيلٽيون شامل ڪيون آھن (مثال طور، 1, 2, 3, 4, 5). اهي افاديت گرڊ ڪالمن گٽرز کي بريڪ پوائنٽس جي ترتيب ڏيڻ لاءِ مثالي آهن.

نحو لڳ ڀڳ ساڳيو آهي جيئن ته ڊفالٽ، مثبت مارجن يوٽيلٽيز، پر شامل ڪرڻ سان گڏ nاڳ جي گهربل سائيز. هتي هڪ مثال ڪلاس آهي جنهن جي سامهون آهي .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

هتي هڪ مثال آهي بوٽ اسٽريپ گرڊ کي ترتيب ڏيڻ جو وچولي ( md) بريڪ پوائنٽ ۽ مٿي تي. اسان .colپيڊنگ کي وڌايو آهي .px-md-5۽ پوءِ ان جو مقابلو ڪيو آهي .mx-md-n5والدين سان .row.

ڪسٽم ڪالمن پيڊنگ

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>