اجزاء

بیس کلاسز

بوٹسٹریپ کے اجزاء بڑے پیمانے پر بیس موڈیفائر نام کے ساتھ بنائے گئے ہیں۔ ہم زیادہ سے زیادہ مشترکہ پراپرٹیز کو بیس کلاس میں گروپ کرتے ہیں، جیسے .btn، اور پھر ہر قسم کے لیے انفرادی اسٹائلز کو موڈیفائر کلاسز، جیسے .btn-primaryیا .btn-success۔

اپنی موڈیفائر کلاسز بنانے کے لیے، ہم ساس کے @eachنقشے پر تکرار کرنے کے لیے ساس کے لوپس کا استعمال کرتے ہیں۔ یہ خاص طور پر ہماری طرف سے کسی جزو کی $theme-colorsمختلف حالتیں پیدا کرنے اور ہر بریک پوائنٹ کے لیے جوابی تغیرات بنانے میں مددگار ہے۔ جیسا کہ آپ ان ساس نقشوں کو اپنی مرضی کے مطابق بناتے ہیں اور دوبارہ مرتب کرتے ہیں، آپ خود بخود اپنی تبدیلیاں ان لوپس میں جھلکتے ہوئے دیکھیں گے۔

ان لوپس کو کس طرح اپنی مرضی کے مطابق بنانا ہے اور بوٹسٹریپ کے بیس موڈیفائر اپروچ کو اپنے کوڈ تک بڑھانا ہے اس کے لیے ہمارے ساس میپس اور لوپس کی دستاویزات دیکھیں ۔

ترمیم کرنے والے

بوٹسٹریپ کے بہت سے اجزاء بیس موڈیفائر کلاس اپروچ کے ساتھ بنائے گئے ہیں۔ اس کا مطلب ہے کہ اسٹائل کا بڑا حصہ بنیادی طبقے (مثلاً، .btn) پر مشتمل ہے جب کہ طرز کی تغیرات صرف ترمیم کرنے والے طبقوں تک محدود ہیں (مثلاً، .btn-danger)۔ یہ موڈیفائر کلاسز $theme-colorsنقشہ سے بنائی گئی ہیں تاکہ ہماری موڈیفائر کلاسز کے نمبر اور نام کو حسب ضرورت بنایا جا سکے۔

یہاں دو مثالیں ہیں کہ ہم کس طرح نقشے کو لوپ کرتے ہیں اور اجزاء $theme-colorsمیں ترمیم کرنے والے پیدا کرتے ہیں۔.alert.list-group

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

جوابدہ

یہ ساس لوپس صرف رنگین نقشوں تک ہی محدود نہیں ہیں۔ آپ اپنے اجزاء کے جوابی تغیرات بھی پیدا کر سکتے ہیں۔ مثال کے طور پر ڈراپ ڈاؤن کی ہماری جوابی سیدھ کو لیں جہاں ہم میڈیا کے سوال کے ساتھ ساس میپ کے @eachلیے ایک لوپ کو ملاتے ہیں۔$grid-breakpoints

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

اگر آپ اپنے میں ترمیم کرتے ہیں تو $grid-breakpoints، آپ کی تبدیلیاں اس نقشے پر دہرائی جانے والی تمام لوپس پر لاگو ہوں گی۔

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

ہمارے Sass نقشوں اور متغیرات میں ترمیم کرنے کے طریقے کے بارے میں مزید معلومات اور مثالوں کے لیے، براہ کرم گرڈ دستاویزات کے Sass سیکشن سے رجوع کریں ۔

اپنا بنانا

ہم آپ کو بوٹسٹریپ کے ساتھ اپنے اجزاء بنانے کے لیے ان رہنما خطوط کو اپنانے کی ترغیب دیتے ہیں۔ ہم نے اس نقطہ نظر کو اپنی دستاویزات اور مثالوں میں حسب ضرورت اجزاء تک بڑھا دیا ہے۔ ہمارے کال آؤٹ جیسے اجزاء اسی طرح بنائے گئے ہیں جیسے ہمارے فراہم کردہ اجزاء بیس اور موڈیفائر کلاسز کے ساتھ۔

<div class="callout">...</div>

آپ کے CSS میں، آپ کے پاس مندرجہ ذیل جیسا کچھ ہوگا جہاں اسٹائل کا بڑا حصہ بذریعہ ہوتا ہے .callout۔ اس کے بعد، ہر قسم کے درمیان منفرد انداز کو موڈیفائر کلاس کے ذریعے کنٹرول کیا جاتا ہے۔

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

کال آؤٹس کے لیے، وہ منفرد اسٹائل صرف ایک border-left-colorہے۔ جب آپ اس بیس کلاس کو ان موڈیفائر کلاسوں میں سے کسی ایک کے ساتھ جوڑتے ہیں، تو آپ کو اپنا مکمل جزو خاندان ملتا ہے: