উপাদানসমূহ

ভিত্তি শ্ৰেণীসমূহ

বুটষ্ট্ৰেপৰ উপাদানসমূহ বহুলাংশে এটা ভিত্তি-পৰিৱৰ্তক নামকৰণৰ সৈতে নিৰ্মিত। আমি যিমান পাৰি সিমান অংশীদাৰী বৈশিষ্ট্যসমূহক এটা ভিত্তি শ্ৰেণীত গোট কৰোঁ, যেনে .btn, আৰু তাৰ পিছত প্ৰতিটো ভিন্নতাৰ বাবে ব্যক্তিগত শৈলীসমূহক পৰিবৰ্তক শ্ৰেণীসমূহত গোট কৰোঁ, যেনে .btn-primaryবা .btn-success।

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

এই লুপসমূহ কেনেকৈ স্বনিৰ্বাচিত কৰিব লাগে আৰু Bootstrap ৰ ভিত্তি-পৰিৱৰ্তক পদ্ধতি আপোনাৰ নিজৰ ক'ডলৈ সম্প্ৰসাৰিত কৰিব লাগে তাৰ বাবে আমাৰ Sass মেপসমূহ আৰু লুপসমূহ নথিপত্ৰসমূহ চাওক ।

পৰিৱৰ্তকসমূহ

Bootstrap ৰ বহুতো উপাদান এটা ভিত্তি-পৰিৱৰ্তক শ্ৰেণী পদ্ধতিৰ সৈতে নিৰ্মিত। ইয়াৰ অৰ্থ হৈছে ষ্টাইলিঙৰ ডাঙৰ অংশ এটা ভিত্তি শ্ৰেণীত (যেনে, .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 অংশ চাওক ।

নিজৰ সৃষ্টি কৰা

আমি আপোনাক আপোনাৰ নিজৰ উপাদানসমূহ সৃষ্টি কৰিবলে Bootstrap ৰ সৈতে নিৰ্মাণ কৰাৰ সময়ত এই নিৰ্দেশনাসমূহ গ্ৰহণ কৰিবলৈ উৎসাহিত কৰোঁ। আমি এই পদ্ধতিটো আমাৰ নথিপত্ৰ আৰু উদাহৰণসমূহত স্বনিৰ্বাচিত উপাদানসমূহলৈ নিজেই সম্প্ৰসাৰিত কৰিছো। আমাৰ কলআউটৰ দৰে উপাদানসমূহ আমাৰ প্ৰদান কৰা উপাদানসমূহৰ দৰেই ভিত্তি আৰু পৰিবৰ্তক শ্ৰেণীসমূহৰ সৈতে নিৰ্মাণ কৰা হয়।

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

আপোনাৰ CSS ত, আপোনাৰ নিম্নলিখিতৰ দৰে কিবা এটা থাকিব য'ত ষ্টাইলিংৰ ডাঙৰ অংশ ৰ যোগেদি কৰা হয় .callout। তাৰ পিছত, প্ৰতিটো ভেৰিয়েন্টৰ মাজৰ একক শৈলীসমূহ পৰিবৰ্তক শ্ৰেণীৰ যোগেদি নিয়ন্ত্ৰণ কৰা হয়।

// Base class
.callout {}

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

কলআউটৰ বাবে, সেই অনন্য ষ্টাইলিং মাত্ৰ এটা border-left-color. যেতিয়া আপুনি সেই ভিত্তি শ্ৰেণীক সেই পৰিবৰ্তক শ্ৰেণীসমূহৰ এটাৰ সৈতে সংযুক্ত কৰে, আপুনি আপোনাৰ সম্পূৰ্ণ উপাদান পৰিয়াল পায়: