ಥೀಮಿಂಗ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್
ಸುಲಭವಾದ ಥೀಮಿಂಗ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಜಾಗತಿಕ ಶೈಲಿಯ ಆದ್ಯತೆಗಳಿಗಾಗಿ ನಮ್ಮ ಹೊಸ ಅಂತರ್ನಿರ್ಮಿತ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.
ಪರಿಚಯ
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ರಲ್ಲಿ, ಕಡಿಮೆ, ಕಸ್ಟಮ್ CSS ಮತ್ತು ನಮ್ಮ distಫೈಲ್‌ಗಳಲ್ಲಿ ನಾವು ಸೇರಿಸಿರುವ ಪ್ರತ್ಯೇಕ ಥೀಮ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ವೇರಿಯಬಲ್ ಓವರ್‌ರೈಡ್‌ಗಳಿಂದ ಥೀಮಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚಾಗಿ ನಡೆಸಲಾಗುತ್ತದೆ. ಸ್ವಲ್ಪ ಪ್ರಯತ್ನದಿಂದ, ಕೋರ್ ಫೈಲ್‌ಗಳನ್ನು ಸ್ಪರ್ಶಿಸದೆಯೇ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ರ ನೋಟವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರುವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಪರಿಚಿತ, ಆದರೆ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಈಗ, ಥೀಮಿಂಗ್ ಅನ್ನು ಸಾಸ್ ಅಸ್ಥಿರಗಳು, ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ಕಸ್ಟಮ್ ಸಿಎಸ್ಎಸ್ ಮೂಲಕ ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಯಾವುದೇ ಮೀಸಲಾದ ಥೀಮ್ ಸ್ಟೈಲ್ಶೀಟ್ ಇಲ್ಲ; ಬದಲಾಗಿ, ಗ್ರೇಡಿಯಂಟ್‌ಗಳು, ನೆರಳುಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಸೇರಿಸಲು ನೀವು ಅಂತರ್ನಿರ್ಮಿತ ಥೀಮ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು.
ಸಾಸ್
ವೇರಿಯೇಬಲ್‌ಗಳು, ನಕ್ಷೆಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಮ್ಮ ಮೂಲ Sass ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ. ನಮ್ಮ ಬಿಲ್ಡ್‌ನಲ್ಲಿ ಬ್ರೌಸರ್ ರೌಂಡಿಂಗ್‌ನಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಗಟ್ಟಲು ನಾವು ಸಾಸ್ ರೌಂಡಿಂಗ್ ನಿಖರತೆಯನ್ನು 6ಕ್ಕೆ ಹೆಚ್ಚಿಸಿದ್ದೇವೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ ಇದು 5).
ಫೈಲ್ ರಚನೆ
ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕೋರ್ ಫೈಲ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸಾಸ್‌ಗಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ರಚಿಸುವುದು ಎಂದರ್ಥ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು. ನೀವು npm ನಂತಹ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಭಾವಿಸಿದರೆ, ನೀವು ಈ ರೀತಿ ಕಾಣುವ ಫೈಲ್ ರಚನೆಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssನೀವು ನಮ್ಮ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ್ದರೆ ಮತ್ತು ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸದೇ ಇದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ನಿಮ್ಮದೇ ಆದ ರೀತಿಯಲ್ಲಿ ಪ್ರತ್ಯೇಕಿಸಿ, ಆ ರಚನೆಗೆ ಹೋಲುವ ಯಾವುದನ್ನಾದರೂ ಹಸ್ತಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scssಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತಿದೆ
ನಿಮ್ಮ custom.scss, ನೀವು Bootstrap ನ ಮೂಲ Sass ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ನಿಮಗೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ: ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಿ, ಅಥವಾ ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಭಾಗಗಳನ್ನು ಆರಿಸಿ. ನಾವು ಎರಡನೆಯದನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ, ಆದರೂ ನಮ್ಮ ಘಟಕಗಳಾದ್ಯಂತ ಕೆಲವು ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ಅವಲಂಬನೆಗಳಿವೆ ಎಂದು ತಿಳಿದಿರಲಿ. ನಮ್ಮ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ ನೀವು ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಹ ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.
// Custom.scss
// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";ಆ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ನಿಮ್ಮ ನಲ್ಲಿರುವ ಯಾವುದೇ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ನಕ್ಷೆಗಳನ್ನು ನೀವು ಮಾರ್ಪಡಿಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು custom.scss. // Optionalಅಗತ್ಯವಿರುವಂತೆ ವಿಭಾಗದ ಅಡಿಯಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಭಾಗಗಳನ್ನು ಸೇರಿಸಲು ಸಹ ನೀವು ಪ್ರಾರಂಭಿಸಬಹುದು . bootstrap.scssನಿಮ್ಮ ಆರಂಭಿಕ ಹಂತವಾಗಿ ನಮ್ಮ ಫೈಲ್‌ನಿಂದ ಪೂರ್ಣ ಆಮದು ಸ್ಟಾಕ್ ಅನ್ನು ಬಳಸಲು ನಾವು ಸಲಹೆ ನೀಡುತ್ತೇವೆ .
ವೇರಿಯಬಲ್ ಡಿಫಾಲ್ಟ್‌ಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಸಾಸ್ ವೇರಿಯೇಬಲ್ !defaultಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸದೆಯೇ ನಿಮ್ಮ ಸ್ವಂತ ಸಾಸ್‌ನಲ್ಲಿ ವೇರಿಯಬಲ್‌ನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಅಗತ್ಯವಿರುವಂತೆ ಅಸ್ಥಿರಗಳನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಅಂಟಿಸಿ, ಅವುಗಳ ಮೌಲ್ಯಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು !defaultಫ್ಲ್ಯಾಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ. ವೇರಿಯೇಬಲ್ ಅನ್ನು ಈಗಾಗಲೇ ನಿಯೋಜಿಸಿದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳಿಂದ ಅದನ್ನು ಮರು-ನಿಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.
ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವೇರಿಯೇಬಲ್‌ಗಳ ಸಂಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ನೀವು ಕಾಣಬಹುದು scss/_variables.scss. ಕೆಲವು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ null, ಈ ವೇರಿಯೇಬಲ್‌ಗಳು ನಿಮ್ಮ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ಅತಿಕ್ರಮಿಸದ ಹೊರತು ಆಸ್ತಿಯನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡುವುದಿಲ್ಲ.
ಅದೇ Sass ಫೈಲ್‌ನಲ್ಲಿನ ವೇರಿಯೇಬಲ್ ಅತಿಕ್ರಮಣಗಳು ಡೀಫಾಲ್ಟ್ ವೇರಿಯೇಬಲ್‌ಗಳ ಮೊದಲು ಅಥವಾ ನಂತರ ಬರಬಹುದು. ಆದಾಗ್ಯೂ, Sass ಫೈಲ್‌ಗಳಾದ್ಯಂತ ಅತಿಕ್ರಮಿಸುವಾಗ, ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ Sass ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಮೊದಲು ನಿಮ್ಮ ಅತಿಕ್ರಮಣಗಳು ಬರಬೇಕು.
npm ಮೂಲಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡುವಾಗ ಮತ್ತು ಕಂಪೈಲ್ ಮಾಡುವಾಗ background-colorಬದಲಾಯಿಸುವ colorಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :<body>
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";ಕೆಳಗಿನ ಜಾಗತಿಕ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಯಾವುದೇ ವೇರಿಯಬಲ್‌ಗೆ ಅಗತ್ಯವಿರುವಂತೆ ಪುನರಾವರ್ತಿಸಿ.
ನಕ್ಷೆಗಳು ಮತ್ತು ಕುಣಿಕೆಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಪ್ರಮುಖ ಮೌಲ್ಯದ ಜೋಡಿಗಳು ಸಂಬಂಧಿತ CSS ನ ಕುಟುಂಬಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ನಮ್ಮ ಬಣ್ಣಗಳು, ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನಾವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ಸಾಸ್ ವೇರಿಯಬಲ್‌ಗಳಂತೆಯೇ, ಎಲ್ಲಾ ಸಾಸ್ ನಕ್ಷೆಗಳು !defaultಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ ಮತ್ತು ಅದನ್ನು ಅತಿಕ್ರಮಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು.
ನಮ್ಮ ಕೆಲವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಖಾಲಿಯಾಗಿ ವಿಲೀನಗೊಳಿಸಲಾಗಿದೆ. ಕೊಟ್ಟಿರುವ ಸಾಸ್ ನಕ್ಷೆಯ ಸುಲಭ ವಿಸ್ತರಣೆಯನ್ನು ಅನುಮತಿಸಲು ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ, ಆದರೆ ನಕ್ಷೆಯಿಂದ ಐಟಂಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ವೆಚ್ಚದಲ್ಲಿ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಕಷ್ಟವಾಗುತ್ತದೆ.
ನಕ್ಷೆಯನ್ನು ಮಾರ್ಪಡಿಸಿ
ನಮ್ಮ ನಕ್ಷೆಯಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಣ್ಣವನ್ನು ಮಾರ್ಪಡಿಸಲು $theme-colors, ನಿಮ್ಮ ಕಸ್ಟಮ್ ಸಾಸ್ ಫೈಲ್‌ಗೆ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);ನಕ್ಷೆಗೆ ಸೇರಿಸಿ
ಗೆ ಹೊಸ ಬಣ್ಣವನ್ನು $theme-colorsಸೇರಿಸಲು, ಹೊಸ ಕೀ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಿ:
$theme-colors: (
"custom-color": #900
);ನಕ್ಷೆಯಿಂದ ತೆಗೆದುಹಾಕಿ
, ಅಥವಾ ಯಾವುದೇ ಇತರ ನಕ್ಷೆಯಿಂದ ಬಣ್ಣಗಳನ್ನು ತೆಗೆದುಹಾಕಲು $theme-colors, ಬಳಸಿ map-remove. ನಮ್ಮ ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳ ನಡುವೆ ನೀವು ಅದನ್ನು ಸೇರಿಸಬೇಕು ಎಂದು ತಿಳಿದಿರಲಿ:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...ಅಗತ್ಯವಿರುವ ಕೀಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಸ್ ಮ್ಯಾಪ್‌ಗಳಲ್ಲಿ ಕೆಲವು ನಿರ್ದಿಷ್ಟ ಕೀಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ನಾವು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅವುಗಳನ್ನು ನಾವೇ ವಿಸ್ತರಿಸುತ್ತೇವೆ ಎಂದು ಊಹಿಸುತ್ತದೆ. ನೀವು ಒಳಗೊಂಡಿರುವ ನಕ್ಷೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದಂತೆ, ನಿರ್ದಿಷ್ಟ ಸಾಸ್ ನಕ್ಷೆಯ ಕೀಲಿಯನ್ನು ಬಳಸುತ್ತಿರುವಲ್ಲಿ ನೀವು ದೋಷಗಳನ್ನು ಎದುರಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ಲಿಂಕ್‌ಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ನಾವು primary, success, ಮತ್ತು dangerಕೀಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. $theme-colorsಈ ಕೀಲಿಗಳ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳಿಲ್ಲ, ಆದರೆ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದರಿಂದ ಸಾಸ್ ಸಂಕಲನ ಸಮಸ್ಯೆಗಳು ಉಂಟಾಗಬಹುದು. ಈ ನಿದರ್ಶನಗಳಲ್ಲಿ, ಆ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಸಾಸ್ ಕೋಡ್ ಅನ್ನು ನೀವು ಮಾರ್ಪಡಿಸುವ ಅಗತ್ಯವಿದೆ.
ಕಾರ್ಯಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹಲವಾರು ಸಾಸ್ ಕಾರ್ಯಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಆದರೆ ಸಾಮಾನ್ಯ ಥೀಮಿಂಗ್‌ಗೆ ಉಪವಿಭಾಗ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ಬಣ್ಣ ನಕ್ಷೆಗಳಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಲು ನಾವು ಮೂರು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}ನೀವು V3 ನಿಂದ ಬಣ್ಣ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುತ್ತೀರಿ ಎಂಬುದರಂತೆಯೇ ಸಾಸ್ ನಕ್ಷೆಯಿಂದ ಒಂದು ಬಣ್ಣವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಇವುಗಳು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}ನಕ್ಷೆಯಿಂದ ನಿರ್ದಿಷ್ಟ ಮಟ್ಟದ ಬಣ್ಣವನ್ನು ಪಡೆಯಲು ನಾವು ಇನ್ನೊಂದು ಕಾರ್ಯವನ್ನು ಹೊಂದಿದ್ದೇವೆ . $theme-colorsಋಣಾತ್ಮಕ ಮಟ್ಟದ ಮೌಲ್ಯಗಳು ಬಣ್ಣವನ್ನು ಹಗುರಗೊಳಿಸುತ್ತವೆ, ಆದರೆ ಹೆಚ್ಚಿನ ಮಟ್ಟಗಳು ಗಾಢವಾಗುತ್ತವೆ.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}ಪ್ರಾಯೋಗಿಕವಾಗಿ, ನೀವು ಕಾರ್ಯವನ್ನು ಕರೆದು ಎರಡು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಲ್ಲಿ ಪಾಸ್ ಮಾಡುತ್ತೀರಿ: ಬಣ್ಣದ ಹೆಸರು $theme-colors(ಉದಾ, ಪ್ರಾಥಮಿಕ ಅಥವಾ ಅಪಾಯ) ಮತ್ತು ಸಂಖ್ಯಾ ಮಟ್ಟ.
.custom-element {
color: theme-color-level(primary, -10);
}ಭವಿಷ್ಯದಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಹೆಚ್ಚುವರಿ ಸಾಸ್ ನಕ್ಷೆಗಳಿಗಾಗಿ ಮಟ್ಟದ ಕಾರ್ಯಗಳನ್ನು ರಚಿಸಲು ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಸಾಸ್ ಅನ್ನು ಸೇರಿಸಬಹುದು, ಅಥವಾ ನೀವು ಹೆಚ್ಚು ಮೌಖಿಕವಾಗಿರಲು ಬಯಸಿದರೆ ಸಾಮಾನ್ಯವಾದದ್ದೂ ಸಹ.
ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ನಾವು ಸೇರಿಸುವ ಹೆಚ್ಚುವರಿ ಕಾರ್ಯವೆಂದರೆ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಕಾರ್ಯ, color-yiq. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಮೂಲ ಬಣ್ಣವನ್ನು ಆಧರಿಸಿ ಬೆಳಕಿನ ( ) ಅಥವಾ ಡಾರ್ಕ್ ( ) ಕಾಂಟ್ರಾಸ್ಟ್ ಬಣ್ಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹಿಂತಿರುಗಿಸಲು YIQ ಬಣ್ಣದ ಜಾಗವನ್ನು ಇದು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ . ನೀವು ಬಹು ವರ್ಗಗಳನ್ನು ರಚಿಸುತ್ತಿರುವ ಮಿಕ್ಸಿನ್‌ಗಳು ಅಥವಾ ಲೂಪ್‌ಗಳಿಗೆ ಈ ಕಾರ್ಯವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.#fff#111
ಉದಾಹರಣೆಗೆ, ನಮ್ಮ ಮ್ಯಾಪ್‌ನಿಂದ ಬಣ್ಣದ ಸ್ವಿಚ್‌ಗಳನ್ನು ರಚಿಸಲು $theme-colors:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}ಒಂದು-ಆಫ್ ಕಾಂಟ್ರಾಸ್ಟ್ ಅಗತ್ಯಗಳಿಗಾಗಿ ಇದನ್ನು ಬಳಸಬಹುದು:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}ನಮ್ಮ ಬಣ್ಣದ ನಕ್ಷೆ ಕಾರ್ಯಗಳೊಂದಿಗೆ ನೀವು ಮೂಲ ಬಣ್ಣವನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}ಎಸ್‌ವಿಜಿ ಎಸ್ಕೇಪ್
SVG ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳಿಗಾಗಿ , ಮತ್ತು ಅಕ್ಷರಗಳಿಂದ escape-svgತಪ್ಪಿಸಿಕೊಳ್ಳಲು ನಾವು ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತೇವೆ . IE ನಲ್ಲಿ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರೂಪಿಸಲು ಈ ಅಕ್ಷರಗಳನ್ನು ತಪ್ಪಿಸಬೇಕು.<>#
ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಕಳೆಯಿರಿ
ನಾವು CSS ಕಾರ್ಯವನ್ನು ಕಟ್ಟಲು addಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಬಳಸುತ್ತೇವೆ . "ಯೂನಿಟ್‌ಲೆಸ್" ಮೌಲ್ಯವನ್ನು ಅಭಿವ್ಯಕ್ತಿಗೆ ರವಾನಿಸಿದಾಗ ದೋಷಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಈ ಕಾರ್ಯಗಳ ಪ್ರಾಥಮಿಕ ಉದ್ದೇಶವಾಗಿದೆ . ಗಣಿತದ ಪ್ರಕಾರ ಸರಿಯಾಗಿದ್ದರೂ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ದೋಷವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.subtractcalc0calccalc(10px - 0)
ಕ್ಯಾಲ್ಕ್ ಮಾನ್ಯವಾಗಿರುವ ಉದಾಹರಣೆ:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}ಕ್ಯಾಲ್ಕ್ ಅಮಾನ್ಯವಾಗಿರುವ ಉದಾಹರಣೆ:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}ಸಾಸ್ ಆಯ್ಕೆಗಳು
ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳ ಫೈಲ್‌ನೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ಹೊಸ $enable-*Sass ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ಜಾಗತಿಕ CSS ಆದ್ಯತೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಟಾಗಲ್ ಮಾಡಿ. ವೇರಿಯೇಬಲ್ ಮೌಲ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸಿ ಮತ್ತು npm run testಅಗತ್ಯವಿರುವಂತೆ ಮರುಕಂಪೈಲ್ ಮಾಡಿ.
scss/_variables.scssಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫೈಲ್‌ನಲ್ಲಿ ಪ್ರಮುಖ ಜಾಗತಿಕ ಆಯ್ಕೆಗಳಿಗಾಗಿ ನೀವು ಈ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಹುಡುಕಬಹುದು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು .
| ವೇರಿಯಬಲ್ | ಮೌಲ್ಯಗಳನ್ನು | ವಿವರಣೆ |
|---|---|---|
$spacer |
1rem(ಡೀಫಾಲ್ಟ್), ಅಥವಾ ಯಾವುದೇ ಮೌಲ್ಯ > 0 |
ನಮ್ಮ ಸ್ಪೇಸರ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಉತ್ಪಾದಿಸಲು ಡೀಫಾಲ್ಟ್ ಸ್ಪೇಸರ್ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ . |
$enable-rounded |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ border-radiusಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-shadows |
trueಅಥವಾ false(ಡೀಫಾಲ್ಟ್) |
ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ box-shadowಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-gradients |
trueಅಥವಾ false(ಡೀಫಾಲ್ಟ್) |
background-imageವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಶೈಲಿಗಳ ಮೂಲಕ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ . |
$enable-transitions |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
transitionವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ s ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ . |
$enable-prefers-reduced-motion-media-query |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
prefers-reduced-motionಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ , ಇದು ಬಳಕೆದಾರರ ಬ್ರೌಸರ್/ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಂ ಆದ್ಯತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಕೆಲವು ಅನಿಮೇಷನ್‌ಗಳು/ಪರಿವರ್ತನೆಗಳನ್ನು ನಿಗ್ರಹಿಸುತ್ತದೆ. |
$enable-hover-media-query |
trueಅಥವಾ false(ಡೀಫಾಲ್ಟ್) |
ಅಸಮ್ಮತಿಸಲಾಗಿದೆ |
$enable-grid-classes |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗಾಗಿ CSS ತರಗತಿಗಳ ಉತ್ಪಾದನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ (ಉದಾ, .container, .row, .col-md-1, ಇತ್ಯಾದಿ). |
$enable-caret |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ನಲ್ಲಿ ಹುಸಿ ಅಂಶದ ಕ್ಯಾರೆಟ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ .dropdown-toggle. |
$enable-pointer-cursor-for-buttons |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸದ ಬಟನ್ ಅಂಶಗಳಿಗೆ "ಕೈ" ಕರ್ಸರ್ ಅನ್ನು ಸೇರಿಸಿ. |
$enable-print-styles |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ಮುದ್ರಣವನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-responsive-font-sizes |
trueಅಥವಾ false(ಡೀಫಾಲ್ಟ್) |
ರೆಸ್ಪಾನ್ಸಿವ್ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ . |
$enable-validation-icons |
true(ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ಪಠ್ಯದ ಇನ್‌ಪುಟ್‌ಗಳಲ್ಲಿ ಐಕಾನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ background-imageಮತ್ತು ಮೌಲ್ಯೀಕರಣ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಕೆಲವು ಕಸ್ಟಮ್ ಫಾರ್ಮ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-deprecation-messages |
trueಅಥವಾ false(ಡೀಫಾಲ್ಟ್) |
trueನಲ್ಲಿ ತೆಗೆದುಹಾಕಲು ಯೋಜಿಸಲಾದ ಯಾವುದೇ ಅಸಮ್ಮತಿ ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಬಳಸುವಾಗ ಎಚ್ಚರಿಕೆಗಳನ್ನು ತೋರಿಸಲು ಹೊಂದಿಸಿ v5. |
ಬಣ್ಣ
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿವಿಧ ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸಾಸ್ ನಕ್ಷೆಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಬಣ್ಣಗಳ ಸರಣಿಯ ಮೂಲಕ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಿಯಮಾವಳಿಗಳ ಸರಣಿಯನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಈ ನಕ್ಷೆಯನ್ನು ಸಾಸ್‌ನಲ್ಲಿ ಲೂಪ್ ಮಾಡಬಹುದು.
ಎಲ್ಲಾ ಬಣ್ಣಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಬಣ್ಣಗಳು, ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ಮತ್ತು scss/_variables.scssಫೈಲ್‌ನಲ್ಲಿ ಸಾಸ್ ಮ್ಯಾಪ್‌ನಂತೆ ಲಭ್ಯವಿದೆ. ನಾವು ಈಗಾಗಲೇ ಸೇರಿಸಿರುವ ಗ್ರೇಸ್ಕೇಲ್ ಪ್ಯಾಲೆಟ್‌ನಂತೆಯೇ ಹೆಚ್ಚುವರಿ ಛಾಯೆಗಳನ್ನು ಸೇರಿಸಲು ನಂತರದ ಸಣ್ಣ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ಇದನ್ನು ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ .
ನಿಮ್ಮ ಸಾಸ್‌ನಲ್ಲಿ ನೀವು ಇವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }ಬಣ್ಣ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳು ಸೆಟ್ಟಿಂಗ್ colorಮತ್ತು background-color.
ಭವಿಷ್ಯದಲ್ಲಿ, ನಾವು ಕೆಳಗಿನ ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳೊಂದಿಗೆ ಮಾಡಿದಂತೆ ಪ್ರತಿ ಬಣ್ಣದ ಛಾಯೆಗಳಿಗೆ ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದ್ದೇವೆ.
ಥೀಮ್ ಬಣ್ಣಗಳು
scss/_variables.scssಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫೈಲ್‌ನಲ್ಲಿ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಸಾಸ್ ಮ್ಯಾಪ್‌ನಂತೆ ಲಭ್ಯವಿರುವ ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ಸಣ್ಣ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸಲು ನಾವು ಎಲ್ಲಾ ಬಣ್ಣಗಳ ಉಪವಿಭಾಗವನ್ನು ಬಳಸುತ್ತೇವೆ .
ಗ್ರೇಸ್
ಬೂದು ವೇರಿಯಬಲ್‌ಗಳ ವಿಸ್ತಾರವಾದ ಸೆಟ್ ಮತ್ತು scss/_variables.scssನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಾದ್ಯಂತ ಬೂದು ಬಣ್ಣದ ಸ್ಥಿರ ಛಾಯೆಗಳಿಗಾಗಿ ಸಾಸ್ ನಕ್ಷೆ. ಇವುಗಳು "ತಂಪಾದ ಬೂದುಗಳು" ಎಂಬುದನ್ನು ಗಮನಿಸಿ, ಇದು ತಟಸ್ಥ ಬೂದು ಬಣ್ಣಗಳಿಗಿಂತ ಸೂಕ್ಷ್ಮವಾದ ನೀಲಿ ಟೋನ್ ಕಡೆಗೆ ಒಲವು ತೋರುತ್ತದೆ.
ಒಳಗೆ scss/_variables.scss, ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಬಣ್ಣ ಅಸ್ಥಿರಗಳು ಮತ್ತು ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಕಾಣುತ್ತೀರಿ. $colorsಸಾಸ್ ನಕ್ಷೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;ಅನೇಕ ಇತರ ಘಟಕಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನವೀಕರಿಸಲು ನಕ್ಷೆಯೊಳಗೆ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ, ತೆಗೆದುಹಾಕಿ ಅಥವಾ ಮಾರ್ಪಡಿಸಿ. ದುರದೃಷ್ಟವಶಾತ್ ಈ ಸಮಯದಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ಘಟಕವು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಭವಿಷ್ಯದ ನವೀಕರಣಗಳು ಇದನ್ನು ಸುಧಾರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತವೆ. ಅಲ್ಲಿಯವರೆಗೆ, ${color}ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸಲು ಯೋಜಿಸಿ.
ಘಟಕಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಅನೇಕ ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು @eachಸಾಸ್ ನಕ್ಷೆಯ ಮೇಲೆ ಪುನರಾವರ್ತಿಸುವ ಲೂಪ್‌ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಮ್ಮ ಮೂಲಕ ಘಟಕದ ರೂಪಾಂತರಗಳನ್ನು ಉತ್ಪಾದಿಸಲು $theme-colorsಮತ್ತು ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ ಸ್ಪಂದಿಸುವ ರೂಪಾಂತರಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿದೆ. ನೀವು ಈ Sass ನಕ್ಷೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ಮರುಕಂಪೈಲ್ ಮಾಡುವಾಗ, ಈ ಲೂಪ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಬದಲಾವಣೆಗಳು ಪ್ರತಿಫಲಿಸುವುದನ್ನು ನೀವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೋಡುತ್ತೀರಿ.
ಮಾರ್ಪಡಿಸುವವರು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಅನೇಕ ಘಟಕಗಳನ್ನು ಬೇಸ್-ಮಾರ್ಡಿಫೈಯರ್ ಕ್ಲಾಸ್ ವಿಧಾನದೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಇದರರ್ಥ ಸ್ಟೈಲಿಂಗ್‌ನ ಬಹುಪಾಲು ಮೂಲ ವರ್ಗಕ್ಕೆ (ಉದಾ, .btn) ಒಳಗೊಂಡಿರುತ್ತದೆ ಆದರೆ ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಿಗೆ ಸೀಮಿತವಾಗಿರುತ್ತದೆ (ಉದಾ, .btn-danger). ಈ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ನಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ$theme-colorsನಮ್ಮ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಹೆಸರನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಕ್ಷೆಯಿಂದ
ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು ನಮ್ಮ ಎಲ್ಲಾ ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳಿಗೆ $theme-colorsಮಾರ್ಪಾಡುಗಳನ್ನು ರಚಿಸಲು ನಾವು ನಕ್ಷೆಯ ಮೇಲೆ ಹೇಗೆ ಲೂಪ್ ಮಾಡುತ್ತೇವೆ ಎಂಬುದಕ್ಕೆ ಎರಡು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ ..alert.bg-*
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}ರೆಸ್ಪಾನ್ಸಿವ್
ಈ ಸಾಸ್ ಲೂಪ್‌ಗಳು ಬಣ್ಣ ನಕ್ಷೆಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ನಿಮ್ಮ ಘಟಕಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಬದಲಾವಣೆಗಳನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ ನಮ್ಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಪಠ್ಯ ಜೋಡಣೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ ಅಲ್ಲಿ ನಾವು ಸಾಸ್ ನಕ್ಷೆಗಾಗಿ @eachಲೂಪ್ ಅನ್ನು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯೊಂದಿಗೆ ಬೆರೆಸುತ್ತೇವೆ.$grid-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}ನಿಮ್ಮ ನ್ನು ನೀವು ಮಾರ್ಪಡಿಸಬೇಕಾದರೆ $grid-breakpoints, ನಿಮ್ಮ ಬದಲಾವಣೆಗಳು ಆ ನಕ್ಷೆಯಲ್ಲಿ ಪುನರಾವರ್ತನೆಯಾಗುವ ಎಲ್ಲಾ ಲೂಪ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ.
CSS ವೇರಿಯೇಬಲ್‌ಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅದರ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಸುಮಾರು ಎರಡು ಡಜನ್ CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು (ವೇರಿಯಬಲ್‌ಗಳು) ಒಳಗೊಂಡಿದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಇನ್‌ಸ್ಪೆಕ್ಟರ್, ಕೋಡ್ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಸಾಮಾನ್ಯ ಮೂಲಮಾದರಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ನಮ್ಮ ಥೀಮ್ ಬಣ್ಣಗಳು, ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಪ್ರಾಥಮಿಕ ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್‌ಗಳಂತಹ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಮೌಲ್ಯಗಳಿಗೆ ಇವು ಸುಲಭ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತವೆ.
ಲಭ್ಯವಿರುವ ಅಸ್ಥಿರಗಳು
ನಾವು ಸೇರಿಸುವ ಅಸ್ಥಿರಗಳು ಇಲ್ಲಿವೆ ( :rootಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ). ಅವು ನಮ್ಮ _root.scssಫೈಲ್‌ನಲ್ಲಿವೆ.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}ಉದಾಹರಣೆಗಳು
CSS ಅಸ್ಥಿರಗಳು Sass ನ ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಒಂದೇ ರೀತಿಯ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆ, ಆದರೆ ಬ್ರೌಸರ್‌ಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಮೊದಲು ಸಂಕಲನದ ಅಗತ್ಯವಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ಇಲ್ಲಿ ನಾವು ನಮ್ಮ ಪುಟದ ಫಾಂಟ್ ಮತ್ತು ಲಿಂಕ್ ಶೈಲಿಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ಮರುಹೊಂದಿಸುತ್ತಿದ್ದೇವೆ.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಅಸ್ಥಿರ
ನಾವು ಮೂಲತಃ ನಮ್ಮ CSS ವೇರಿಯೇಬಲ್‌ಗಳಲ್ಲಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿದ್ದರೂ (ಉದಾ, --breakpoint-md), ಇವುಗಳು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ , ಆದರೆ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಇನ್ನೂ ನಿಯಮಾವಳಿಗಳಲ್ಲಿ ಬಳಸಬಹುದು . ಈ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಬ್ಯಾಕ್‌ವರ್ಡ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಉಳಿಯುತ್ತವೆ, ಅವುಗಳನ್ನು JavaScript ಮೂಲಕ ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಸ್ಪೆಕ್‌ನಲ್ಲಿ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .
ಯಾವುದನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಎಂಬುದರ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
@media (min-width: var(--breakpoint-sm)) {
...
}ಮತ್ತು ಬೆಂಬಲಿತವಾದವುಗಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}