وقفہ کاری

بوٹسٹریپ میں ایک عنصر کی ظاہری شکل کو تبدیل کرنے کے لیے شارٹ ہینڈ ریسپانسیو مارجن اور پیڈنگ یوٹیلیٹی کلاسز کی ایک وسیع رینج شامل ہے۔

یہ کیسے کام کرتا ہے

شارٹ ہینڈ کلاسز کے ساتھ کسی عنصر یا اس کے اطراف کے ذیلی سیٹ کو جوابدہ دوستانہ marginیا اقدار تفویض کریں۔ paddingانفرادی خصوصیات، تمام خصوصیات، اور عمودی اور افقی خصوصیات کے لیے تعاون شامل ہے۔ کلاسز کو ڈیفالٹ ساس میپ سے لے کر بنایا جاتا .25remہے 3rem۔

نوٹیشن

وقفہ کاری کی افادیت جو تمام بریک پوائنٹس پر لاگو ہوتی ہے، سے xsتک xl، ان میں کوئی بریک پوائنٹ مخفف نہیں ہے۔ اس کی وجہ یہ ہے کہ وہ کلاسیں اوپر اور اوپر سے لگائی جاتی ہیں min-width: 0، اور اس طرح میڈیا کے استفسار کے پابند نہیں ہیں۔ تاہم، باقی بریک پوائنٹس میں بریک پوائنٹ کا مخفف شامل ہے۔

کلاسوں کا نام , , , اور کے لیے {property}{sides}-{size}فارمیٹ کا استعمال کرتے ہوئے رکھا گیا ہے۔xs{property}{sides}-{breakpoint}-{size}smmdlgxl

جہاں جائیداد میں سے ایک ہے:

• 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>