v5 ಗೆ ಸ್ಥಳಾಂತರಿಸಲಾಗುತ್ತಿದೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲ ಫೈಲ್ಗಳು, ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ಗಳಿಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ ಮತ್ತು ವಿಮರ್ಶಿಸಿ v4 ರಿಂದ v5 ಗೆ ವಲಸೆ ಹೋಗಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
v5.2.0
ರಿಫ್ರೆಶ್ ಮಾಡಿದ ವಿನ್ಯಾಸ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ v5.2.0 ಪ್ರಾಜೆಕ್ಟ್ನಾದ್ಯಂತ ಬೆರಳೆಣಿಕೆಯ ಘಟಕಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಸೂಕ್ಷ್ಮವಾದ ವಿನ್ಯಾಸ ನವೀಕರಣವನ್ನು ಹೊಂದಿದೆ, ಅದರಲ್ಲೂ ಮುಖ್ಯವಾಗಿ border-radius
ಬಟನ್ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಮೇಲೆ ಸಂಸ್ಕರಿಸಿದ ಮೌಲ್ಯಗಳ ಮೂಲಕ . ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಹೊಸ ಮುಖಪುಟ, ಸೈಡ್ಬಾರ್ನ ವಿಭಾಗಗಳನ್ನು ಇನ್ನು ಮುಂದೆ ಕುಗ್ಗಿಸದ ಸರಳವಾದ ಡಾಕ್ಸ್ ಲೇಔಟ್ ಮತ್ತು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಐಕಾನ್ಗಳ ಪ್ರಮುಖ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ನವೀಕರಿಸಲಾಗಿದೆ .
ಇನ್ನಷ್ಟು CSS ವೇರಿಯೇಬಲ್ಗಳು
CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬಳಸಲು ನಾವು ನಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ನವೀಕರಿಸಿದ್ದೇವೆ. Sass ಇನ್ನೂ ಎಲ್ಲವನ್ನೂ ಆಧಾರವಾಗಿಟ್ಟುಕೊಂಡಿರುವಾಗ, ಪ್ರತಿಯೊಂದು ಘಟಕವನ್ನು ಕಾಂಪೊನೆಂಟ್ ಬೇಸ್ ಕ್ಲಾಸ್ಗಳಲ್ಲಿ (ಉದಾ, ) CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸೇರಿಸಲು ನವೀಕರಿಸಲಾಗಿದೆ .btn
, ಇದು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನಂತರದ ಬಿಡುಗಡೆಗಳಲ್ಲಿ, ನಾವು CSS ವೇರಿಯೇಬಲ್ಗಳ ಬಳಕೆಯನ್ನು ನಮ್ಮ ಲೇಔಟ್, ಫಾರ್ಮ್ಗಳು, ಸಹಾಯಕರು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳಿಗೆ ವಿಸ್ತರಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತೇವೆ. ಪ್ರತಿ ಘಟಕದಲ್ಲಿನ CSS ವೇರಿಯೇಬಲ್ಗಳ ಕುರಿತು ಅವುಗಳ ಸಂಬಂಧಿತ ದಸ್ತಾವೇಜನ್ನು ಪುಟಗಳಲ್ಲಿ ಓದಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 6 ರವರೆಗೆ ನಮ್ಮ CSS ವೇರಿಯಬಲ್ ಬಳಕೆಯು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಅಪೂರ್ಣವಾಗಿರುತ್ತದೆ. ಬೋರ್ಡ್ನಾದ್ಯಂತ ಇವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಾವು ಬಯಸುತ್ತೇವೆ, ಆದರೆ ಅವುಗಳು ಬ್ರೇಕಿಂಗ್ ಬದಲಾವಣೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಅಪಾಯವನ್ನು ಎದುರಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಕೆಲವು ಕಾರಣಗಳಿಗಾಗಿ $alert-border-width: var(--bs-border-width)
ಮಾಡುತ್ತಿದ್ದರೆ ನಮ್ಮ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿಸುವುದು ನಿಮ್ಮ ಸ್ವಂತ ಕೋಡ್ನಲ್ಲಿ ಸಂಭಾವ್ಯ ಸಾಸ್ ಅನ್ನು ಒಡೆಯುತ್ತದೆ .$alert-border-width * 2
ಅಂತೆಯೇ, ಸಾಧ್ಯವಾದಲ್ಲೆಲ್ಲಾ, ನಾವು ಹೆಚ್ಚಿನ CSS ವೇರಿಯೇಬಲ್ಗಳ ಕಡೆಗೆ ತಳ್ಳುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತೇವೆ, ಆದರೆ ನಮ್ಮ ಅನುಷ್ಠಾನವು v5 ನಲ್ಲಿ ಸ್ವಲ್ಪ ಸೀಮಿತವಾಗಿರಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗುರುತಿಸಿ.
ಹೊಸದು_maps.scss
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ v5.2.0 ನೊಂದಿಗೆ ಹೊಸ ಸಾಸ್ ಫೈಲ್ ಅನ್ನು ಪರಿಚಯಿಸಿತು _maps.scss
. _variables.scss
ಮೂಲ ನಕ್ಷೆಯ ನವೀಕರಣಗಳನ್ನು ಅವುಗಳನ್ನು ವಿಸ್ತರಿಸುವ ದ್ವಿತೀಯ ನಕ್ಷೆಗಳಿಗೆ ಅನ್ವಯಿಸದಿರುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಇದು ಹಲವಾರು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ . ಉದಾಹರಣೆಗೆ, ಗೆ ನವೀಕರಣಗಳನ್ನು $theme-colors
ಅವಲಂಬಿಸಿರುವ ಇತರ ಥೀಮ್ ನಕ್ಷೆಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತಿಲ್ಲ $theme-colors
, ಪ್ರಮುಖ ಕಸ್ಟಮೈಸೇಶನ್ ವರ್ಕ್ಫ್ಲೋಗಳನ್ನು ಮುರಿಯುತ್ತದೆ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ಡೀಫಾಲ್ಟ್ ವೇರಿಯೇಬಲ್ ಅಥವಾ ಮ್ಯಾಪ್ ಅನ್ನು ಒಮ್ಮೆ ಬಳಸಿದ ನಂತರ ಅದನ್ನು ನವೀಕರಿಸಲು ಸಾಧ್ಯವಿಲ್ಲದ ಮಿತಿಯನ್ನು ಸಾಸ್ ಹೊಂದಿದೆ. ಇತರ CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸಂಯೋಜಿಸಲು CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬಳಸಿದಾಗ ಇದೇ ರೀತಿಯ ಕೊರತೆಯಿದೆ.
ಇದಕ್ಕಾಗಿಯೇ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿನ ವೇರಿಯಬಲ್ ಕಸ್ಟಮೈಸೇಶನ್ಗಳು ನಂತರ ಬರಬೇಕು @import "functions"
, ಆದರೆ ಮೊದಲು @import "variables"
ಮತ್ತು ನಮ್ಮ ಆಮದು ಸ್ಟಾಕ್ನ ಉಳಿದವು. ಇದು Sass ನಕ್ಷೆಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ-ಅವುಗಳನ್ನು ಬಳಸುವ ಮೊದಲು ನೀವು ಡೀಫಾಲ್ಟ್ಗಳನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕು. ಕೆಳಗಿನ ನಕ್ಷೆಗಳನ್ನು ಹೊಸದಕ್ಕೆ ಸರಿಸಲಾಗಿದೆ _maps.scss
:
$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters
ನಿಮ್ಮ ಕಸ್ಟಮ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ CSS ಬಿಲ್ಡ್ಗಳು ಈಗ ಪ್ರತ್ಯೇಕ ನಕ್ಷೆಗಳ ಆಮದು ಜೊತೆಗೆ ಈ ರೀತಿ ಕಾಣಿಸಬೇಕು.
// Functions come first
@import "functions";
// Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+ "custom": $custom-color
+ );
// Variables come next
@import "variables";
+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
// Rest of our imports
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";
// etc
ಹೊಸ ಉಪಯುಕ್ತತೆಗಳು
- ಸೆಮಿಬೋಲ್ಡ್ ಫಾಂಟ್ಗಳಿಗೆ ಸೇರಿಸಲು ವಿಸ್ತರಿತ
font-weight
ಉಪಯುಕ್ತತೆಗಳು ..fw-semibold
- ಎರಡು ಹೊಸ ಗಾತ್ರಗಳನ್ನು ಸೇರಿಸಲು ವಿಸ್ತರಿತ
border-radius
ಉಪಯುಕ್ತತೆಗಳು.rounded-4
ಮತ್ತು.rounded-5
, ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳಿಗಾಗಿ.
ಹೆಚ್ಚುವರಿ ಬದಲಾವಣೆಗಳು
-
$enable-container-classes
ಹೊಸ ಆಯ್ಕೆಯನ್ನು ಪರಿಚಯಿಸಲಾಗಿದೆ . — ಈಗ ಪ್ರಾಯೋಗಿಕ CSS ಗ್ರಿಡ್ ವಿನ್ಯಾಸವನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ,.container-*
ಈ ಆಯ್ಕೆಯನ್ನು ಗೆ ಹೊಂದಿಸದ ಹೊರತು ತರಗತಿಗಳನ್ನು ಇನ್ನೂ ಸಂಕಲಿಸಲಾಗುತ್ತದೆfalse
. ಕಂಟೈನರ್ಗಳು ಈಗ ತಮ್ಮ ಗಟರ್ ಮೌಲ್ಯಗಳನ್ನು ಇಟ್ಟುಕೊಳ್ಳುತ್ತವೆ. -
Offcanvas ಘಟಕವು ಈಗ ಸ್ಪಂದಿಸುವ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಹೊಂದಿದೆ . ಮೂಲ
.offcanvas
ವರ್ಗವು ಬದಲಾಗದೆ ಉಳಿದಿದೆ-ಇದು ಎಲ್ಲಾ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಅದನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಲು, ಆ.offcanvas
ವರ್ಗವನ್ನು ಯಾವುದೇ.offcanvas-{sm|md|lg|xl|xxl}
ವರ್ಗಕ್ಕೆ ಬದಲಾಯಿಸಿ. -
ದಪ್ಪವಾದ ಟೇಬಲ್ ವಿಭಾಜಕಗಳು ಈಗ ಆಯ್ಕೆಯಾಗಿವೆ. — ಟೇಬಲ್ ಗುಂಪುಗಳ ನಡುವಿನ ಗಡಿಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ದಪ್ಪವಾದ ಮತ್ತು ಹೆಚ್ಚು ಕಷ್ಟಕರವಾದ ಗಡಿಯನ್ನು ನಾವು ತೆಗೆದುಹಾಕಿದ್ದೇವೆ ಮತ್ತು ಅದನ್ನು ನೀವು ಅನ್ವಯಿಸಬಹುದಾದ ಐಚ್ಛಿಕ ವರ್ಗಕ್ಕೆ ಸರಿಸಿದ್ದೇವೆ,
.table-group-divider
. ಉದಾಹರಣೆಗಾಗಿ ಟೇಬಲ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ. -
ಇಂಟರ್ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಬಳಸಲು Scrollspy ಅನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ , ಇದರರ್ಥ ನಿಮಗೆ ಇನ್ನು ಮುಂದೆ ಸಂಬಂಧಿತ ಪೋಷಕ ಹೊದಿಕೆಗಳು, ಅಸಮ್ಮತಿ
offset
ಸಂರಚನೆ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಅಗತ್ಯವಿಲ್ಲ. ನಿಮ್ಮ Scrollspy ಅಳವಡಿಕೆಗಳು ಅವುಗಳ ನ್ಯಾವ್ ಹೈಲೈಟ್ನಲ್ಲಿ ಹೆಚ್ಚು ನಿಖರ ಮತ್ತು ಸ್ಥಿರವಾಗಿರಲು ನೋಡಿ. -
Popovers ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಳು ಈಗ CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ವೇರಿಯಬಲ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕೆಲವು CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಅವುಗಳ ಸಾಸ್ ಕೌಂಟರ್ಪಾರ್ಟ್ಗಳಿಂದ ನವೀಕರಿಸಲಾಗಿದೆ. ಪರಿಣಾಮವಾಗಿ, ಈ ಬಿಡುಗಡೆಯಲ್ಲಿ ಮೂರು ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಅಸಮ್ಮತಿಸಲಾಗಿದೆ:
$popover-arrow-color
,$popover-arrow-outer-color
, ಮತ್ತು$tooltip-arrow-color
. -
ಹೊಸ
.text-bg-{color}
ಸಹಾಯಕರನ್ನು ಸೇರಿಸಲಾಗಿದೆ..text-*
ವೈಯಕ್ತಿಕ ಮತ್ತು.bg-*
ಉಪಯುಕ್ತತೆಗಳನ್ನು ಹೊಂದಿಸುವ ಬದಲು, ವ್ಯತಿರಿಕ್ತ.text-bg-*
background-color
ಮುನ್ನೆಲೆಯೊಂದಿಗೆ ಹೊಂದಿಸಲು ನೀವು ಈಗ ಸಹಾಯಕರನ್ನುcolor
ಬಳಸಬಹುದು . -
.form-check-reverse
ಲೇಬಲ್ಗಳು ಮತ್ತು ಸಂಬಂಧಿತ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು/ರೇಡಿಯೊಗಳ ಕ್ರಮವನ್ನು ತಿರುಗಿಸಲು ಮಾರ್ಪಡಿಸುವಿಕೆಯನ್ನು ಸೇರಿಸಲಾಗಿದೆ . -
ಹೊಸ ವರ್ಗದ ಮೂಲಕ ಕೋಷ್ಟಕಗಳಿಗೆ ಪಟ್ಟೆಯುಳ್ಳ ಕಾಲಮ್ಗಳ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
.table-striped-columns
ಬದಲಾವಣೆಗಳ ಸಂಪೂರ್ಣ ಪಟ್ಟಿಗಾಗಿ, GitHub ನಲ್ಲಿ v5.2.0 ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನೋಡಿ .
v5.1.0
-
CSS ಗ್ರಿಡ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಪ್ರಾಯೋಗಿಕ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಲಾಗಿದೆ . — ಇದು ಪ್ರಗತಿಯಲ್ಲಿದೆ ಮತ್ತು ಉತ್ಪಾದನಾ ಬಳಕೆಗೆ ಇನ್ನೂ ಸಿದ್ಧವಾಗಿಲ್ಲ, ಆದರೆ ನೀವು Sass ಮೂಲಕ ಹೊಸ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಆರಿಸಿಕೊಳ್ಳಬಹುದು. ಇದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ಹೊಂದಿಸುವ ಮೂಲಕ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಮತ್ತು ಹೊಂದಿಸುವ
$enable-grid-classes: false
ಮೂಲಕ CSS ಗ್ರಿಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ$enable-cssgrid: true
. -
ಆಫ್ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಬೆಂಬಲಿಸಲು ನ್ಯಾವ್ಬಾರ್ಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ. - ಸ್ಪಂದಿಸುವ ತರಗತಿಗಳು ಮತ್ತು ಕೆಲವು ಆಫ್ಕ್ಯಾನ್ವಾಸ್ ಮಾರ್ಕ್ಅಪ್ನೊಂದಿಗೆ ಯಾವುದೇ ನ್ಯಾವ್ಬಾರ್ನಲ್ಲಿ ಆಫ್ಕ್ಯಾನ್ವಾಸ್ ಡ್ರಾಯರ್ಗಳನ್ನು ಸೇರಿಸಿ .
.navbar-expand-*
-
ಹೊಸ ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಘಟಕವನ್ನು ಸೇರಿಸಲಾಗಿದೆ . — ನಮ್ಮ ಹೊಸ ಘಟಕ, ನಿಮ್ಮ ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಇನ್ನೂ ಏನಾದರೂ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂದು ಸೂಚಿಸಲು ಸಹಾಯ ಮಾಡಲು ನೈಜ ವಿಷಯದ ಬದಲಿಗೆ ತಾತ್ಕಾಲಿಕ ಬ್ಲಾಕ್ಗಳನ್ನು ಒದಗಿಸುವ ಮಾರ್ಗವಾಗಿದೆ.
-
ಸಂಕುಚಿಸಿ ಪ್ಲಗಿನ್ ಈಗ ಸಮತಲ ಕುಸಿತವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ . - ಬದಲಿಗೆ ಕುಗ್ಗಿಸಲು
.collapse-horizontal
ನಿಮ್ಮ ಗೆ ಸೇರಿಸಿ . ಒಂದು ಅಥವಾ ಹೊಂದಿಸುವ ಮೂಲಕ ಬ್ರೌಸರ್ ಪುನಃ ಬಣ್ಣ ಬಳಿಯುವುದನ್ನು ತಪ್ಪಿಸಿ ..collapse
width
height
min-height
height
-
ಹೊಸ ಸ್ಟಾಕ್ ಮತ್ತು ಲಂಬ ನಿಯಮ ಸಹಾಯಕರನ್ನು ಸೇರಿಸಲಾಗಿದೆ. - ಸ್ಟ್ಯಾಕ್ಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ಲೇಔಟ್ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಬಹು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಅನ್ವಯಿಸಿ .
.hstack
ಸಮತಲ ( ) ಮತ್ತು ಲಂಬ (.vstack
) ಸ್ಟ್ಯಾಕ್ಗಳಿಂದ ಆರಿಸಿ . ಹೊಸ ಸಹಾಯಕರೊಂದಿಗೆ<hr>
ಅಂಶಗಳಂತೆಯೇ ಲಂಬವಾದ ವಿಭಾಜಕಗಳನ್ನು ಸೇರಿಸಿ ..vr
-
ಹೊಸ ಜಾಗತಿಕ
:root
CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. - ಶೈಲಿಗಳನ್ನು:root
ನಿಯಂತ್ರಿಸಲು ಮಟ್ಟಕ್ಕೆ ಹಲವಾರು ಹೊಸ CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ .<body>
ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳು ಮತ್ತು ಘಟಕಗಳಾದ್ಯಂತ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನವುಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ, ಆದರೆ ಇದೀಗ ಕಸ್ಟಮೈಸ್ ವಿಭಾಗದಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಓದಿ . -
CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬಳಸಲು ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಕೂಲಂಕಷವಾಗಿ ಪರಿಶೀಲಿಸಲಾಗಿದೆ ಮತ್ತು ಹೊಸ ಪಠ್ಯ ಅಪಾರದರ್ಶಕತೆ ಮತ್ತು ಹಿನ್ನೆಲೆ ಅಪಾರದರ್ಶಕತೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. —
.text-*
ಮತ್ತು.bg-*
ಉಪಯುಕ್ತತೆಗಳನ್ನು ಈಗ CSS ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತುrgba()
ಬಣ್ಣ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಹೊಸ ಅಪಾರದರ್ಶಕತೆಯ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಯಾವುದೇ ಉಪಯುಕ್ತತೆಯನ್ನು ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. -
ನಮ್ಮ ಘಟಕಗಳನ್ನು ಹೇಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ತೋರಿಸಲು ಹೊಸ ತುಣುಕಿನ ಉದಾಹರಣೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. - ನಮ್ಮ ಹೊಸ ತುಣುಕುಗಳ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಘಟಕಗಳು ಮತ್ತು ಇತರ ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸದ ಮಾದರಿಗಳನ್ನು ಬಳಸಲು ಸಿದ್ಧವಾಗಿ ಎಳೆಯಿರಿ . ಅಡಿಟಿಪ್ಪಣಿಗಳು , ಡ್ರಾಪ್ಡೌನ್ಗಳು , ಪಟ್ಟಿ ಗುಂಪುಗಳು ಮತ್ತು ಮಾದರಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ .
-
ಪಾಪ್ಪರ್ನಿಂದ ಮಾತ್ರ ನಿರ್ವಹಿಸಲ್ಪಡುವ ಪಾಪೋವರ್ಗಳು ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಳಿಂದ ಬಳಕೆಯಾಗದ ಸ್ಥಾನೀಕರಣ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ .
$tooltip-margin
ಅಸಮ್ಮತಿಸಲಾಗಿದೆ ಮತ್ತುnull
ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ.
ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಬೇಕೇ? v5.1.0 ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಓದಿ.
ಅವಲಂಬನೆಗಳು
- jQuery ಕೈಬಿಡಲಾಗಿದೆ.
- Popper v1.x ನಿಂದ Popper v2.x ಗೆ ಅಪ್ಗ್ರೇಡ್ ಮಾಡಲಾಗಿದೆ.
- Libsass ಅನ್ನು ನಮ್ಮ Sass ಕಂಪೈಲರ್ನಂತೆ Dart Sass ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ Libsass ಅನ್ನು ಅಸಮ್ಮತಿಗೊಳಿಸಲಾಗಿದೆ.
- ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ನಿರ್ಮಿಸಲು ಜೆಕಿಲ್ನಿಂದ ಹ್ಯೂಗೋಗೆ ವಲಸೆ ಹೋಗಿದ್ದಾರೆ
ಬ್ರೌಸರ್ ಬೆಂಬಲ
- ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 10 ಮತ್ತು 11 ಅನ್ನು ಕೈಬಿಡಲಾಗಿದೆ
- ಕೈಬಿಡಲಾಯಿತು ಮೈಕ್ರೋಸಾಫ್ಟ್ ಎಡ್ಜ್ <16 (ಲೆಗಸಿ ಎಡ್ಜ್)
- ಫೈರ್ಫಾಕ್ಸ್ <60 ಕೈಬಿಡಲಾಗಿದೆ
- ಸಫಾರಿ <12 ಕೈಬಿಡಲಾಗಿದೆ
- iOS ಸಫಾರಿ <12 ಕೈಬಿಡಲಾಗಿದೆ
- Chrome <60 ಅನ್ನು ಕೈಬಿಡಲಾಗಿದೆ
ದಾಖಲೆ ಬದಲಾವಣೆಗಳು
- ಮರುವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಮುಖಪುಟ, ಡಾಕ್ಸ್ ಲೇಔಟ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ.
- ಹೊಸ ಪಾರ್ಸೆಲ್ ಮಾರ್ಗದರ್ಶಿ ಸೇರಿಸಲಾಗಿದೆ .
- ಹೊಸ ಕಸ್ಟಮೈಸ್ ವಿಭಾಗವನ್ನು ಸೇರಿಸಲಾಗಿದೆ , v4 ನ ಥೀಮಿಂಗ್ ಪುಟವನ್ನು ಬದಲಿಸಿ , ಸಾಸ್, ಜಾಗತಿಕ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳು, ಬಣ್ಣ ಯೋಜನೆಗಳು, CSS ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಕುರಿತು ಹೊಸ ವಿವರಗಳೊಂದಿಗೆ.
- ಎಲ್ಲಾ ಫಾರ್ಮ್ ದಸ್ತಾವೇಜನ್ನು ಹೊಸ ಫಾರ್ಮ್ಗಳ ವಿಭಾಗಕ್ಕೆ ಮರುಸಂಘಟಿಸಲಾಗಿದೆ , ವಿಷಯವನ್ನು ಹೆಚ್ಚು ಕೇಂದ್ರೀಕೃತ ಪುಟಗಳಾಗಿ ವಿಭಜಿಸಲಾಗಿದೆ.
- ಅಂತೆಯೇ, ಗ್ರಿಡ್ ವಿಷಯವನ್ನು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿ ಹೊರಹಾಕಲು ಲೇಔಟ್ ವಿಭಾಗವನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.
- "Navs" ಕಾಂಪೊನೆಂಟ್ ಪುಟವನ್ನು "Navs & Tabs" ಎಂದು ಮರುಹೆಸರಿಸಲಾಗಿದೆ.
- "ಚೆಕ್ಗಳು" ಪುಟವನ್ನು "ಚೆಕ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು" ಎಂದು ಮರುಹೆಸರಿಸಲಾಗಿದೆ.
- ನ್ಯಾವ್ಬಾರ್ ಅನ್ನು ಮರುವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ನಮ್ಮ ಸೈಟ್ಗಳು ಮತ್ತು ಡಾಕ್ಸ್ ಆವೃತ್ತಿಗಳನ್ನು ಹುಡುಕಲು ಸುಲಭವಾಗುವಂತೆ ಹೊಸ ಸಬ್ನಾವ್ ಅನ್ನು ಸೇರಿಸಿದೆ.
- ಹುಡುಕಾಟ ಕ್ಷೇತ್ರಕ್ಕೆ ಹೊಸ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್ಕಟ್ ಸೇರಿಸಲಾಗಿದೆ: Ctrl + /.
ಸಾಸ್
-
ಅನಗತ್ಯ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಸುಲಭವಾಗುವಂತೆ ನಾವು ಡೀಫಾಲ್ಟ್ ಸಾಸ್ ಮ್ಯಾಪ್ ವಿಲೀನಗಳನ್ನು ತ್ಯಜಿಸಿದ್ದೇವೆ. ನೀವು ಈಗ ಸಾಸ್ ನಕ್ಷೆಗಳಲ್ಲಿ ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ
$theme-colors
. ಸಾಸ್ ನಕ್ಷೆಗಳೊಂದಿಗೆ ಹೇಗೆ ವ್ಯವಹರಿಸಬೇಕು ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ . -
ಬ್ರೇಕಿಂಗ್ಇದು ಇನ್ನು ಮುಂದೆ YIQ ಬಣ್ಣದ ಜಾಗಕ್ಕೆ ಸಂಬಂಧಿಸದ ಕಾರಣ
color-yiq()
ಕಾರ್ಯ ಮತ್ತು ಸಂಬಂಧಿತ ಅಸ್ಥಿರಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ . #30168 ನೋಡಿ.color-contrast()
$yiq-contrasted-threshold
ಎಂದು ಮರುನಾಮಕರಣ ಮಾಡಲಾಗಿದೆ$min-contrast-ratio
.$yiq-text-dark
ಮತ್ತು$yiq-text-light
ಕ್ರಮವಾಗಿ$color-contrast-dark
ಮತ್ತು ಎಂದು ಮರುಹೆಸರಿಸಲಾಗಿದೆ$color-contrast-light
.
-
ಬ್ರೇಕಿಂಗ್ಮೀಡಿಯಾ ಕ್ವೆರಿ ಮಿಕ್ಸಿನ್ಸ್ ಪ್ಯಾರಾಮೀಟರ್ಗಳು ಹೆಚ್ಚು ತಾರ್ಕಿಕ ವಿಧಾನಕ್ಕಾಗಿ ಬದಲಾಗಿವೆ.
media-breakpoint-down()
ಮುಂದಿನ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನ ಬದಲಿಗೆ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ,media-breakpoint-down(lg)
ಗುರಿಗಳmedia-breakpoint-down(md)
ವ್ಯೂಪೋರ್ಟ್ಗಳಿಗಿಂತ ಚಿಕ್ಕದಾಗಿದೆlg
).- ಅಂತೆಯೇ, ರಲ್ಲಿನ ಎರಡನೇ ನಿಯತಾಂಕವು
media-breakpoint-between()
ಮುಂದಿನ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನ ಬದಲಿಗೆ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಮತ್ತು ನಡುವಿನ ಗುರಿಗಳ ವ್ಯೂಪೋರ್ಟ್ಗಳmedia-between(sm, lg)
ಬದಲಿಗೆ ).media-breakpoint-between(sm, md)
sm
lg
-
ಬ್ರೇಕಿಂಗ್ಮುದ್ರಣ ಶೈಲಿಗಳು ಮತ್ತು
$enable-print-styles
ವೇರಿಯಬಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಮುದ್ರಣ ಪ್ರದರ್ಶನ ತರಗತಿಗಳು ಇನ್ನೂ ಇವೆ. #28339 ನೋಡಿ . -
ಬ್ರೇಕಿಂಗ್ಕೈಬಿಡಲಾಗಿದೆ
color()
,theme-color()
ಮತ್ತುgray()
ವೇರಿಯೇಬಲ್ಗಳ ಪರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. #29083 ನೋಡಿ . -
ಬ್ರೇಕಿಂಗ್
theme-color-level()
ಕಾರ್ಯವನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆcolor-level()
ಮತ್ತು ಈಗ$theme-color
ಬಣ್ಣಗಳ ಬದಲಿಗೆ ನಿಮಗೆ ಬೇಕಾದ ಯಾವುದೇ ಬಣ್ಣವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. #29083 ವೀಕ್ಷಿಸಿ ವೀಕ್ಷಿಸಿ:color-level()
ನಂತರದಲ್ಲಿ ಕೈಬಿಡಲಾಯಿತುv5.0.0-alpha3
. -
ಬ್ರೇಕಿಂಗ್ಮರುಹೆಸರಿಸಲಾಗಿದೆ
$enable-prefers-reduced-motion-media-query
ಮತ್ತು ಸಂಕ್ಷಿಪ್ತತೆಗಾಗಿ .$enable-pointer-cursor-for-buttons
_$enable-reduced-motion
$enable-button-pointers
-
ಬ್ರೇಕಿಂಗ್ಮಿಕ್ಸಿನ್
bg-gradient-variant()
ತೆಗೆದರು. ರಚಿಸಿದ ವರ್ಗಗಳ.bg-gradient
ಬದಲಿಗೆ ಅಂಶಗಳಿಗೆ ಗ್ರೇಡಿಯಂಟ್ಗಳನ್ನು ಸೇರಿಸಲು ವರ್ಗವನ್ನು ಬಳಸಿ ..bg-gradient-*
-
ಬ್ರೇಕಿಂಗ್ ಹಿಂದೆ ಅಸಮ್ಮತಿಸಿದ ಮಿಕ್ಸಿನ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ:
hover
,hover-focus
,plain-hover-focus
ಮತ್ತುhover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(ಸಂಬಂಧಿತ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವನ್ನು ಸಹ ಕೈಬಿಡಲಾಗಿದೆ,.text-hide
)visibility()
form-control-focus()
-
ಬ್ರೇಕಿಂಗ್ಸಾಸ್ನ ಸ್ವಂತ ಬಣ್ಣದ ಸ್ಕೇಲಿಂಗ್ ಕಾರ್ಯದೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ತಪ್ಪಿಸಲು
scale-color()
ಕಾರ್ಯವನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ .shift-color()
-
box-shadow
mixins ಈಗ ಬಹು ವಾದಗಳಿಂದnull
ಮೌಲ್ಯಗಳನ್ನು ಮತ್ತು ಡ್ರಾಪ್ ಅನ್ನು ಅನುಮತಿಸುತ್ತವೆ. #30394 ನೋಡಿ .none
-
ಮಿಕ್ಸಿನ್ ಈಗ
border-radius()
ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ.
ಬಣ್ಣದ ವ್ಯವಸ್ಥೆ
-
ಹೊಸ ಬಣ್ಣದ ವ್ಯವಸ್ಥೆಯ ಪರವಾಗಿ ಕೆಲಸ ಮಾಡಿದ
color-level()
ಮತ್ತು ತೆಗೆದುಹಾಕಲಾದ ಬಣ್ಣ ವ್ಯವಸ್ಥೆ. ನಮ್ಮ ಕೋಡ್ಬೇಸ್ನಲ್ಲಿರುವ$theme-color-interval
ಎಲ್ಲಾlighten()
ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಮತ್ತು . ಈ ಕಾರ್ಯಗಳು ಬಣ್ಣವನ್ನು ಅದರ ಲಘುತೆಯನ್ನು ಸ್ಥಿರ ಪ್ರಮಾಣದಲ್ಲಿ ಬದಲಾಯಿಸುವ ಬದಲು ಬಿಳಿ ಅಥವಾ ಕಪ್ಪು ಬಣ್ಣದೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡುತ್ತದೆ. ಅದರ ತೂಕದ ನಿಯತಾಂಕವು ಧನಾತ್ಮಕ ಅಥವಾ ಋಣಾತ್ಮಕವಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿ ಬಣ್ಣವನ್ನು ಛಾಯೆ ಅಥವಾ ಛಾಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ #30622 ನೋಡಿ .darken()
tint-color()
shade-color()
shift-color()
-
ಪ್ರತಿ ಬಣ್ಣಕ್ಕೂ ಹೊಸ ಟಿಂಟ್ಗಳು ಮತ್ತು ಶೇಡ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ, ಪ್ರತಿ ಮೂಲ ಬಣ್ಣಕ್ಕೆ ಒಂಬತ್ತು ಪ್ರತ್ಯೇಕ ಬಣ್ಣಗಳನ್ನು ಹೊಸ ಸಾಸ್ ವೇರಿಯಬಲ್ಗಳಂತೆ ಒದಗಿಸುತ್ತದೆ.
-
ಸುಧಾರಿತ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್. 3:1 ರಿಂದ 4.5:1 ರವರೆಗಿನ ಬಂಪ್ಡ್ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ ಮತ್ತು WCAG 2.1 AA ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀಲಿ, ಹಸಿರು, ಸಯಾನ್ ಮತ್ತು ಗುಲಾಬಿ ಬಣ್ಣಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ. ನಮ್ಮ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಬಣ್ಣವನ್ನು ಸಹ ದಿಂದ
$gray-900
ಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ$black
. -
ನಮ್ಮ ಬಣ್ಣದ ವ್ಯವಸ್ಥೆಯನ್ನು ಬೆಂಬಲಿಸಲು, ನಮ್ಮ ಬಣ್ಣಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಮಿಶ್ರಣ ಮಾಡಲು ನಾವು ಹೊಸ ಕಸ್ಟಮ್
tint-color()
ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.shade-color()
ಗ್ರಿಡ್ ನವೀಕರಣಗಳು
-
ಹೊಸ ಬ್ರೇಕ್ ಪಾಯಿಂಟ್! ಮತ್ತು ಮೇಲಕ್ಕೆ ಹೊಸ
xxl
ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ.1400px
ಎಲ್ಲಾ ಇತರ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಿಗೆ ಯಾವುದೇ ಬದಲಾವಣೆಗಳಿಲ್ಲ. -
ಸುಧಾರಿತ ಗಟಾರಗಳು. ಗಟರ್ಗಳನ್ನು ಈಗ ರೆಮ್ಸ್ನಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ ಮತ್ತು ಅವು v4 ಗಿಂತ ಕಿರಿದಾಗಿವೆ (
1.5rem
, ಅಥವಾ ಸುಮಾರು24px
, ಕೆಳಗೆ30px
). ಇದು ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ನ ಗಟರ್ಗಳನ್ನು ನಮ್ಮ ಅಂತರ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಜೋಡಿಸುತ್ತದೆ.- ಸಮತಲ/ಲಂಬವಾದ ಗಟಾರಗಳು, ಸಮತಲವಾದ ಗಟಾರಗಳು ಮತ್ತು ಲಂಬವಾದ ಗಟಾರಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಹೊಸ ಗಟರ್ ವರ್ಗವನ್ನು (
.g-*
,.gx-*
, ಮತ್ತು ) ಸೇರಿಸಲಾಗಿದೆ..gy-*
- ಬ್ರೇಕಿಂಗ್ಹೊಸ ಗಟರ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಹೊಂದಿಸಲು ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.no-gutters
..g-0
- ಸಮತಲ/ಲಂಬವಾದ ಗಟಾರಗಳು, ಸಮತಲವಾದ ಗಟಾರಗಳು ಮತ್ತು ಲಂಬವಾದ ಗಟಾರಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಹೊಸ ಗಟರ್ ವರ್ಗವನ್ನು (
-
ಕಾಲಮ್ಗಳು ಇನ್ನು ಮುಂದೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಆ ನಡವಳಿಕೆಯನ್ನು ಮರುಸ್ಥಾಪಿಸಲು ನೀವು ಕೆಲವು ಅಂಶಗಳಿಗೆ
position: relative
ಸೇರಿಸಬೇಕಾಗಬಹುದು ..position-relative
-
ಬ್ರೇಕಿಂಗ್
.order-*
ಆಗಾಗ್ಗೆ ಬಳಕೆಯಾಗದೆ ಹೋದ ಹಲವಾರು ತರಗತಿಗಳನ್ನು ಕೈಬಿಡಲಾಯಿತು . ನಾವು ಈಗ ಬಾಕ್ಸ್ ಹೊರಗೆ ಮಾತ್ರ ಒದಗಿಸುತ್ತೇವೆ.order-1
..order-5
-
ಬ್ರೇಕಿಂಗ್ಘಟಕವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ
.media
ಏಕೆಂದರೆ ಅದನ್ನು ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಪುನರಾವರ್ತಿಸಬಹುದು. ಉದಾಹರಣೆಗಾಗಿ #28265 ಮತ್ತು ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳ ಪುಟವನ್ನು ನೋಡಿ . -
ಬ್ರೇಕಿಂಗ್
bootstrap-grid.css
box-sizing: border-box
ಜಾಗತಿಕ ಬಾಕ್ಸ್ ಗಾತ್ರವನ್ನು ಮರುಹೊಂದಿಸುವ ಬದಲು ಈಗ ಕಾಲಮ್ಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ . ಈ ರೀತಿಯಾಗಿ, ನಮ್ಮ ಗ್ರಿಡ್ ಶೈಲಿಗಳನ್ನು ಹಸ್ತಕ್ಷೇಪವಿಲ್ಲದೆ ಹೆಚ್ಚಿನ ಸ್ಥಳಗಳಲ್ಲಿ ಬಳಸಬಹುದು. -
$enable-grid-classes
ಇನ್ನು ಮುಂದೆ ಕಂಟೇನರ್ ತರಗತಿಗಳ ಉತ್ಪಾದನೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದಿಲ್ಲ. #29146 ನೋಡಿ. -
make-col
ನಿಗದಿತ ಗಾತ್ರವಿಲ್ಲದೆ ಸಮಾನ ಕಾಲಮ್ಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ಗೆ ಮಿಕ್ಸಿನ್ ಅನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ .
ವಿಷಯ, ರೀಬೂಟ್, ಇತ್ಯಾದಿ
-
RFS ಅನ್ನು ಈಗ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ. ಮಿಕ್ಸಿನ್ ಬಳಸುವ
font-size()
ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆfont-size
. ಈ ವೈಶಿಷ್ಟ್ಯವು ಹಿಂದೆ v4 ನೊಂದಿಗೆ ಆಯ್ಕೆ ಮಾಡಲಾಗಿತ್ತು. -
ಬ್ರೇಕಿಂಗ್
$display-*
ನಮ್ಮ ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಮತ್ತು$display-font-sizes
ಸಾಸ್ ಮ್ಯಾಪ್ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲು ನಮ್ಮ ಡಿಸ್ಪ್ಲೇ ಟೈಪೋಗ್ರಫಿಯನ್ನು ಕೂಲಂಕಷವಾಗಿ ಪರಿಶೀಲಿಸಲಾಗಿದೆ . ಏಕ ಮತ್ತು ಸರಿಹೊಂದಿಸಿದ s$display-*-weight
ಗಾಗಿ ಪ್ರತ್ಯೇಕ ವೇರಿಯಬಲ್ಗಳನ್ನು ಸಹ ತೆಗೆದುಹಾಕಲಾಗಿದೆ .$display-font-weight
font-size
-
ಎರಡು ಹೊಸ
.display-*
ಶೀರ್ಷಿಕೆ ಗಾತ್ರಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ,.display-5
ಮತ್ತು.display-6
. -
ನಿರ್ದಿಷ್ಟ ಘಟಕಗಳ ಭಾಗವಾಗದ ಹೊರತು ಲಿಂಕ್ಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಅಂಡರ್ಲೈನ್ ಮಾಡಲಾಗುತ್ತದೆ (ಹೋವರ್ನಲ್ಲಿ ಮಾತ್ರವಲ್ಲ).
-
ಸ್ಟೈಲಿಂಗ್ನ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಅವುಗಳ ಶೈಲಿಗಳನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ಮತ್ತು CSS ವೇರಿಯೇಬಲ್ಗಳೊಂದಿಗೆ ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ಟೇಬಲ್ಗಳನ್ನು ಮರುವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ .
-
ಬ್ರೇಕಿಂಗ್ನೆಸ್ಟೆಡ್ ಟೇಬಲ್ಗಳು ಇನ್ನು ಮುಂದೆ ಶೈಲಿಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದಿಲ್ಲ.
-
ಬ್ರೇಕಿಂಗ್
.thead-light
ಮತ್ತು ಎಲ್ಲಾ ಟೇಬಲ್ ಅಂಶಗಳಿಗೆ ಬಳಸಬಹುದಾದ ಭಿನ್ನ ವರ್ಗಗಳ.thead-dark
ಪರವಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ ( , , , , ಮತ್ತು )..table-*
thead
tbody
tfoot
tr
th
td
-
ಬ್ರೇಕಿಂಗ್
table-row-variant()
ಮಿಕ್ಸಿನ್ ಅನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ ಮತ್ತುtable-variant()
ಕೇವಲ 2 ನಿಯತಾಂಕಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:$color
(ಬಣ್ಣದ ಹೆಸರು) ಮತ್ತು$value
(ಬಣ್ಣ ಕೋಡ್). ಬಾರ್ಡರ್ ಬಣ್ಣ ಮತ್ತು ಉಚ್ಚಾರಣಾ ಬಣ್ಣಗಳನ್ನು ಟೇಬಲ್ ಫ್ಯಾಕ್ಟರ್ ವೇರಿಯಬಲ್ಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. -
ಟೇಬಲ್ ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅಸ್ಥಿರಗಳನ್ನು ವಿಭಜಿಸಿ
-y
ಮತ್ತು-x
. -
ಬ್ರೇಕಿಂಗ್
.pre-scrollable
ವರ್ಗವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ . #29135 ನೋಡಿ -
ಬ್ರೇಕಿಂಗ್
.text-*
ಉಪಯುಕ್ತತೆಗಳು ಇನ್ನು ಮುಂದೆ ಲಿಂಕ್ಗಳಿಗೆ ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಸ್ಟೇಟ್ಗಳನ್ನು ಸೇರಿಸುವುದಿಲ್ಲ..link-*
ಬದಲಿಗೆ ಸಹಾಯಕ ತರಗತಿಗಳನ್ನು ಬಳಸಬಹುದು. #29267 ನೋಡಿ -
ಬ್ರೇಕಿಂಗ್
.text-justify
ವರ್ಗವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ . #29793 ನೋಡಿ -
ಬ್ರೇಕಿಂಗ್
<hr>
ಗುಣಲಕ್ಷಣವನ್ನು ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿಸುವheight
ಬದಲು ಅಂಶಗಳನ್ನು ಈಗ ಬಳಸುತ್ತದೆ . ಇದು ದಪ್ಪವಾದ ವಿಭಾಜಕಗಳನ್ನು ರಚಿಸಲು ಪ್ಯಾಡಿಂಗ್ ಉಪಯುಕ್ತತೆಗಳ ಬಳಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ (ಉದಾ, ).border
size
<hr class="py-1">
-
ಡೀಫಾಲ್ಟ್ ಹಾರಿಜಾಂಟಲ್
padding-left
ಆನ್<ul>
ಮತ್ತು<ol>
ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ನಿಂದ40px
ಗೆ ಮರುಹೊಂದಿಸಿ2rem
. -
ಸೇರಿಸಲಾಗಿದೆ
$enable-smooth-scroll
, ಇದು ಜಾಗತಿಕವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ - ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯscroll-behavior: smooth
ಮೂಲಕ ಕಡಿಮೆ ಚಲನೆಯನ್ನು ಕೇಳುವ ಬಳಕೆದಾರರನ್ನು ಹೊರತುಪಡಿಸಿ . #31877 ನೋಡಿprefers-reduced-motion
RTL
- ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಲೇಔಟ್ಗಳಲ್ಲಿ ಕಂಡುಬರುವ ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಲು ಸಮತಲ ದಿಕ್ಕಿನ ನಿರ್ದಿಷ್ಟ ವೇರಿಯಬಲ್ಗಳು, ಉಪಯುಕ್ತತೆಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್ಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ-ಉದಾ,
start
ಮತ್ತುend
ಬದಲಿಗೆleft
ಮತ್ತುright
.
ರೂಪಗಳು
-
ಹೊಸ ತೇಲುವ ರೂಪಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ! ನಾವು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ಗಳಿಗೆ ಫ್ಲೋಟಿಂಗ್ ಲೇಬಲ್ಗಳ ಉದಾಹರಣೆಯನ್ನು ಪ್ರಚಾರ ಮಾಡಿದ್ದೇವೆ. ಹೊಸ ಫ್ಲೋಟಿಂಗ್ ಲೇಬಲ್ಗಳ ಪುಟವನ್ನು ನೋಡಿ.
-
ಬ್ರೇಕಿಂಗ್ ಏಕೀಕೃತ ಸ್ಥಳೀಯ ಮತ್ತು ಕಸ್ಟಮ್ ರೂಪ ಅಂಶಗಳು. v4 ನಲ್ಲಿ ಸ್ಥಳೀಯ ಮತ್ತು ಕಸ್ಟಮ್ ತರಗತಿಗಳನ್ನು ಹೊಂದಿರುವ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು, ರೇಡಿಯೋಗಳು, ಆಯ್ಕೆಗಳು ಮತ್ತು ಇತರ ಇನ್ಪುಟ್ಗಳನ್ನು ಏಕೀಕರಿಸಲಾಗಿದೆ. ಈಗ ನಮ್ಮ ಎಲ್ಲಾ ಫಾರ್ಮ್ ಅಂಶಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ ಆಗಿವೆ, ಹೆಚ್ಚಿನವು ಕಸ್ಟಮ್ HTML ನ ಅಗತ್ಯವಿಲ್ಲ.
.custom-control.custom-checkbox
ಈಗ ಆಗಿದೆ.form-check
..custom-control.custom-custom-radio
ಈಗ ಆಗಿದೆ.form-check
..custom-control.custom-switch
ಈಗ ಆಗಿದೆ.form-check.form-switch
..custom-select
ಈಗ ಆಗಿದೆ.form-select
..custom-file
ಮತ್ತು.form-file
ಮೇಲಿನ ಕಸ್ಟಮ್ ಶೈಲಿಗಳಿಂದ ಬದಲಾಯಿಸಲಾಗಿದೆ.form-control
..custom-range
ಈಗ ಆಗಿದೆ.form-range
.- ಸ್ಥಳೀಯ ಕೈಬಿಡಲಾಯಿತು
.form-control-file
ಮತ್ತು.form-control-range
.
-
ಬ್ರೇಕಿಂಗ್ಕೈಬಿಡಲಾಯಿತು
.input-group-append
ಮತ್ತು.input-group-prepend
. ನೀವು ಇದೀಗ ಬಟನ್ಗಳನ್ನು ಮತ್ತು.input-group-text
ಇನ್ಪುಟ್ ಗುಂಪುಗಳ ನೇರ ಮಕ್ಕಳಂತೆ ಸೇರಿಸಬಹುದು. -
ಊರ್ಜಿತಗೊಳಿಸುವಿಕೆಯ ಪ್ರತಿಕ್ರಿಯೆ ದೋಷದೊಂದಿಗೆ ಇನ್ಪುಟ್ ಗುಂಪಿನಲ್ಲಿ ದೀರ್ಘಾವಧಿಯ ಮಿಸ್ಸಿಂಗ್ ಬಾರ್ಡರ್ ತ್ರಿಜ್ಯವನ್ನು ಮೌಲ್ಯೀಕರಣದೊಂದಿಗೆ ಇನ್ಪುಟ್ ಗುಂಪುಗಳಿಗೆ ಹೆಚ್ಚುವರಿ
.has-validation
ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಅಂತಿಮವಾಗಿ ಪರಿಹರಿಸಲಾಗಿದೆ. -
ಬ್ರೇಕಿಂಗ್ ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಂಗಾಗಿ ಫಾರ್ಮ್-ನಿರ್ದಿಷ್ಟ ಲೇಔಟ್ ತರಗತಿಗಳನ್ನು ಕೈಬಿಡಲಾಗಿದೆ.
.form-group
,.form-row
ಅಥವಾ ಬದಲಿಗೆ ನಮ್ಮ ಗ್ರಿಡ್ ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ.form-inline
. -
ಬ್ರೇಕಿಂಗ್ಫಾರ್ಮ್ ಲೇಬಲ್ಗಳಿಗೆ ಈಗ ಅಗತ್ಯವಿದೆ
.form-label
. -
ಬ್ರೇಕಿಂಗ್
.form-text
ಇನ್ನು ಮುಂದೆ ಹೊಂದಿಸುವುದಿಲ್ಲdisplay
, HTML ಅಂಶವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನೀವು ಬಯಸಿದಂತೆ ಇನ್ಲೈನ್ ಅಥವಾ ಬ್ಲಾಕ್ ಸಹಾಯ ಪಠ್ಯವನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. -
ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಇನ್ನು ಮುಂದೆ
height
ಸಾಧ್ಯವಾದಾಗ ಸ್ಥಿರವಾಗಿ ಬಳಸಲಾಗುವುದಿಲ್ಲ, ಬದಲಿಗೆmin-height
ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ಹೊಂದಾಣಿಕೆಯನ್ನು ಸುಧಾರಿಸಲು ಮುಂದೂಡುತ್ತದೆ. -
ಮೌಲ್ಯೀಕರಣ ಐಕಾನ್ಗಳನ್ನು ಇನ್ನು ಮುಂದೆ
<select>
s ನೊಂದಿಗೆ ಅನ್ವಯಿಸಲಾಗುವುದಿಲ್ಲmultiple
. -
scss/forms/
ಇನ್ಪುಟ್ ಗ್ರೂಪ್ ಸ್ಟೈಲ್ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಅಡಿಯಲ್ಲಿ ಮರುಹೊಂದಿಸಲಾದ ಮೂಲ ಸಾಸ್ ಫೈಲ್ಗಳು .
ಘಟಕಗಳು
padding
ಎಚ್ಚರಿಕೆಗಳು, ಬ್ರೆಡ್ಕ್ರಂಬ್ಗಳು, ಕಾರ್ಡ್ಗಳು, ಡ್ರಾಪ್ಡೌನ್ಗಳು, ಪಟ್ಟಿ ಗುಂಪುಗಳು, ಮಾದರಿಗಳು, ಪಾಪೋವರ್ಗಳು ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಳಿಗಾಗಿ ಏಕೀಕೃತ ಮೌಲ್ಯಗಳು ನಮ್ಮ$spacer
ವೇರಿಯಬಲ್ ಅನ್ನು ಆಧರಿಸಿರುತ್ತವೆ. #30564 ನೋಡಿ .
ಅಕಾರ್ಡಿಯನ್
- ಹೊಸ ಅಕಾರ್ಡಿಯನ್ ಘಟಕವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
ಎಚ್ಚರಿಕೆಗಳು
-
ಎಚ್ಚರಿಕೆಗಳು ಈಗ ಐಕಾನ್ಗಳೊಂದಿಗೆ ಉದಾಹರಣೆಗಳನ್ನು ಹೊಂದಿವೆ .
-
<hr>
ಅವರು ಈಗಾಗಲೇ ಬಳಸುವುದರಿಂದ ಪ್ರತಿ ಎಚ್ಚರಿಕೆಯಲ್ಲಿನ ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆcurrentColor
.
ಬ್ಯಾಡ್ಜ್ಗಳು
-
ಬ್ರೇಕಿಂಗ್
.badge-*
ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಎಲ್ಲಾ ಬಣ್ಣದ ವರ್ಗಗಳನ್ನು ಕೈಬಿಡಲಾಗಿದೆ (ಉದಾ,.bg-primary
ಬದಲಿಗೆ ಬಳಸಿ.badge-primary
). -
ಬ್ರೇಕಿಂಗ್ಕೈಬಿಡಲಾಗಿದೆ
.badge-pill
-.rounded-pill
ಬದಲಿಗೆ ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸಿ. -
ಬ್ರೇಕಿಂಗ್
<a>
ಮತ್ತು<button>
ಅಂಶಗಳಿಗಾಗಿ ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ . -
/ ನಿಂದ
.25em
/ ಗೆ ಬ್ಯಾಡ್ಜ್ಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚಿಸಲಾಗಿದೆ ..5em
.35em
.65em
ಬ್ರೆಡ್ ತುಂಡುಗಳು
-
ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಬ್ರೆಡ್ಕ್ರಂಬ್ಸ್ನ ಡೀಫಾಲ್ಟ್ ನೋಟವನ್ನು ಸರಳಗೊಳಿಸಲಾಗಿದೆ
padding
,background-color
ಮತ್ತುborder-radius
. -
--bs-breadcrumb-divider
CSS ಅನ್ನು ಮರುಸಂಕಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಸುಲಭ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಹೊಸ CSS ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
ಗುಂಡಿಗಳು
-
ಬ್ರೇಕಿಂಗ್ ಟಾಗಲ್ ಬಟನ್ಗಳು , ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಅಥವಾ ರೇಡಿಯೊಗಳೊಂದಿಗೆ, ಇನ್ನು ಮುಂದೆ JavaScript ಅಗತ್ಯವಿಲ್ಲ ಮತ್ತು ಹೊಸ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ. ನಮಗೆ ಇನ್ನು ಮುಂದೆ ಸುತ್ತುವ ಅಂಶದ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ,
.btn-check
ಗೆ<input>
ಮತ್ತು ಅದನ್ನು ಯಾವುದೇ.btn
ತರಗತಿಗಳೊಂದಿಗೆ<label>
. #30650 ನೋಡಿ . ಇದಕ್ಕಾಗಿ ಡಾಕ್ಸ್ ನಮ್ಮ ಬಟನ್ಗಳ ಪುಟದಿಂದ ಹೊಸ ಫಾರ್ಮ್ಗಳ ವಿಭಾಗಕ್ಕೆ ಸರಿಸಲಾಗಿದೆ. -
ಬ್ರೇಕಿಂಗ್ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ
.btn-block
..btn-block
ನಲ್ಲಿ ಬಳಸುವ ಬದಲು,.btn
ನಿಮ್ಮ ಬಟನ್ಗಳನ್ನು ಸುತ್ತಿ.d-grid
ಮತ್ತು.gap-*
ಅಗತ್ಯವಿರುವಷ್ಟು ಜಾಗವನ್ನು ನೀಡುವ ಉಪಯುಕ್ತತೆ. ಅವುಗಳ ಮೇಲೆ ಇನ್ನಷ್ಟು ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಸ್ಪಂದಿಸುವ ತರಗತಿಗಳಿಗೆ ಬದಲಿಸಿ. ಕೆಲವು ಉದಾಹರಣೆಗಳಿಗಾಗಿ ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿ. -
ಹೆಚ್ಚುವರಿ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ಬೆಂಬಲಿಸಲು ನಮ್ಮ
button-variant()
ಮತ್ತು ಮಿಕ್ಸಿನ್ಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.button-outline-variant()
-
ಹೋವರ್ ಮತ್ತು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಹೆಚ್ಚಿದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬಟನ್ಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.
-
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್ಗಳು ಈಗ ಹೊಂದಿವೆ
pointer-events: none;
.
ಕಾರ್ಡ್
-
ಬ್ರೇಕಿಂಗ್
.card-deck
ನಮ್ಮ ಗ್ರಿಡ್ ಪರವಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ . ನಿಮ್ಮ ಕಾರ್ಡ್ಗಳನ್ನು ಕಾಲಮ್ ತರಗತಿಗಳಲ್ಲಿ ಸುತ್ತಿ ಮತ್ತು.row-cols-*
ಕಾರ್ಡ್ ಡೆಕ್ಗಳನ್ನು ಮರುಸೃಷ್ಟಿಸಲು ಮೂಲ ಧಾರಕವನ್ನು ಸೇರಿಸಿ (ಆದರೆ ಸ್ಪಂದಿಸುವ ಜೋಡಣೆಯ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣದೊಂದಿಗೆ). -
ಬ್ರೇಕಿಂಗ್
.card-columns
ಕಲ್ಲಿನ ಪರವಾಗಿ ಕೈಬಿಡಲಾಯಿತು . #28922 ನೋಡಿ . -
ಬ್ರೇಕಿಂಗ್ಹೊಸ ಅಕಾರ್ಡಿಯನ್ ಘಟಕದೊಂದಿಗೆ
.card
ಆಧಾರಿತ ಅಕಾರ್ಡಿಯನ್ ಅನ್ನು ಬದಲಾಯಿಸಲಾಗಿದೆ .
ಏರಿಳಿಕೆ
-
ಡಾರ್ಕ್ ಪಠ್ಯ, ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳಿಗಾಗಿ ಹೊಸ
.carousel-dark
ರೂಪಾಂತರವನ್ನು ಸೇರಿಸಲಾಗಿದೆ (ಹಗುರವಾದ ಹಿನ್ನೆಲೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ). -
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಐಕಾನ್ಗಳಿಂದ ಹೊಸ SVGಗಳೊಂದಿಗೆ ಏರಿಳಿಕೆ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಚೆವ್ರಾನ್ ಐಕಾನ್ಗಳನ್ನು ಬದಲಾಯಿಸಲಾಗಿದೆ .
ಮುಚ್ಚು ಬಟನ್
-
ಬ್ರೇಕಿಂಗ್ಕಡಿಮೆ ಸಾಮಾನ್ಯ ಹೆಸರಿಗೆ ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.close
..btn-close
-
ಮುಚ್ಚು ಬಟನ್ಗಳು ಈಗ HTML ನಲ್ಲಿನ
background-image
ಬದಲಿಗೆ (ಎಂಬೆಡೆಡ್ SVG) ಅನ್ನು ಬಳಸುತ್ತವೆ×
, ನಿಮ್ಮ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಸ್ಪರ್ಶಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. -
ಗಾಢವಾದ ಹಿನ್ನೆಲೆಗಳ ವಿರುದ್ಧ ಹೆಚ್ಚಿನ ಕಾಂಟ್ರಾಸ್ಟ್ ವಜಾಗೊಳಿಸುವ ಐಕಾನ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು
.btn-close-white
ಬಳಸುವ ಹೊಸ ರೂಪಾಂತರವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .filter: invert(1)
ಕುಗ್ಗಿಸು
- ಅಕಾರ್ಡಿಯನ್ಗಳಿಗಾಗಿ ಸ್ಕ್ರಾಲ್ ಆಂಕರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ.
ಡ್ರಾಪ್ಡೌನ್ಗಳು
-
ಆನ್-ಡಿಮಾಂಡ್ ಡಾರ್ಕ್ ಡ್ರಾಪ್ಡೌನ್ಗಳಿಗಾಗಿ ಹೊಸ
.dropdown-menu-dark
ರೂಪಾಂತರ ಮತ್ತು ಸಂಬಂಧಿತ ವೇರಿಯಬಲ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. -
ಗಾಗಿ ಹೊಸ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ
$dropdown-padding-x
. -
ಸುಧಾರಿತ ಕಾಂಟ್ರಾಸ್ಟ್ಗಾಗಿ ಡ್ರಾಪ್ಡೌನ್ ವಿಭಾಜಕವನ್ನು ಡಾರ್ಕ್ ಮಾಡಲಾಗಿದೆ.
-
ಬ್ರೇಕಿಂಗ್ಡ್ರಾಪ್ಡೌನ್ಗಾಗಿ ಎಲ್ಲಾ ಈವೆಂಟ್ಗಳನ್ನು ಈಗ ಡ್ರಾಪ್ಡೌನ್ ಟಾಗಲ್ ಬಟನ್ನಲ್ಲಿ ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ಮೂಲ ಅಂಶಕ್ಕೆ ಬಬಲ್ ಮಾಡಲಾಗುತ್ತದೆ.
-
data-bs-popper="static"
ಡ್ರಾಪ್ಡೌನ್ನ ಸ್ಥಾನೀಕರಣವು ಸ್ಥಿರವಾಗಿರುವಾಗ ಅಥವಾ ಡ್ರಾಪ್ಡೌನ್ ನ್ಯಾವ್ಬಾರ್ನಲ್ಲಿರುವಾಗ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿಸಿವೆ. ಇದನ್ನು ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಿಂದ ಸೇರಿಸಲಾಗಿದೆ ಮತ್ತು ಪಾಪ್ಪರ್ನ ಸ್ಥಾನೀಕರಣದೊಂದಿಗೆ ಮಧ್ಯಪ್ರವೇಶಿಸದೆ ಕಸ್ಟಮ್ ಸ್ಥಾನ ಶೈಲಿಗಳನ್ನು ಬಳಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. -
ಬ್ರೇಕಿಂಗ್
flip
ಸ್ಥಳೀಯ ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಪರವಾಗಿ ಡ್ರಾಪ್ಡೌನ್ ಪ್ಲಗಿನ್ಗಾಗಿ ಆಯ್ಕೆಯನ್ನು ಕೈಬಿಡಲಾಗಿದೆ . ಫ್ಲಿಪ್ ಮಾಡಿಫೈಯರ್ನಲ್ಲಿfallbackPlacements
ಆಯ್ಕೆಗಾಗಿ ಖಾಲಿ ಅರೇ ಅನ್ನು ಹಾದುಹೋಗುವ ಮೂಲಕ ನೀವು ಈಗ ಫ್ಲಿಪ್ಪಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು . -
ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳನ್ನು ಈಗ ಸ್ವಯಂ ಮುಚ್ಚುವ ನಡವಳಿಕೆಯನ್ನು
autoClose
ನಿರ್ವಹಿಸಲು ಹೊಸ ಆಯ್ಕೆಯೊಂದಿಗೆ ಕ್ಲಿಕ್ ಮಾಡಬಹುದು . ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿಸಲು ಒಳಗೆ ಅಥವಾ ಹೊರಗೆ ಕ್ಲಿಕ್ ಅನ್ನು ಸ್ವೀಕರಿಸಲು ನೀವು ಈ ಆಯ್ಕೆಯನ್ನು ಬಳಸಬಹುದು. -
ಡ್ರಾಪ್ಡೌನ್ಗಳು ಈಗ
.dropdown-item
s ನಲ್ಲಿ ಸುತ್ತುವ<li>
s ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ.
ಜಂಬೊಟ್ರಾನ್
- ಬ್ರೇಕಿಂಗ್ಜಂಬೊಟ್ರಾನ್ ಘಟಕವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ ಏಕೆಂದರೆ ಅದನ್ನು ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಪುನರಾವರ್ತಿಸಬಹುದು. ಡೆಮೊಗಾಗಿ ನಮ್ಮ ಹೊಸ ಜಂಬೊಟ್ರಾನ್ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ.
ಪಟ್ಟಿ ಗುಂಪು
- ಪಟ್ಟಿ ಗುಂಪುಗಳಿಗೆ ಹೊಸ
.list-group-numbered
ಪರಿವರ್ತಕವನ್ನು ಸೇರಿಸಲಾಗಿದೆ.
ನವ್ಸ್ ಮತ್ತು ಟ್ಯಾಬ್ಗಳು
- , , , ಮತ್ತು ವರ್ಗಕ್ಕೆ ಹೊಸ ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ
null
.font-size
font-weight
color
:hover
color
.nav-link
ನವಬಾರ್ಸ್
- ಬ್ರೇಕಿಂಗ್Navbars ಈಗ ಒಳಗೆ ಕಂಟೇನರ್ ಅಗತ್ಯವಿದೆ (ಅಂತರ ಅಗತ್ಯತೆಗಳು ಮತ್ತು CSS ಅಗತ್ಯವಿದೆ ತೀವ್ರವಾಗಿ ಸರಳಗೊಳಿಸಲು).
- ಬ್ರೇಕಿಂಗ್ವರ್ಗವನ್ನು ಇನ್ನು
.active
ಮುಂದೆ.nav-item
s ಗೆ ಅನ್ವಯಿಸಲಾಗುವುದಿಲ್ಲ, ಅದನ್ನು ನೇರವಾಗಿ.nav-link
s ನಲ್ಲಿ ಅನ್ವಯಿಸಬೇಕು.
ಆಫ್ಕ್ಯಾನ್ವಾಸ್
- ಹೊಸ ಆಫ್ಕ್ಯಾನ್ವಾಸ್ ಘಟಕವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
ಪುಟ ವಿನ್ಯಾಸ
-
ವಿನ್ಯಾಸದ ಲಿಂಕ್ಗಳು ಈಗ ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದವುಗಳನ್ನು
margin-left
ಹೊಂದಿದ್ದು, ಅವು ಒಂದರಿಂದ ಇನ್ನೊಂದನ್ನು ಬೇರ್ಪಡಿಸಿದಾಗ ಎಲ್ಲಾ ಮೂಲೆಗಳಲ್ಲಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ದುಂಡಾಗಿರುತ್ತದೆ. -
transition
ಪುಟದ ಲಿಂಕ್ಗಳಿಗೆ s ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
ಪಾಪೋವರ್ಸ್
-
ಬ್ರೇಕಿಂಗ್ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಪಾಪೋವರ್ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.arrow
..popover-arrow
-
whiteList
ಗೆ ಆಯ್ಕೆಯನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆallowList
.
ಸ್ಪಿನ್ನರ್ಗಳು
-
ಸ್ಪಿನ್ನರ್ಗಳು ಈಗ
prefers-reduced-motion: reduce
ಅನಿಮೇಷನ್ಗಳನ್ನು ನಿಧಾನಗೊಳಿಸುವ ಮೂಲಕ ಗೌರವಿಸುತ್ತಾರೆ. #31882 ನೋಡಿ . -
ಸುಧಾರಿತ ಸ್ಪಿನ್ನರ್ ಲಂಬ ಜೋಡಣೆ.
ಟೋಸ್ಟ್ಸ್
-
ಟೋಸ್ಟ್ಗಳನ್ನು ಈಗ ಸ್ಥಾನಿಕ ಉಪಯುಕ್ತತೆಗಳ
.toast-container
ಸಹಾಯದಿಂದ a ನಲ್ಲಿ ಇರಿಸಬಹುದು . -
ಡೀಫಾಲ್ಟ್ ಟೋಸ್ಟ್ ಅವಧಿಯನ್ನು 5 ಸೆಕೆಂಡುಗಳಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ.
-
ಟೋಸ್ಟ್ಗಳಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು ಕಾರ್ಯಗಳೊಂದಿಗೆ
overflow: hidden
ಸರಿಯಾದborder-radius
s ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ.calc()
ಸಾಧನಸಲಹೆಗಳು
-
ಬ್ರೇಕಿಂಗ್ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಟೂಲ್ಟಿಪ್ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.arrow
..tooltip-arrow
-
ಬ್ರೇಕಿಂಗ್ಪಾಪ್ಪರ್ ಅಂಶಗಳ ಉತ್ತಮ ನಿಯೋಜನೆಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು
fallbackPlacements
ಬದಲಾಯಿಸಲಾಗಿದೆ .['top', 'right', 'bottom', 'left']
-
ಬ್ರೇಕಿಂಗ್
whiteList
ಗೆ ಆಯ್ಕೆಯನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆallowList
.
ಉಪಯುಕ್ತತೆಗಳು
-
ಬ್ರೇಕಿಂಗ್RTL ಬೆಂಬಲವನ್ನು ಸೇರಿಸುವುದರೊಂದಿಗೆ ದಿಕ್ಕಿನ ಹೆಸರುಗಳ ಬದಲಿಗೆ ತಾರ್ಕಿಕ ಆಸ್ತಿ ಹೆಸರುಗಳನ್ನು ಬಳಸಲು ಹಲವಾರು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ:
- ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.left-*
ಮತ್ತು.right-*
ಗೆ.start-*
ಮತ್ತು.end-*
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.float-left
ಮತ್ತು.float-right
ಗೆ.float-start
ಮತ್ತು.float-end
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.border-left
ಮತ್ತು.border-right
ಗೆ.border-start
ಮತ್ತು.border-end
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.rounded-left
ಮತ್ತು.rounded-right
ಗೆ.rounded-start
ಮತ್ತು.rounded-end
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.ml-*
ಮತ್ತು.mr-*
ಗೆ.ms-*
ಮತ್ತು.me-*
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.pl-*
ಮತ್ತು.pr-*
ಗೆ.ps-*
ಮತ್ತು.pe-*
. - ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.text-left
ಮತ್ತು.text-right
ಗೆ.text-start
ಮತ್ತು.text-end
.
- ಮರುಹೆಸರಿಸಲಾಗಿದೆ
-
ಬ್ರೇಕಿಂಗ್ಡಿಫಾಲ್ಟ್ ಆಗಿ ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.
-
ಹೆಚ್ಚುವರಿ ಅಂಶಗಳಿಗೆ ಹಿನ್ನೆಲೆಯನ್ನು
.bg-body
ತ್ವರಿತವಾಗಿ ಹೊಂದಿಸಲು ಹೊಸ ವರ್ಗವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .<body>
-
, , ಮತ್ತು ಗಾಗಿ ಹೊಸ ಸ್ಥಾನದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ . ಮೌಲ್ಯಗಳು , ಮತ್ತು ಪ್ರತಿ ಆಸ್ತಿಗೆ ಸೇರಿವೆ.
top
right
bottom
left
0
50%
100%
-
ಹೊಸ
.translate-middle-x
ಮತ್ತು.translate-middle-y
ಉಪಯುಕ್ತತೆಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಅಥವಾ ಲಂಬವಾಗಿ ಕೇಂದ್ರ ಸಂಪೂರ್ಣ/ಸ್ಥಿರ ಸ್ಥಾನದ ಅಂಶಗಳಿಗೆ ಸೇರಿಸಲಾಗಿದೆ. -
ಹೊಸ
border-width
ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ . -
ಬ್ರೇಕಿಂಗ್ಎಂದು ಮರುನಾಮಕರಣ
.text-monospace
ಮಾಡಲಾಗಿದೆ.font-monospace
. -
ಬ್ರೇಕಿಂಗ್ಪಠ್ಯವನ್ನು ಮರೆಮಾಡಲು ಇದು ಪುರಾತನ ವಿಧಾನವಾಗಿರುವುದರಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ
.text-hide
, ಅದನ್ನು ಇನ್ನು ಮುಂದೆ ಬಳಸಬಾರದು. -
.fs-*
ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆfont-size
(RFS ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆಯೊಂದಿಗೆ). ಇವುಗಳು HTML ನ ಡೀಫಾಲ್ಟ್ ಶಿರೋನಾಮೆಗಳಂತೆಯೇ ಅದೇ ಪ್ರಮಾಣವನ್ನು ಬಳಸುತ್ತವೆ (1-6, ದೊಡ್ಡದರಿಂದ ಚಿಕ್ಕದಕ್ಕೆ), ಮತ್ತು ಸಾಸ್ ನಕ್ಷೆಯ ಮೂಲಕ ಮಾರ್ಪಡಿಸಬಹುದು. -
ಬ್ರೇಕಿಂಗ್ಸಂಕ್ಷಿಪ್ತತೆ ಮತ್ತು ಸ್ಥಿರತೆಗಾಗಿ ಮರುಹೆಸರಿಸಿದ
.font-weight-*
ಉಪಯುಕ್ತತೆಗಳು ..fw-*
-
ಬ್ರೇಕಿಂಗ್ಸಂಕ್ಷಿಪ್ತತೆ ಮತ್ತು ಸ್ಥಿರತೆಗಾಗಿ ಮರುಹೆಸರಿಸಿದ
.font-style-*
ಉಪಯುಕ್ತತೆಗಳು ..fst-*
-
CSS ಗ್ರಿಡ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಲೇಔಟ್ಗಳಿಗಾಗಿ
.d-grid
ಉಪಯುಕ್ತತೆಗಳು ಮತ್ತು ಹೊಸgap
ಉಪಯುಕ್ತತೆಗಳನ್ನು ( ) ಪ್ರದರ್ಶಿಸಲು ಸೇರಿಸಲಾಗಿದೆ ..gap
-
ಬ್ರೇಕಿಂಗ್ತೆಗೆದುಹಾಕಲಾಗಿದೆ
.rounded-sm
ಮತ್ತುrounded-lg
, ಮತ್ತು ತರಗತಿಗಳ ಹೊಸ ಪ್ರಮಾಣದ ಪರಿಚಯಿಸಲಾಯಿತು,.rounded-0
ಗೆ.rounded-3
. #31687 ನೋಡಿ . -
ಹೊಸ
line-height
ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ:.lh-1
,.lh-sm
,.lh-base
ಮತ್ತು.lh-lg
. ಇಲ್ಲಿ ನೋಡಿ . -
.d-none
ಇತರ ಡಿಸ್ಪ್ಲೇ ಉಪಯುಕ್ತತೆಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ತೂಕವನ್ನು ನೀಡಲು ನಮ್ಮ CSS ನಲ್ಲಿ ಉಪಯುಕ್ತತೆಯನ್ನು ಸರಿಸಲಾಗಿದೆ . -
.visually-hidden-focusable
ಬಳಸಿಕೊಂಡು ಕಂಟೇನರ್ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಸಹಾಯಕವನ್ನು ವಿಸ್ತರಿಸಲಾಗಿದೆ:focus-within
.
ಸಹಾಯಕರು
-
ಬ್ರೇಕಿಂಗ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಎಂಬೆಡ್ ಸಹಾಯಕರನ್ನು ಹೊಸ ವರ್ಗದ ಹೆಸರುಗಳು ಮತ್ತು ಸುಧಾರಿತ ನಡವಳಿಕೆಗಳೊಂದಿಗೆ ಅನುಪಾತ ಸಹಾಯಕರು ಎಂದು ಮರುಹೆಸರಿಸಲಾಗಿದೆ , ಜೊತೆಗೆ ಸಹಾಯಕವಾದ CSS ವೇರಿಯಬಲ್.
- ಆಕಾರ ಅನುಪಾತಕ್ಕೆ ಬದಲಾಯಿಸಲು ತರಗತಿಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ
by
.x
ಉದಾಹರಣೆಗೆ,.ratio-16by9
ಈಗ.ratio-16x9
. .embed-responsive-item
ಸರಳವಾದ ಸೆಲೆಕ್ಟರ್ ಪರವಾಗಿ ನಾವು ಮತ್ತು ಎಲಿಮೆಂಟ್ ಗ್ರೂಪ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಕೈಬಿಟ್ಟಿದ್ದೇವೆ.ratio > *
. ಹೆಚ್ಚಿನ ವರ್ಗದ ಅಗತ್ಯವಿಲ್ಲ, ಮತ್ತು ಅನುಪಾತ ಸಹಾಯಕವು ಈಗ ಯಾವುದೇ HTML ಅಂಶದೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.$embed-responsive-aspect-ratios
ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ ಮತ್ತು ವರ್ಗದ$aspect-ratios
ಹೆಸರು ಮತ್ತು ಶೇಕಡಾವಾರುkey: value
ಜೋಡಿಯಾಗಿ ಸೇರಿಸಲು ಅದರ ಮೌಲ್ಯಗಳನ್ನು ಸರಳೀಕರಿಸಲಾಗಿದೆ.- CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಈಗ ರಚಿಸಲಾಗಿದೆ ಮತ್ತು ಸಾಸ್ ಮ್ಯಾಪ್ನಲ್ಲಿನ ಪ್ರತಿ ಮೌಲ್ಯಕ್ಕೆ ಸೇರಿಸಲಾಗಿದೆ. ಯಾವುದೇ ಕಸ್ಟಮ್ ಆಕಾರ ಅನುಪಾತವನ್ನು ರಚಿಸಲು
--bs-aspect-ratio
ವೇರಿಯೇಬಲ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಿ ..ratio
- ಆಕಾರ ಅನುಪಾತಕ್ಕೆ ಬದಲಾಯಿಸಲು ತರಗತಿಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ
-
ಬ್ರೇಕಿಂಗ್ “ಸ್ಕ್ರೀನ್ ರೀಡರ್” ತರಗತಿಗಳು ಈಗ “ದೃಶ್ಯವಾಗಿ ಮರೆಮಾಡಿದ” ತರಗತಿಗಳಾಗಿವೆ .
- ನಿಂದ Sass ಫೈಲ್ ಅನ್ನು
scss/helpers/_screenreaders.scss
ಬದಲಾಯಿಸಲಾಗಿದೆscss/helpers/_visually-hidden.scss
- ಮರುಹೆಸರಿಸಲಾಗಿದೆ
.sr-only
ಮತ್ತು.sr-only-focusable
ಗೆ.visually-hidden
ಮತ್ತು.visually-hidden-focusable
- ಗೆ ಮರುಹೆಸರಿಸಲಾಗಿದೆ
sr-only()
ಮತ್ತುsr-only-focusable()
ಮಿಕ್ಸ್ಇನ್ಗಳುvisually-hidden()
ಮತ್ತುvisually-hidden-focusable()
.
- ನಿಂದ Sass ಫೈಲ್ ಅನ್ನು
-
bootstrap-utilities.css
ಈಗ ನಮ್ಮ ಸಹಾಯಕರನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ. ಇನ್ನು ಮುಂದೆ ಕಸ್ಟಮ್ ಬಿಲ್ಡ್ಗಳಲ್ಲಿ ಸಹಾಯಕರನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಅಗತ್ಯವಿಲ್ಲ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
-
jQuery ಅವಲಂಬನೆಯನ್ನು ಕೈಬಿಡಲಾಗಿದೆ ಮತ್ತು ಸಾಮಾನ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಪ್ಲಗಿನ್ಗಳನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
-
ಬ್ರೇಕಿಂಗ್ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ಗಳಿಗೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಈಗ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಕಾರ್ಯವನ್ನು ಮೂರನೇ ವ್ಯಕ್ತಿಗಳಿಂದ ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಕೋಡ್ನಿಂದ ಪ್ರತ್ಯೇಕಿಸಲು ಸಹಾಯ ಮಾಡಲು ನೇಮ್ಸ್ಪೇಸ್ ಮಾಡಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನಾವು
data-bs-toggle
ಬದಲಿಗೆ ಬಳಸುತ್ತೇವೆdata-toggle
. -
ಎಲ್ಲಾ ಪ್ಲಗಿನ್ಗಳು ಈಗ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸಬಹುದು. ಪ್ಲಗಿನ್ನ ಹೊಸ ನಿದರ್ಶನವನ್ನು ರಚಿಸಲು ನೀವು DOM ಅಂಶ ಅಥವಾ ಯಾವುದೇ ಮಾನ್ಯ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ರವಾನಿಸಬಹುದು:
const modal = new bootstrap.Modal('#myModal') const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುವ ಕಾರ್ಯವಾಗಿ ರವಾನಿಸಬಹುದು, ಇದರಿಂದ ನೀವು ಈ ಡೀಫಾಲ್ಟ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನಿಮ್ಮ ರೀತಿಯಲ್ಲಿ ವಿಲೀನಗೊಳಿಸಬಹುದು. ಡ್ರಾಪ್ಡೌನ್ಗಳು, ಪಾಪೋವರ್ಗಳು ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. -
ಪಾಪ್ಪರ್ ಅಂಶಗಳ ಉತ್ತಮ ನಿಯೋಜನೆಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು
fallbackPlacements
ಬದಲಾಯಿಸಲಾಗಿದೆ . ಡ್ರಾಪ್ಡೌನ್ಗಳು, ಪಾಪೋವರ್ಗಳು ಮತ್ತು ಟೂಲ್ಟಿಪ್ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.['top', 'right', 'bottom', 'left']
-
_getInstance()
→ ನಂತಹ ಸಾರ್ವಜನಿಕ ಸ್ಥಿರ ವಿಧಾನಗಳಿಂದ ಅಂಡರ್ಸ್ಕೋರ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆgetInstance()
.