فاصلو
بوٽ اسٽريپ ۾ شارٽ هينڊ جوابي مارجن، پيڊنگ، ۽ گپ يوٽيلٽي ڪلاس جو هڪ وسيع سلسلو شامل آهي هڪ عنصر جي ظاهر کي تبديل ڪرڻ لاءِ.
مارجن ۽ پيڊنگ
شارٽ هينڊ ڪلاسن سان هڪ عنصر يا ان جي پاسن جي هڪ ذيلي سيٽ کي جوابي-دوستانه margin
يا قدر ڏيو. padding
انفرادي ملڪيتن، سڀني ملڪيتن، ۽ عمودي ۽ افقي ملڪيتن جي حمايت شامل آھي. ڪلاس هڪ ڊفالٽ Sass نقشي مان ٺهيل آهن جن جي حد .25rem
تائين 3rem
.
CSS گرڊ لي آئوٽ ماڊل استعمال ڪري رهيا آهيو؟ گپ افاديت کي استعمال ڪرڻ تي غور ڪريو .
نوٽيفڪيشن
اسپيسنگ يوٽيلٽيز جيڪي سڀني بريڪ پوائنٽس تي لاڳو ٿين ٿيون، کان xs
وٺي xxl
، انهن ۾ بريڪ پوائنٽ جو مخفف نه آهي. اهو ئي سبب آهي ته اهي طبقا لاڳو ڪيا ويا آهن min-width: 0
۽ مٿي کان، ۽ اهڙيء طرح ميڊيا جي سوال جي پابند نه آهن. باقي وقفي پوائنٽن ۾، جيتوڻيڪ، هڪ وقفي پوائنٽ مخفف شامل آهي.
طبقن کي فارميٽ استعمال ڪندي نالو ڏنو ويو آهي {property}{sides}-{size}
for xs
and {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-left
LTR ۾،margin-right
ياpadding-right
RTL ۾e
- (آخر) طبقن لاءِ جيڪي سيٽ ڪيلmargin-right
ياpadding-right
LTR ۾،margin-left
ياpadding-left
RTL ۾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
ساس نقشي جي بنياد تي.
<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,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
يوٽيلٽيز 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
),