मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

घटकाः

वयं कथं किमर्थं च अस्माकं प्रायः सर्वाणि घटकानि प्रतिक्रियापूर्वकं आधारेण परिवर्तकवर्गैः च निर्मामः इति ज्ञातव्यम् ।

आधारवर्गाः

बूटस्ट्रैप् इत्यस्य घटकाः बहुधा आधार-संशोधक-नामकरणेन सह निर्मिताः सन्ति । वयं यथासंभवं साझागुणान् आधारवर्गे समूहयामः, यथा .btn, ततः प्रत्येकस्य रूपान्तरस्य कृते व्यक्तिगतशैल्याः परिवर्तकवर्गेषु समूहयामः, यथा .btn-primaryवा .btn-success.

अस्माकं modifier classes निर्मातुं, वयं @eachSass map इत्यस्य उपरि iterate कर्तुं Sass इत्यस्य loops इत्यस्य उपयोगं कुर्मः । अस्माकं द्वारा घटकस्य रूपान्तराणि जनयितुं $theme-colorsप्रत्येकस्य भङ्गबिन्दुस्य कृते प्रतिक्रियाशीलरूपान्तराणि निर्मातुं च एतत् विशेषतया सहायकं भवति । यथा भवान् एतानि Sass मानचित्राणि अनुकूलितं करोति पुनः संकलयति च तथा तथा भवान् स्वयमेव एतेषु लूप्स् मध्ये प्रतिबिम्बितानि स्वपरिवर्तनानि पश्यति ।

एतानि लूप्स् कथं अनुकूलितुं शक्यते तथा च Bootstrap इत्यस्य आधार-संशोधक-पद्धतिं स्वस्य कोडं प्रति विस्तारयितुं अस्माकं Sass maps and loops docs पश्यन्तु ।

संशोधकाः

Bootstrap इत्यस्य बहवः घटकाः आधार-संशोधकवर्ग-पद्धत्या निर्मिताः सन्ति । अस्य अर्थः अस्ति यत् स्टाइलिंग् इत्यस्य बृहत् भागः आधारवर्गे (उदा., .btn) समाविष्टः भवति यदा शैलीविविधताः परिवर्तकवर्गेषु (उदा., .btn-danger) सीमिताः सन्ति । $theme-colorsएते modifier classes अस्माकं modifier classes इत्यस्य संख्यां नाम च customizing कर्तुं map तः निर्मिताः सन्ति ।

अत्र द्वौ उदाहरणौ स्तः यत् वयं कथं map इत्यस्य उपरि लूप् कृत्वा and components $theme-colorsइत्यस्य modifiers जनयितुं शक्नुमः ।.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 लूप्स् केवलं वर्णनक्शेषु एव सीमिताः न सन्ति, अपि च । भवान् स्वघटकानाम् प्रतिक्रियाशीलविविधतां अपि जनयितुं शक्नोति । उदाहरणार्थं अस्माकं dropdowns इत्यस्य responsive alignment गृह्यताम् यत्र वयं Sass map @eachकृते एकं loop $grid-breakpointsइत्येतत् media query include इत्यनेन सह मिश्रयामः ।

// 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 documentation इत्यस्य Sass विभागं पश्यन्तु

स्वकीयानि सृज्य

वयं भवन्तं प्रोत्साहयामः यत् भवन्तः स्वकीयानि घटकानि निर्मातुं Bootstrap इत्यनेन निर्माणं कुर्वन् एतानि मार्गदर्शिकानि स्वीकुर्वन्तु। वयं स्वयमेव एतत् दृष्टिकोणं अस्माकं दस्तावेजीकरणेषु उदाहरणेषु च कस्टम् घटकेषु विस्तारितवन्तः । अस्माकं callouts इत्यादीनि घटकानि अस्माकं प्रदत्तानां घटकानां इव base तथा modifier classes इत्यनेन सह निर्मिताः भवन्ति ।

एतत् आह्वानम् अस्ति। वयं अस्माकं docs कृते इदं custom निर्मितवन्तः अतः भवद्भ्यः अस्माकं सन्देशाः विशिष्टाः सन्ति। अस्य संशोधकवर्गद्वारा त्रीणि रूपान्तराणि सन्ति ।
<div class="callout">...</div>

भवतः CSS मध्ये, भवतः निम्नलिखितम् इव किमपि स्यात् यत्र स्टाइलिंग् इत्यस्य बृहत् भागः मार्गेण क्रियते .callout। ततः, प्रत्येकस्य वेरिएण्ट् मध्ये अद्वितीयशैल्याः modifier class मार्गेण नियन्त्रिताः भवन्ति ।

// Base class
.callout {}

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

कॉलआउट् कृते, तत् अद्वितीयं स्टाइलिंग् केवलं एकं border-left-color. यदा भवान् तत् आधारवर्गं तासु परिवर्तकवर्गेषु एकेन सह संयोजयति तदा भवान् स्वस्य सम्पूर्णं घटकपरिवारं प्राप्नोति:

इदं info callout अस्ति । कर्मणि दर्शयितुं उदाहरणपाठः।
एतत् चेतावनी-आह्वानम् अस्ति । कर्मणि दर्शयितुं उदाहरणपाठः।
एतत् खतरा आह्वानम् अस्ति। कर्मणि दर्शयितुं उदाहरणपाठः।