घटक के बारे में बतावल गइल बा

बेस क्लास के बा

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

हमनी के संशोधक क्लास बनावे खातिर, हमनी @eachके सास मैप पर पुनरावृत्ति करे खातिर सास के लूप के इस्तेमाल करेनी जा। ई खासतौर पर हमनी के द्वारा कौनों घटक के $theme-colorsवेरिएंट पैदा करे खातिर आ हर ब्रेकपॉइंट खातिर रिस्पांसिव वेरिएंट बनावे खातिर सहायक होला। जइसे-जइसे रउआँ एह सास मैप सभ के अनुकूलित करीं आ फिर से संकलित करीं, रउआँ अपना बदलाव सभ के एह लूप सभ में झलकत अपने आप देखब।

एह लूप सभ के कइसे अनुकूलित कइल जा सके ला आ बूटस्ट्रैप के बेस-मोडिफायर तरीका के अपना कोड में बढ़ावे खातिर हमनी के 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);
}

जवाबदेह बा

ई सास लूप खाली रंगीन नक्शा तक सीमित नइखे, इहो। रउआँ अपना घटक सभ के रिस्पांसिव भिन्नता भी पैदा क सकत बानी। उदाहरण खातिर ड्रॉपडाउन के हमनी के रिस्पांसिव संरेखण लिहल जाव जहाँ हमनी के एगो मीडिया क्वेरी शामिल के साथ सास मैप @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. जब रउआँ ओह बेस क्लास के ओह संशोधक वर्ग सभ में से कौनों एक के साथ जोड़ब, रउआँ के आपन पूरा घटक परिवार मिल जाई: