Source

فاصلو

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

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

شارٽ هينڊ ڪلاسن سان هڪ عنصر يا ان جي پاسن جي هڪ ذيلي سيٽ کي جوابي-دوستانه 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>