घटकाः
वयं कथं किमर्थं च अस्माकं प्रायः सर्वाणि घटकानि प्रतिक्रियापूर्वकं आधारेण परिवर्तकवर्गैः च निर्मामः इति ज्ञातव्यम् ।
आधारवर्गाः
बूटस्ट्रैप् इत्यस्य घटकाः बहुधा आधार-संशोधक-नामकरणेन सह निर्मिताः सन्ति । वयं यथासंभवं साझागुणान् आधारवर्गे समूहयामः, यथा .btn
, ततः प्रत्येकस्य रूपान्तरस्य कृते व्यक्तिगतशैल्याः परिवर्तकवर्गेषु समूहयामः, यथा .btn-primary
वा .btn-success
.
अस्माकं modifier classes निर्मातुं, वयं @each
Sass 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 इत्यनेन सह निर्मिताः भवन्ति ।
<div class="callout">...</div>
भवतः CSS मध्ये, भवतः निम्नलिखितम् इव किमपि स्यात् यत्र स्टाइलिंग् इत्यस्य बृहत् भागः मार्गेण क्रियते .callout
। ततः, प्रत्येकस्य वेरिएण्ट् मध्ये अद्वितीयशैल्याः modifier class मार्गेण नियन्त्रिताः भवन्ति ।
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
कॉलआउट् कृते, तत् अद्वितीयं स्टाइलिंग् केवलं एकं border-left-color
. यदा भवान् तत् आधारवर्गं तासु परिवर्तकवर्गेषु एकेन सह संयोजयति तदा भवान् स्वस्य सम्पूर्णं घटकपरिवारं प्राप्नोति: