घटकाः

आधारवर्गाः

बूटस्ट्रैप् इत्यस्य घटकाः बहुधा आधार-संशोधक-नामकरणेन सह निर्मिताः सन्ति । वयं यथासंभवं साझागुणान् आधारवर्गे समूहयामः, यथा .btn, ततः प्रत्येकस्य रूपान्तरस्य कृते व्यक्तिगतशैल्याः परिवर्तकवर्गेषु समूहयामः, यथा .btn-primaryवा .btn-success.

अस्माकं modifier classes निर्मातुं, वयं @eachSass map इत्यस्य उपरि iterate कर्तुं Sass इत्यस्य loops इत्यस्य उपयोगं कुर्मः । अस्माकं द्वारा घटकस्य रूपान्तराणि जनयितुं $theme-colorsप्रत्येकस्य भङ्गबिन्दुस्य कृते प्रतिक्रियाशीलरूपान्तराणि निर्मातुं च एतत् विशेषतया सहायकं भवति । यथा भवान् एतानि Sass मानचित्राणि अनुकूलितं करोति पुनः संकलयति च तथा तथा भवान् स्वयमेव एतेषु लूप्स् मध्ये प्रतिबिम्बितानि स्वपरिवर्तनानि पश्यति ।

एतानि लूप्स् कथं अनुकूलितुं शक्यते तथा च Bootstrap इत्यस्य आधार-संशोधक-पद्धतिं स्वस्य कोडं प्रति विस्तारयितुं अस्माकं Sass maps and loops docs पश्यन्तु ।

संशोधकाः

Bootstrap इत्यस्य बहवः घटकाः आधार-संशोधकवर्ग-पद्धत्या निर्मिताः सन्ति । अस्य अर्थः अस्ति यत् स्टाइलिंग् इत्यस्य बृहत् भागः आधारवर्गे (उदा., .btn) समाविष्टः भवति यदा शैलीविविधताः परिवर्तकवर्गेषु (उदा., .btn-danger) सीमिताः सन्ति । $theme-colorsएते modifier classes अस्माकं modifier classes इत्यस्य संख्यां नाम च customizing कर्तुं map तः निर्मिताः सन्ति ।

अत्र द्वौ उदाहरणौ स्तः यत् वयं कथं map इत्यस्य उपरि लूप् कृत्वा and components $theme-colorsइत्यस्य modifiers जनयितुं शक्नुमः ।.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 लूप्स् केवलं वर्णनक्शेषु एव सीमिताः न सन्ति, अपि च । भवान् स्वघटकानाम् प्रतिक्रियाशीलविविधतां अपि जनयितुं शक्नोति । उदाहरणार्थं अस्माकं dropdowns इत्यस्य responsive alignment गृह्यताम् यत्र वयं Sass map @eachकृते एकं loop $grid-breakpointsइत्येतत् media query include इत्यनेन सह मिश्रयामः ।

// 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 मानचित्रं चर च कथं परिवर्तयितव्यम् इति विषये अधिकसूचनार्थं उदाहरणार्थं च कृपया Grid documentation इत्यस्य Sass विभागं पश्यन्तु ।

स्वकीयानि सृज्य

वयं भवन्तं प्रोत्साहयामः यत् भवन्तः स्वकीयानि घटकानि निर्मातुं Bootstrap इत्यनेन निर्माणं कुर्वन् एतानि मार्गदर्शिकानि स्वीकुर्वन्तु। वयं स्वयमेव एतत् दृष्टिकोणं अस्माकं दस्तावेजीकरणेषु उदाहरणेषु च कस्टम् घटकेषु विस्तारितवन्तः । अस्माकं callouts इत्यादीनि घटकानि अस्माकं प्रदत्तानां घटकानां इव base तथा modifier classes इत्यनेन सह निर्मिताः भवन्ति ।

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

भवतः CSS मध्ये, भवतः निम्नलिखितम् इव किमपि स्यात् यत्र स्टाइलिंग् इत्यस्य बृहत् भागः मार्गेण क्रियते .callout। ततः, प्रत्येकस्य वेरिएण्ट् मध्ये अद्वितीयशैल्याः modifier class मार्गेण नियन्त्रिताः भवन्ति ।

// Base class
.callout {}

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

कॉलआउट् कृते, तत् अद्वितीयं स्टाइलिंग् केवलं एकं border-left-color. यदा भवान् तत् आधारवर्गं तासु परिवर्तकवर्गेषु एकेन सह संयोजयति तदा भवान् स्वस्य सम्पूर्णं घटकपरिवारं प्राप्नोति: