ಘಟಕಗಳು
ನಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ನಾವು ಹೇಗೆ ಮತ್ತು ಏಕೆ ಸ್ಪಂದಿಸುವ ರೀತಿಯಲ್ಲಿ ಮತ್ತು ಬೇಸ್ ಮತ್ತು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.
ಮೂಲ ತರಗತಿಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಘಟಕಗಳನ್ನು ಹೆಚ್ಚಾಗಿ ಬೇಸ್-ಮಾರ್ಡಿಫೈಯರ್ ನಾಮಕರಣದೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಾವು ಸಾಧ್ಯವಾದಷ್ಟು ಹಂಚಿದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೇಸ್ ಕ್ಲಾಸ್ಗೆ ಗುಂಪು ಮಾಡುತ್ತೇವೆ .btn
, ಮತ್ತು ನಂತರ ಪ್ರತಿ ರೂಪಾಂತರಕ್ಕೆ ಪ್ರತ್ಯೇಕ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಾಗಿ ಗುಂಪು ಮಾಡುತ್ತೇವೆ, ಹಾಗೆ .btn-primary
ಅಥವಾ .btn-success
.
ನಮ್ಮ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ನಿರ್ಮಿಸಲು, ನಾವು @each
ಸಾಸ್ ನಕ್ಷೆಯ ಮೇಲೆ ಪುನರಾವರ್ತಿಸಲು ಸಾಸ್ನ ಲೂಪ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ನಮ್ಮ ಮೂಲಕ ಘಟಕದ $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
);
ನಮ್ಮ ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಹೇಗೆ ಮಾರ್ಪಡಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳಿಗಾಗಿ, ದಯವಿಟ್ಟು ಗ್ರಿಡ್ ದಸ್ತಾವೇಜನ್ನು ಸಾಸ್ ವಿಭಾಗವನ್ನು ನೋಡಿ .
ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸುವುದು
ನಿಮ್ಮ ಸ್ವಂತ ಘಟಕಗಳನ್ನು ರಚಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ನಿರ್ಮಿಸುವಾಗ ಈ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ. ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಮತ್ತು ಉದಾಹರಣೆಗಳಲ್ಲಿನ ಕಸ್ಟಮ್ ಘಟಕಗಳಿಗೆ ಈ ವಿಧಾನವನ್ನು ನಾವೇ ವಿಸ್ತರಿಸಿದ್ದೇವೆ. ನಮ್ಮ ಕಾಲ್ಔಟ್ಗಳಂತಹ ಘಟಕಗಳನ್ನು ಬೇಸ್ ಮತ್ತು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳೊಂದಿಗೆ ನಾವು ಒದಗಿಸಿದ ಘಟಕಗಳಂತೆಯೇ ನಿರ್ಮಿಸಲಾಗಿದೆ.
<div class="callout">...</div>
ನಿಮ್ಮ CSS ನಲ್ಲಿ, ಹೆಚ್ಚಿನ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಈ ಕೆಳಗಿನವುಗಳ ಮೂಲಕ ಮಾಡಲಾಗುತ್ತದೆ .callout
. ನಂತರ, ಪ್ರತಿ ರೂಪಾಂತರದ ನಡುವಿನ ಅನನ್ಯ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ವರ್ಗದ ಮೂಲಕ ನಿಯಂತ್ರಿಸಲಾಗುತ್ತದೆ.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
ಕಾಲ್ಔಟ್ಗಳಿಗಾಗಿ, ಆ ವಿಶಿಷ್ಟ ಶೈಲಿಯು ಕೇವಲ ಒಂದು border-left-color
. ಆ ಪರಿವರ್ತಕ ವರ್ಗಗಳಲ್ಲಿ ಒಂದನ್ನು ನೀವು ಮೂಲ ವರ್ಗವನ್ನು ಸಂಯೋಜಿಸಿದಾಗ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಘಟಕ ಕುಟುಂಬವನ್ನು ನೀವು ಪಡೆಯುತ್ತೀರಿ: