अवयव

आधार वर्ग

बूटस्ट्रैप के घटकों को बड़े पैमाने पर आधार-संशोधक नामकरण के साथ बनाया गया है। हम एक आधार वर्ग में यथासंभव अधिक से अधिक साझा गुणों को समूहित करते हैं, जैसे .btn, और फिर प्रत्येक प्रकार के लिए अलग-अलग शैलियों को संशोधक वर्गों में समूहित करते हैं, जैसे .btn-primaryया .btn-success।

हमारे संशोधक वर्ग बनाने के लिए, हम Sass के @eachलूप का उपयोग 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>

आपके सीएसएस में, आपके पास निम्न जैसा कुछ होगा जहां स्टाइल का बड़ा हिस्सा .callout. फिर, प्रत्येक प्रकार के बीच अद्वितीय शैलियों को संशोधक वर्ग के माध्यम से नियंत्रित किया जाता है।

// Base class
.callout {}

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

कॉलआउट के लिए, वह अनूठी स्टाइल सिर्फ एक border-left-color. जब आप उस आधार वर्ग को उन संशोधक वर्गों में से एक के साथ जोड़ते हैं, तो आपको अपना पूरा घटक परिवार मिलता है: