فاصلو
بوٽ اسٽريپ ۾ شارٽ هينڊ جوابي مارجن جي وسيع رينج ۽ پيڊنگ يوٽيلٽي ڪلاس شامل آهن هڪ عنصر جي ظاهر کي تبديل ڪرڻ لاءِ.
اهو ڪيئن ڪم ڪري ٿو
شارٽ هينڊ ڪلاسن سان هڪ عنصر يا ان جي پاسن جي هڪ ذيلي سيٽ کي جوابي-دوستانه margin
يا قدر ڏيو. padding
انفرادي ملڪيتن، سڀني ملڪيتن، ۽ عمودي ۽ افقي ملڪيتن جي حمايت شامل آھي. ڪلاس هڪ ڊفالٽ Sass نقشي مان ٺهيل آهن جن جي حد .25rem
تائين 3rem
.
نوٽيفڪيشن
اسپيسنگ يوٽيلٽيز جيڪي سڀني بريڪ پوائنٽس تي لاڳو ٿين ٿيون، کان xs
وٺي xl
، انهن ۾ بريڪ پوائنٽ جو مخفف نه آهي. اهو ئي سبب آهي ته اهي طبقا لاڳو ڪيا ويا آهن min-width: 0
۽ مٿي کان، ۽ اهڙيء طرح ميڊيا جي سوال جي پابند نه آهن. باقي وقفي پوائنٽن ۾، جيتوڻيڪ، هڪ وقفي پوائنٽ مخفف شامل آهي.
طبقن کي فارميٽ استعمال ڪندي نالو ڏنو ويو آهي {property}{sides}-{size}
for xs
and {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>