উপাদান

বেস ক্লাস

বুটস্ট্র্যাপের উপাদানগুলি মূলত একটি বেস-মোডিফায়ার নামকরণের সাথে নির্মিত। আমরা একটি বেস ক্লাসে যতটা সম্ভব শেয়ার্ড প্রপার্টি গ্রুপ করি, যেমন .btn, এবং তারপর প্রতিটি ভেরিয়েন্টের জন্য পৃথক শৈলীকে মডিফায়ার ক্লাসে গোষ্ঠীভুক্ত করি, যেমন .btn-primaryবা .btn-success।

আমাদের সংশোধক ক্লাসগুলি তৈরি করতে, আমরা @eachSass মানচিত্রের উপর পুনরাবৃত্তি করতে Sass এর লুপগুলি ব্যবহার করি। $theme-colorsএটি আমাদের দ্বারা একটি কম্পোনেন্টের ভেরিয়েন্ট তৈরি করতে এবং প্রতিটি ব্রেকপয়েন্টের জন্য প্রতিক্রিয়াশীল ভেরিয়েন্ট তৈরি করার জন্য বিশেষভাবে সহায়ক । আপনি যখন এই Sass মানচিত্রগুলি কাস্টমাইজ করবেন এবং পুনরায় কম্পাইল করবেন, আপনি স্বয়ংক্রিয়ভাবে এই লুপগুলিতে আপনার পরিবর্তনগুলি প্রতিফলিত দেখতে পাবেন।

কীভাবে এই লুপগুলিকে কাস্টমাইজ করতে হয় এবং আপনার নিজের কোডে বুটস্ট্র্যাপের বেস-মোডিফায়ার পদ্ধতির প্রসারিত করতে হয় তার জন্য আমাদের Sass মানচিত্র এবং লুপ ডক্স দেখুন।

সংশোধক

বুটস্ট্র্যাপের অনেক উপাদান একটি বেস-মোডিফায়ার ক্লাস পদ্ধতির সাথে নির্মিত। এর মানে হল স্টাইলিংয়ের বেশিরভাগ অংশ একটি বেস ক্লাসে (যেমন, .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);
}

প্রতিক্রিয়াশীল

এই Sass লুপগুলি রঙের মানচিত্রে সীমাবদ্ধ নয়। আপনি আপনার উপাদানগুলির প্রতিক্রিয়াশীল বৈচিত্রও তৈরি করতে পারেন। উদাহরণ স্বরূপ ধরুন আমাদের ড্রপডাউনগুলির প্রতিক্রিয়াশীল প্রান্তিককরণ যেখানে আমরা মিডিয়া কোয়েরি অন্তর্ভুক্ত সহ Sass মানচিত্রের @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. আপনি যখন সেই বেস ক্লাসটিকে সেই মডিফায়ার ক্লাসগুলির একটির সাথে একত্রিত করেন, আপনি আপনার সম্পূর্ণ উপাদান পরিবার পাবেন: