घटक

आधार कक्षाएँ

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

अपनऽ संशोधक वर्गऽ क॑ बनाबै लेली, हम्मं॑ Sass केरऽ @eachलूप क॑ एक Sass नक्शा प॑ पुनरावृत्ति करै लेली उपयोग करै छियै । इ विशेष रूप सं हमर द्वारा कोनों घटक कें $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>

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

// Base class
.callout {}

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

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