in English

وقفہ کاری

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

اس صفحہ پر

مارجن اور پیڈنگ

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

سی ایس ایس گرڈ لے آؤٹ ماڈیول استعمال کر رہے ہیں؟ اس کے بجائے گیپ یوٹیلیٹی کو استعمال کرنے پر غور کریں ۔

نوٹیشن

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

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

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

m- سیٹ کرنے والی کلاسوں کے لیےmargin
p- سیٹ کرنے والی کلاسوں کے لیےpadding

جہاں اطراف میں سے ایک ہے:

t- ان کلاسوں کے لیے جو سیٹ کرتی ہیں margin-topیاpadding-top
b- ان کلاسوں کے لیے جو سیٹ کرتی ہیں margin-bottomیاpadding-bottom
s- (شروع ) ان کلاسوں کے لیے جو LTR میں margin-leftیا RTL میں سیٹ کرتی ہیں۔padding-leftmargin-rightpadding-right
e- (اختتام ) ان کلاسوں کے لیے جو LTR میں margin-rightیا RTL میں سیٹ کرتی ہیں۔padding-rightmargin-leftpadding-left
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;
}

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

منفی مارجن

سی ایس ایس میں، marginپراپرٹیز منفی اقدار کو استعمال کر سکتی ہیں ( paddingنہیں کر سکتے)۔ یہ منفی مارجن بطور ڈیفالٹ غیر فعال ہیں ، لیکن سیٹنگ کے ذریعے Sass میں فعال کیے جا سکتے ہیں $enable-negative-margins: true۔

نحو تقریباً ڈیفالٹ، مثبت مارجن یوٹیلیٹیز جیسا ہی ہے، لیکن nمطلوبہ سائز سے پہلے کے اضافے کے ساتھ۔ یہاں ایک مثال کی کلاس ہے جو اس کے برعکس ہے .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

گیپ

استعمال کرتے وقت ، آپ پیرنٹ گرڈ کنٹینر پر یوٹیلیٹیز display: gridکا استعمال کر سکتے ہیں ۔ یہ انفرادی گرڈ آئٹمز ( کنٹینر gapکے بچے) میں مارجن یوٹیلیٹیز کو شامل کرنے سے بچا سکتا ہے ۔ گیپ یوٹیلیٹیز بطور ڈیفالٹ ریسپانسیو ہوتی ہیں، اور ساس میپ display: gridکی بنیاد پر ہماری یوٹیلیٹیز API کے ذریعے تیار کی جاتی ہیں ۔$spacers

گرڈ آئٹم 1

گرڈ آئٹم 2

گرڈ آئٹم 3

html

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

سس

نقشے

اسپیسنگ یوٹیلیٹیز کا اعلان ساس میپ کے ذریعے کیا جاتا ہے اور پھر ہمارے یوٹیلیٹیز API کے ساتھ تیار کیا جاتا ہے۔

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

یوٹیلیٹیز 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),