وقفہ کاری
بوٹسٹریپ میں ایک عنصر کی ظاہری شکل کو تبدیل کرنے کے لیے شارٹ ہینڈ ریسپانسیو مارجن اور پیڈنگ یوٹیلیٹی کلاسز کی ایک وسیع رینج شامل ہے۔
یہ کیسے کام کرتا ہے
شارٹ ہینڈ کلاسز کے ساتھ کسی عنصر یا اس کے اطراف کے ذیلی سیٹ کو جوابدہ دوستانہ margin
یا اقدار تفویض کریں۔ padding
انفرادی خصوصیات، تمام خصوصیات، اور عمودی اور افقی خصوصیات کے لیے تعاون شامل ہے۔ کلاسز کو ڈیفالٹ ساس میپ سے لے کر بنایا جاتا .25rem
ہے 3rem
۔
نوٹیشن
وقفہ کاری کی افادیت جو تمام بریک پوائنٹس پر لاگو ہوتی ہے، سے xs
تک xl
، ان میں کوئی بریک پوائنٹ مخفف نہیں ہے۔ اس کی وجہ یہ ہے کہ وہ کلاسیں اوپر اور اوپر سے لگائی جاتی ہیں min-width: 0
، اور اس طرح میڈیا کے استفسار کے پابند نہیں ہیں۔ تاہم، باقی بریک پوائنٹس میں بریک پوائنٹ کا مخفف شامل ہے۔
کلاسوں کا نام , , , اور کے لیے {property}{sides}-{size}
فارمیٹ کا استعمال کرتے ہوئے رکھا گیا ہے۔xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
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
- خالی - ان کلاسوں کے لیے جو عنصر کے تمام 4 اطراف کو سیٹ کرتی
margin
ہیں ۔padding
جہاں سائز میں سے ایک ہے:
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
(آپ ساس نقشہ متغیر میں اندراجات شامل کرکے مزید سائز شامل کرسکتے ہیں ۔)
مثالیں
یہاں ان کلاسوں کی کچھ نمائندہ مثالیں ہیں:
.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>
منفی مارجن
سی ایس ایس میں، 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>