وقفہ کاری

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

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

شارٹ ہینڈ کلاسز کے ساتھ کسی عنصر یا اس کے اطراف کے ذیلی سیٹ کو جوابدہ دوستانہ 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>