घटक ऐ

बेस क्लासां दी

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

अपनी संशोधक वर्गें गी बनाने लेई, अस @eachइक सस्स नक्शे उप्पर पुनरावृत्ति करने आस्तै सस्स दे लूपें दा इस्तेमाल करदे आं। एह् खास करियै साढ़े आसेआ इक घटक दे $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);
}

जवाबदेही

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