घटकांचो आस्पाव जाता

आमी आमचे लागीं लागीं सगळे घटक प्रतिसाद दिवपी आनी बेस आनी संशोधक वर्गां सयत कशे आनी कित्याक तयार करतात तें जाणून घेयात.

ह्या पानाचेर

बेस क्लासां

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

आमचे संशोधक वर्ग तयार करपाक, आमी @eachSass नकाशाचेर पुनरावृत्ती करपाक Sass च्या लूपांचो वापर करतात. $theme-colorsआमच्या कडल्यान घटकाचे वेरिएंट तयार करपाक आनी दरेक ब्रेकपॉइंटाक प्रतिसाद दिवपी वेरिएंट तयार करपाक हें खासा उपेगी पडटा . जशे तुमी हे Sass नकाशे पसंतीचे करतात आनी परतून संकलित करतात, तशेच तुमकां तुमचे बदल आपसूकच ह्या लूपांत प्रतिबिंबीत जाल्ले दिसतले.

हे लूप कशे पसंतीचे करचे आनी Bootstrap चो बेस-मॉडिफायर पद्दत तुमच्या स्वताच्या कोडांत वाडोवची हाचे खातीर आमचे 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 नकाशा @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 नकाशे आनी चड-उणें कशे बदलचे हाचे विशीं चड म्हायती आनी उदाहरणां खातीर, उपकार करून Grid दस्तावेजीकरणाचो Sass विभाग पळयात .

स्वताची रचणूक करप

तुमचे स्वताचे घटक तयार करपाक Bootstrap कडेन बांदकाम करतना हीं मार्गदर्शक तत्वां आपणावपाक आमी तुमकां प्रोत्साहन दितात. आमी हो पद्दत स्वता आमच्या दस्तावेजीकरणांत आनी उदाहरणांतल्या सानुकूल घटकांक विस्तार केला. आमच्या कॉलआउट सारके घटक आमच्या पुरवण केल्ल्या घटकां प्रमाण बेस आनी संशोधक वर्गां वांगडा तयार केल्ले आसात.

हो एक कॉलआउट आसा. आमी आमच्या डॉक्सां खातीर तें कसटम तयार केलां म्हणजे तुमकां दिल्ले आमचे संदेश वेगळे उबे रावतात. तातूंत संशोधक वर्गांवरवीं तीन वेरिएंट आसात.

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

तुमच्या CSS त, तुमकां सकयल दिल्ल्या सारकें कितें तरी आसतलें जंय स्टायलिंगाचो व्हडलो वांटो via वरवीं जाता .callout. मागीर, दर एका वेरिएंटांतल्या खाशेल्या शैलींचेर संशोधक वर्गावरवीं नियंत्रीत करतात.

// Base class
.callout {}

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

कॉलआउटां खातीर, ती अद्वितीय स्टायलिंग फकत एक border-left-color. जेन्ना तुमी त्या बेस क्लासाक त्या संशोधक वर्गांतल्या एका वर्गा वांगडा जोडटात, तेन्ना तुमकां तुमचें पुराय घटक कुटुंब मेळटा:

हो एक इन्फो कॉलआउट आसा. तो कृतींत दाखोवपाक उदाहरण मजकूर.

हो एक शिटकावणी कॉलआउट आसा. तो कृतींत दाखोवपाक उदाहरण मजकूर.

हो एक धोक्याचो कॉलआउट. तो कृतींत दाखोवपाक उदाहरण मजकूर.