v4 ಗೆ ವಲಸೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಸಂಪೂರ್ಣ ಯೋಜನೆಯ ಪ್ರಮುಖ ಪುನಃ ಬರೆಯುವಿಕೆಯಾಗಿದೆ. ಅತ್ಯಂತ ಗಮನಾರ್ಹವಾದ ಬದಲಾವಣೆಗಳನ್ನು ಕೆಳಗೆ ಸಂಕ್ಷೇಪಿಸಲಾಗಿದೆ, ನಂತರ ಸಂಬಂಧಿತ ಘಟಕಗಳಿಗೆ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಲಾಗಿದೆ.

ಸ್ಥಿರ ಬದಲಾವಣೆಗಳು

ಬೀಟಾ 3 ರಿಂದ ನಮ್ಮ ಸ್ಥಿರ v4.x ಬಿಡುಗಡೆಗೆ ಚಲಿಸುವಾಗ, ಯಾವುದೇ ಬ್ರೇಕಿಂಗ್ ಬದಲಾವಣೆಗಳಿಲ್ಲ, ಆದರೆ ಕೆಲವು ಗಮನಾರ್ಹ ಬದಲಾವಣೆಗಳಿವೆ.

ಮುದ್ರಣ

• ಮುರಿದ ಮುದ್ರಣ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸರಿಪಡಿಸಲಾಗಿದೆ. ಹಿಂದೆ, .d-print-*ವರ್ಗವನ್ನು ಬಳಸುವುದು ಅನಿರೀಕ್ಷಿತವಾಗಿ ಯಾವುದೇ ಇತರ .d-*ವರ್ಗವನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ. ಈಗ, ಅವು ನಮ್ಮ ಇತರ ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತವೆ ಮತ್ತು ಆ ಮಾಧ್ಯಮಕ್ಕೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತವೆ ( @media print).

• ಇತರ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಹೊಂದಿಸಲು ಲಭ್ಯವಿರುವ ಮುದ್ರಣ ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳನ್ನು ವಿಸ್ತರಿಸಲಾಗಿದೆ. ಬೀಟಾ 3 ಮತ್ತು ಹಳೆಯದು ಮಾತ್ರ block, inline-block, inlineಮತ್ತು none. ಸ್ಥಿರ v4 ಸೇರಿಸಲಾಗಿದೆ flex, inline-flex, table, table-rowಮತ್ತು table-cell.

• ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಹೊಸ ಮುದ್ರಣ ಶೈಲಿಗಳೊಂದಿಗೆ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಸ್ಥಿರ ಮುದ್ರಣ ಪೂರ್ವವೀಕ್ಷಣೆ ರೆಂಡರಿಂಗ್ @page size.

ಬೀಟಾ 3 ಬದಲಾವಣೆಗಳು

ಬೀಟಾ ಹಂತದಲ್ಲಿ ಬೀಟಾ 2 ನಮ್ಮ ಬ್ರೇಕಿಂಗ್ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಿದೆ, ಆದರೆ ಬೀಟಾ 3 ಬಿಡುಗಡೆಯಲ್ಲಿ ನಾವು ಇನ್ನೂ ಕೆಲವನ್ನು ಪರಿಹರಿಸಬೇಕಾಗಿದೆ. ನೀವು ಬೀಟಾ 2 ಅಥವಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಯಾವುದೇ ಹಳೆಯ ಆವೃತ್ತಿಯಿಂದ ಬೀಟಾ 3 ಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತಿದ್ದರೆ ಈ ಬದಲಾವಣೆಗಳು ಅನ್ವಯಿಸುತ್ತವೆ.

ವಿವಿಧ

• ಬಳಕೆಯಾಗದ $thumbnail-transitionವೇರಿಯಬಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ನಾವು ಯಾವುದನ್ನೂ ಬದಲಾಯಿಸುತ್ತಿಲ್ಲ, ಆದ್ದರಿಂದ ಇದು ಕೇವಲ ಹೆಚ್ಚುವರಿ ಕೋಡ್ ಆಗಿದೆ.
• npm ಪ್ಯಾಕೇಜ್ ಇನ್ನು ಮುಂದೆ ನಮ್ಮ ಮೂಲ ಮತ್ತು dist ಫೈಲ್‌ಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದೇ ಫೈಲ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದಿಲ್ಲ; ನೀವು ಅವುಗಳನ್ನು ಅವಲಂಬಿಸಿದ್ದರೆ ಮತ್ತು node_modulesಫೋಲ್ಡರ್ ಮೂಲಕ ನಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಚಾಲನೆ ಮಾಡುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಕೆಲಸದ ಹರಿವನ್ನು ನೀವು ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕು.

ರೂಪಗಳು

• ಕಸ್ಟಮ್ ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೋ ಎರಡನ್ನೂ ಪುನಃ ಬರೆಯಿರಿ. ಈಗ, ಎರಡೂ ಹೊಂದಾಣಿಕೆಯಾಗುವ HTML ರಚನೆಯನ್ನು ಹೊಂದಿವೆ ( <div>ಸಹೋದರರೊಂದಿಗೆ ಹೊರಭಾಗ <input>ಮತ್ತು <label>) ಮತ್ತು ಒಂದೇ ವಿನ್ಯಾಸ ಶೈಲಿಗಳು (ಸ್ಟ್ಯಾಕ್ ಮಾಡಿದ ಡೀಫಾಲ್ಟ್, ಮಾರ್ಪಡಿಸುವ ವರ್ಗದೊಂದಿಗೆ ಇನ್‌ಲೈನ್). ಇನ್‌ಪುಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಲೇಬಲ್ ಅನ್ನು ಶೈಲಿ ಮಾಡಲು ಇದು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, disabledಗುಣಲಕ್ಷಣಕ್ಕೆ ಬೆಂಬಲವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ (ಹಿಂದೆ ಪೋಷಕ ವರ್ಗದ ಅಗತ್ಯವಿದೆ) ಮತ್ತು ನಮ್ಮ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣವನ್ನು ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿಸುತ್ತದೆ.

  ಇದರ ಭಾಗವಾಗಿ, ನಾವು background-imageಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳಲ್ಲಿ ಬಹು ಸೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು CSS ಅನ್ನು ಬದಲಾಯಿಸಿದ್ದೇವೆ. ಹಿಂದೆ, ಈಗ ತೆಗೆದುಹಾಕಲಾದ .custom-control-indicatorಅಂಶವು ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಗ್ರೇಡಿಯಂಟ್ ಮತ್ತು SVG ಐಕಾನ್ ಅನ್ನು ಹೊಂದಿತ್ತು. ಹಿನ್ನಲೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಎಂದರೆ ನೀವು ಪ್ರತಿ ಬಾರಿ ಒಂದನ್ನು ಬದಲಾಯಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲವನ್ನೂ ಬದಲಾಯಿಸುವುದು. ಈಗ, ನಾವು .custom-control-label::beforeಫಿಲ್ ಮತ್ತು ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ ಮತ್ತು .custom-control-label::afterಐಕಾನ್ ಅನ್ನು ನಿಭಾಯಿಸುತ್ತೇವೆ.

  ಕಸ್ಟಮ್ ಚೆಕ್ ಇನ್‌ಲೈನ್ ಮಾಡಲು, ಸೇರಿಸಿ .custom-control-inline.

• ಇನ್‌ಪುಟ್-ಆಧಾರಿತ ಬಟನ್ ಗುಂಪುಗಳಿಗಾಗಿ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ. [data-toggle="buttons"] { }ಶೈಲಿ ಮತ್ತು ನಡವಳಿಕೆಗೆ ಬದಲಾಗಿ , ನಾವು JS ನಡವಳಿಕೆಗಳಿಗಾಗಿ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಹೊಸ ವರ್ಗವನ್ನು dataಅವಲಂಬಿಸಿರುತ್ತೇವೆ ..btn-group-toggle

• .col-form-legendಸ್ವಲ್ಪ ಸುಧಾರಿಸಿದ ಪರವಾಗಿ ತೆಗೆದುಹಾಕಲಾಗಿದೆ .col-form-label. ಈ ರೀತಿಯಲ್ಲಿ .col-form-label-smಮತ್ತು ಸುಲಭವಾಗಿ ಅಂಶಗಳ .col-form-label-lgಮೇಲೆ ಬಳಸಬಹುದು .<legend>

• ಕಸ್ಟಮ್ ಫೈಲ್ ಇನ್‌ಪುಟ್‌ಗಳು ತಮ್ಮ $custom-file-textಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗೆ ಬದಲಾವಣೆಯನ್ನು ಸ್ವೀಕರಿಸಿವೆ. ಇದು ಇನ್ನು ಮುಂದೆ ನೆಸ್ಟೆಡ್ ಸಾಸ್ ಮ್ಯಾಪ್ ಆಗಿಲ್ಲ ಮತ್ತು ಈಗ ಕೇವಲ ಒಂದು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಮಾತ್ರ ಪವರ್ ಮಾಡುತ್ತದೆ - Browseಬಟನ್ ಈಗ ನಮ್ಮ ಸಾಸ್‌ನಿಂದ ಉತ್ಪತ್ತಿಯಾಗುವ ಏಕೈಕ ಹುಸಿ-ಅಂಶವಾಗಿದೆ. ಪಠ್ಯವು Choose fileಈಗ ನಿಂದ ಬಂದಿದೆ .custom-file-label.

ಇನ್ಪುಟ್ ಗುಂಪುಗಳು

• ಇನ್‌ಪುಟ್ ಗುಂಪಿನ ಆಡ್‌ಆನ್‌ಗಳು ಈಗ ಇನ್‌ಪುಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅವುಗಳ ನಿಯೋಜನೆಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿವೆ. ನಾವು ಕೈಬಿಟ್ಟಿದ್ದೇವೆ .input-group-addonಮತ್ತು .input-group-btnಎರಡು ಹೊಸ ತರಗತಿಗಳಿಗೆ, .input-group-prependಮತ್ತು .input-group-append. ನಮ್ಮ CSS ನ ಹೆಚ್ಚಿನದನ್ನು ಸರಳಗೊಳಿಸುವ ಮೂಲಕ ನೀವು ಈಗ ಅನುಬಂಧ ಅಥವಾ ಪೂರ್ವಭಾವಿಯಾಗಿ ಸ್ಪಷ್ಟವಾಗಿ ಬಳಸಬೇಕು. ಒಂದು ಅನುಬಂಧದಲ್ಲಿ ಅಥವಾ ಪೂರ್ವಭಾವಿಯಾಗಿ, ನಿಮ್ಮ ಬಟನ್‌ಗಳನ್ನು ಎಲ್ಲಿಯೂ ಇರುವಂತೆ ಇರಿಸಿ, ಆದರೆ ಪಠ್ಯವನ್ನು ರಲ್ಲಿ ಸುತ್ತಿ .input-group-text.

• ಬಹು ಇನ್‌ಪುಟ್‌ಗಳಂತೆ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳು ಈಗ ಬೆಂಬಲಿತವಾಗಿದೆ (ಆದರೂ ನೀವು ಪ್ರತಿ ಗುಂಪಿಗೆ ಒಂದು ಇನ್‌ಪುಟ್ ಅನ್ನು ಮಾತ್ರ ಮೌಲ್ಯೀಕರಿಸಬಹುದು).

• ಸೈಜಿಂಗ್ ತರಗತಿಗಳು ಪೋಷಕರ ಮೇಲೆ ಇರಬೇಕು .input-groupಮತ್ತು ವೈಯಕ್ತಿಕ ರೂಪ ಅಂಶಗಳಲ್ಲ.

ಬೀಟಾ 2 ಬದಲಾವಣೆಗಳು

ಬೀಟಾದಲ್ಲಿರುವಾಗ, ನಾವು ಯಾವುದೇ ಬ್ರೇಕಿಂಗ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೊಂದಿರದ ಗುರಿಯನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಆದಾಗ್ಯೂ, ಎಲ್ಲವೂ ಯಾವಾಗಲೂ ಯೋಜಿಸಿದಂತೆ ನಡೆಯುವುದಿಲ್ಲ. ಬೀಟಾ 1 ರಿಂದ ಬೀಟಾ 2 ಗೆ ಚಲಿಸುವಾಗ ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಬ್ರೇಕಿಂಗ್ ಬದಲಾವಣೆಗಳನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.

ಬ್ರೇಕಿಂಗ್

• $badge-colorವೇರಿಯೇಬಲ್ ಮತ್ತು ಅದರ ಬಳಕೆಯನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ .badge. colorಅನ್ನು ಆಧರಿಸಿ ಆಯ್ಕೆ ಮಾಡಲು ನಾವು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತೇವೆ background-color, ಆದ್ದರಿಂದ ವೇರಿಯಬಲ್ ಅನಗತ್ಯವಾಗಿರುತ್ತದೆ.
• CSS ಸ್ಥಳೀಯ ಫಿಲ್ಟರ್‌ನೊಂದಿಗೆ ಸಂಘರ್ಷವನ್ನು ಮುರಿಯುವುದನ್ನು ತಪ್ಪಿಸಲು grayscale()ಕಾರ್ಯವನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ .gray()grayscale
• ಮರುಹೆಸರಿಸಲಾಗಿದೆ .table-inverse, .thead-inverseಮತ್ತು .thead-defaultಗೆ .*-darkಮತ್ತು .*-light, ಬೇರೆಡೆ ಬಳಸಿದ ನಮ್ಮ ಬಣ್ಣದ ಯೋಜನೆಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.
• ರೆಸ್ಪಾನ್ಸಿವ್ ಕೋಷ್ಟಕಗಳು ಈಗ ಪ್ರತಿ ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ ತರಗತಿಗಳನ್ನು ರಚಿಸುತ್ತವೆ. ಇದು ಬೀಟಾ 1 ನಿಂದ ಮುರಿದುಹೋಗುತ್ತದೆ, ಇದರಲ್ಲಿ .table-responsiveನೀವು ಬಳಸುತ್ತಿರುವಂತೆಯೇ ಇರುತ್ತದೆ .table-responsive-md. ನೀವು ಈಗ ಬಳಸಬಹುದು .table-responsiveಅಥವಾ .table-responsive-{sm,md,lg,xl}ಅಗತ್ಯವಿರುವಂತೆ.
• ಪರ್ಯಾಯಗಳಿಗೆ (ಉದಾ, ನೂಲು ಅಥವಾ npm) ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಅಸಮ್ಮತಿಸಲಾಗಿದೆ ಎಂದು ಬೋವರ್ ಬೆಂಬಲವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ. ವಿವರಗಳಿಗಾಗಿ bower/bower#2298 ನೋಡಿ.
• ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ಇನ್ನೂ jQuery 1.9.1 ಅಥವಾ ಹೆಚ್ಚಿನ ಅಗತ್ಯವಿದೆ, ಆದರೆ v3.x ನ ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಬೆಂಬಲಿಸುವ ಜೊತೆಗೆ v3.x ಕೆಲವು ಭದ್ರತಾ ಪರಿಹಾರಗಳನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಆವೃತ್ತಿ 3.x ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಸಲಹೆ ನೀಡಲಾಗಿದೆ.
• ಬಳಕೆಯಾಗದ .form-control-labelವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ನೀವು ಈ ವರ್ಗವನ್ನು ಬಳಸಿದರೆ, ಇದು ಸಮತಲ ರೂಪದ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಅದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಇನ್‌ಪುಟ್‌ನೊಂದಿಗೆ .col-form-labelಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುವ ವರ್ಗದ ನಕಲು.<label>
• color-yiqಆಸ್ತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಮಿಕ್ಸಿನ್‌ನಿಂದ colorಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುವ ಕಾರ್ಯಕ್ಕೆ ಬದಲಾಯಿಸಲಾಗಿದೆ, ಇದು ಯಾವುದೇ CSS ಆಸ್ತಿಗಾಗಿ ಅದನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಬದಲಿಗೆ color-yiq(#000), ನೀವು ಬರೆಯಲು ಬಯಸುವ color: color-yiq(#000);.

ಮುಖ್ಯಾಂಶಗಳು

• pointer-eventsಮಾದರಿಗಳಲ್ಲಿ ಹೊಸ ಬಳಕೆಯನ್ನು ಪರಿಚಯಿಸಲಾಗಿದೆ . ಕಸ್ಟಮ್ ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ಗಾಗಿ ಹೊರಭಾಗವು .modal-dialogಈವೆಂಟ್‌ಗಳ ಮೂಲಕ ಹಾದುಹೋಗುತ್ತದೆ pointer-events: none(ಯಾವುದೇ ಕ್ಲಿಕ್‌ಗಳಿಗಾಗಿ ಅದನ್ನು ಕೇಳಲು ಸಾಧ್ಯವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ .modal-backdrop), ಮತ್ತು ನಂತರ ಅದನ್ನು ನೈಜವಾಗಿ .modal-contentಎದುರಿಸುತ್ತದೆ pointer-events: auto.

ಸಾರಾಂಶ

v3 ರಿಂದ v4 ಗೆ ಚಲಿಸುವಾಗ ನೀವು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸುವ ದೊಡ್ಡ ಟಿಕೆಟ್ ಐಟಂಗಳು ಇಲ್ಲಿವೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ

• IE8, IE9 ಮತ್ತು iOS 6 ಬೆಂಬಲವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ. v4 ಈಗ IE10+ ಮತ್ತು iOS 7+ ಮಾತ್ರ. ಅವುಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಅಗತ್ಯವಿರುವ ಸೈಟ್‌ಗಳಿಗಾಗಿ, v3 ಬಳಸಿ.
• Android v5.0 Lollipop ನ ಬ್ರೌಸರ್ ಮತ್ತು WebView ಗೆ ಅಧಿಕೃತ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಲಾಗಿದೆ. Android ಬ್ರೌಸರ್ ಮತ್ತು WebView ನ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳು ಅನಧಿಕೃತವಾಗಿ ಮಾತ್ರ ಬೆಂಬಲಿತವಾಗಿವೆ.

ಜಾಗತಿಕ ಬದಲಾವಣೆಗಳು

• Flexbox ಅನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ. ಸಾಮಾನ್ಯವಾಗಿ ಇದರರ್ಥ ಫ್ಲೋಟ್‌ಗಳಿಂದ ದೂರ ಸರಿಯುವುದು ಮತ್ತು ನಮ್ಮ ಘಟಕಗಳಾದ್ಯಂತ ಹೆಚ್ಚು.
• ನಮ್ಮ ಮೂಲ CSS ಫೈಲ್‌ಗಳಿಗಾಗಿ Less ನಿಂದ Sass ಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ .
• ಸಾಧನದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗಳು ಪ್ರಕಾರದ ಗಾತ್ರದಿಂದ ಪ್ರಭಾವಿತವಾಗದ ಕಾರಣ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಮತ್ತು ಗ್ರಿಡ್ ನಡವಳಿಕೆಗಾಗಿ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಇನ್ನೂ ಬಳಸಲಾಗಿದ್ದರೂ, ನಮ್ಮ ಪ್ರಾಥಮಿಕ CSS ಘಟಕದಿಂದ ಬದಲಾಯಿಸಲಾಗಿದೆ px.rem
• ಜಾಗತಿಕ ಫಾಂಟ್-ಗಾತ್ರವು ನಿಂದ 14pxಗೆ ಹೆಚ್ಚಾಗಿದೆ 16px.
• ಐದನೇ ಆಯ್ಕೆಯನ್ನು ಸೇರಿಸಲು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳನ್ನು ಪರಿಷ್ಕರಿಸಲಾಗಿದೆ (ಸಣ್ಣ ಸಾಧನಗಳನ್ನು 576pxಮತ್ತು ಕೆಳಗಿನ ಸಾಧನಗಳನ್ನು ಉದ್ದೇಶಿಸಿ) ಮತ್ತು -xsಆ ತರಗತಿಗಳಿಂದ ಇನ್ಫಿಕ್ಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಉದಾಹರಣೆ: .col-6.col-sm-4.col-md-3.
• SCSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೂಲಕ ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದಾದ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಪ್ರತ್ಯೇಕ ಐಚ್ಛಿಕ ಥೀಮ್ ಅನ್ನು ಬದಲಾಯಿಸಲಾಗಿದೆ (ಉದಾ, $enable-gradients: true).
• ಗ್ರಂಟ್ ಬದಲಿಗೆ ಎನ್‌ಪಿಎಂ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಸರಣಿಯನ್ನು ಬಳಸಲು ಬಿಲ್ಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಕೂಲಂಕಷವಾಗಿ ಪರಿಶೀಲಿಸಲಾಗಿದೆ. ಎಲ್ಲಾ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ ನೋಡಿ package.json, ಅಥವಾ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿ ಅಗತ್ಯಗಳಿಗಾಗಿ ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೀಡ್‌ಮೆ.
• ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯಿಲ್ಲದ ಬಳಕೆಯನ್ನು ಇನ್ನು ಮುಂದೆ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
• ಹೆಚ್ಚು ವ್ಯಾಪಕವಾದ ಸೆಟಪ್ ದಸ್ತಾವೇಜನ್ನು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಬಿಲ್ಡ್‌ಗಳ ಪರವಾಗಿ ಆನ್‌ಲೈನ್ ಕಸ್ಟೊಮೈಜರ್ ಅನ್ನು ಕೈಬಿಡಲಾಗಿದೆ.
• ಸಾಮಾನ್ಯ CSS ಆಸ್ತಿ-ಮೌಲ್ಯದ ಜೋಡಿಗಳು ಮತ್ತು ಅಂಚು/ಪ್ಯಾಡಿಂಗ್ ಅಂತರ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳಿಗಾಗಿ ಡಜನ್ಗಟ್ಟಲೆ ಹೊಸ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಸರಿಸಲಾಗಿದೆ.
  • ಗ್ರಿಡ್ ಮಿಕ್ಸಿನ್ಸ್ ಮತ್ತು ಪೂರ್ವನಿರ್ಧರಿತ ತರಗತಿಗಳಲ್ಲಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಲಾಗಿದೆ.
  • ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ಭಾಗವಾಗಿ, ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಜೋಡಣೆ ವರ್ಗಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ.
• ಗ್ರಿಡ್ ವರ್ಗದ ಹೆಸರುಗಳು ಮತ್ತು ಹೊಸ ಗ್ರಿಡ್ ಶ್ರೇಣಿಯನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.
  • ಹೆಚ್ಚು ಹರಳಿನ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಕೆಳಗೆ ಹೊಸ smಗ್ರಿಡ್ ಶ್ರೇಣಿಯನ್ನು ಸೇರಿಸಲಾಗಿದೆ. 768pxನಾವು ಈಗ xs, sm, md, lgಮತ್ತು xl. ಇದರರ್ಥ ಪ್ರತಿ ಹಂತವನ್ನು ಒಂದು ಹಂತಕ್ಕೆ ಹೆಚ್ಚಿಸಲಾಗಿದೆ (ಆದ್ದರಿಂದ .col-md-6v3 ನಲ್ಲಿ ಈಗ .col-lg-6v4 ನಲ್ಲಿದೆ).
  • xsಗ್ರಿಡ್ ವರ್ಗಗಳನ್ನು ಹೆಚ್ಚು ನಿಖರವಾಗಿ ಪ್ರತಿನಿಧಿಸಲು ಇನ್ಫಿಕ್ಸ್ ಅಗತ್ಯವಿಲ್ಲ ಎಂದು ಮಾರ್ಪಡಿಸಲಾಗಿದೆ ಮತ್ತು ಅವರು min-width: 0ಸೆಟ್ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯವಲ್ಲ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತಾರೆ. ಬದಲಿಗೆ .col-xs-6, ಅದು ಈಗ .col-6. ಎಲ್ಲಾ ಇತರ ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳಿಗೆ infix ಅಗತ್ಯವಿರುತ್ತದೆ (ಉದಾ, sm).
• ಗ್ರಿಡ್ ಗಾತ್ರಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.
  • ಗ್ರಿಡ್ ಗಟರ್‌ಗಳು ಈಗ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಹೊಂದಿವೆ ಆದ್ದರಿಂದ ನೀವು ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಗಟರ್ ಅಗಲಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
  • ಪೂರ್ವಸಿದ್ಧತಾ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಗ್ರಿಡ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ ಮತ್ತು ಪ್ರತ್ಯೇಕ ಕಾಲಮ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು make-col-readya .make-colflexmax-width
  • ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಮೀಡಿಯಾ ಕ್ವೆರಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಕಂಟೇನರ್ ಅಗಲಗಳನ್ನು ಹೊಸ ಗ್ರಿಡ್ ಶ್ರೇಣಿಯನ್ನು ಲೆಕ್ಕಹಾಕಲು ಮತ್ತು ಕಾಲಮ್‌ಗಳನ್ನು 12ಅವುಗಳ ಗರಿಷ್ಠ ಅಗಲದಿಂದ ಸಮವಾಗಿ ಭಾಗಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
  • ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಕಂಟೇನರ್ ಅಗಲಗಳನ್ನು ಈಗ ಕೈಬೆರಳೆಣಿಕೆಯ ಪ್ರತ್ಯೇಕ ವೇರಿಯಬಲ್‌ಗಳ ಬದಲಿಗೆ ಸಾಸ್ ನಕ್ಷೆಗಳ ಮೂಲಕ ( $grid-breakpointsಮತ್ತು ) ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. $container-max-widthsಇವುಗಳು @screen-*ಅಸ್ಥಿರಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬದಲಾಯಿಸುತ್ತವೆ ಮತ್ತು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
  • ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗಳೂ ಬದಲಾಗಿವೆ. ಪ್ರತಿ ಬಾರಿಯೂ ಅದೇ ಮೌಲ್ಯದೊಂದಿಗೆ ನಮ್ಮ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆ ಘೋಷಣೆಗಳನ್ನು ಪುನರಾವರ್ತಿಸುವ ಬದಲು, ನಾವು ಈಗ ಹೊಂದಿದ್ದೇವೆ @include media-breakpoint-up/down/only. ಈಗ, ಬರೆಯುವ ಬದಲು @media (min-width: @screen-sm-min) { ... }, ನೀವು ಬರೆಯಬಹುದು @include media-breakpoint-up(sm) { ... }.

ಘಟಕಗಳು

• ಪ್ಯಾನೆಲ್‌ಗಳು, ಥಂಬ್‌ನೇಲ್‌ಗಳು, ಮತ್ತು ವೆಲ್‌ಗಳು ಹೊಸ ಆಲ್-ಒಳಗೊಳ್ಳುವ ಘಟಕ, ಕಾರ್ಡ್‌ಗಳಿಗಾಗಿ .
• Glyphicons ಐಕಾನ್ ಫಾಂಟ್ ಅನ್ನು ಕೈಬಿಡಲಾಗಿದೆ. ನಿಮಗೆ ಐಕಾನ್‌ಗಳ ಅಗತ್ಯವಿದ್ದರೆ, ಕೆಲವು ಆಯ್ಕೆಗಳು:
  • Glyphicons ನ ಅಪ್‌ಸ್ಟ್ರೀಮ್ ಆವೃತ್ತಿ
  • ಆಕ್ಟಿಕಾನ್ಸ್
  • ಫಾಂಟ್ ಅದ್ಭುತ
  • ಪರ್ಯಾಯಗಳ ಪಟ್ಟಿಗಾಗಿ ವಿಸ್ತರಣೆ ಪುಟವನ್ನು ನೋಡಿ . ಹೆಚ್ಚುವರಿ ಸಲಹೆಗಳನ್ನು ಹೊಂದಿರುವಿರಾ? ದಯವಿಟ್ಟು ಸಮಸ್ಯೆ ಅಥವಾ PR ಅನ್ನು ತೆರೆಯಿರಿ.
• ಅಫಿಕ್ಸ್ jQuery ಪ್ಲಗಿನ್ ಅನ್ನು ಕೈಬಿಡಲಾಗಿದೆ.
  • position: stickyಬದಲಿಗೆ ಬಳಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ . HTML5 ಅನ್ನು ನೋಡಿ ವಿವರಗಳು ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಪಾಲಿಫಿಲ್ ಶಿಫಾರಸುಗಳಿಗಾಗಿ ದಯವಿಟ್ಟು ನಮೂದಿಸಿ. @supportsಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಯಮವನ್ನು ಬಳಸುವುದು ಒಂದು ಸಲಹೆಯಾಗಿದೆ (ಉದಾ, @supports (position: sticky) { ... })
  • ಹೆಚ್ಚುವರಿ, ನಾನ್-ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು Affix ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, positionಪಾಲಿಫಿಲ್‌ಗಳು ನಿಮ್ಮ ಬಳಕೆಯ ಪ್ರಕರಣವನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಅಂತಹ ಬಳಕೆಗಳಿಗೆ ಒಂದು ಆಯ್ಕೆಯು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ScrollPos-Styler ಲೈಬ್ರರಿಯಾಗಿದೆ.
• ಇದು ಮೂಲಭೂತವಾಗಿ ಸ್ವಲ್ಪ ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಬಟನ್‌ಗಳಾಗಿರುವುದರಿಂದ ಪೇಜರ್ ಘಟಕವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .
• ಹೆಚ್ಚು-ನಿರ್ದಿಷ್ಟ ಮಕ್ಕಳ ಆಯ್ಕೆಗಳ ಬದಲಿಗೆ ಹೆಚ್ಚು ಅನ್-ನೆಸ್ಟೆಡ್ ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಲು ಬಹುತೇಕ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ಮರುಫಲಕ ಮಾಡಲಾಗಿದೆ.

ಘಟಕದ ಮೂಲಕ

ಈ ಪಟ್ಟಿಯು v3.xx ಮತ್ತು v4.0.0 ನಡುವಿನ ಘಟಕದ ಮೂಲಕ ಪ್ರಮುಖ ಬದಲಾವಣೆಗಳನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ.

ರೀಬೂಟ್ ಮಾಡಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಗೆ ಹೊಸದು ರೀಬೂಟ್ ಆಗಿದೆ , ಇದು ನಮ್ಮದೇ ಆದ ಸ್ವಲ್ಪ ಅಭಿಪ್ರಾಯದ ಮರುಹೊಂದಿಸುವ ಶೈಲಿಗಳೊಂದಿಗೆ ಸಾಧಾರಣಗೊಳಿಸುವುದರ ಮೇಲೆ ನಿರ್ಮಿಸುವ ಹೊಸ ಸ್ಟೈಲ್‌ಶೀಟ್ ಆಗಿದೆ. ಈ ಫೈಲ್‌ನಲ್ಲಿ ಕಂಡುಬರುವ ಆಯ್ಕೆದಾರರು ಅಂಶಗಳನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತಾರೆ-ಇಲ್ಲಿ ಯಾವುದೇ ತರಗತಿಗಳಿಲ್ಲ. ಇದು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ವಿಧಾನಕ್ಕಾಗಿ ನಮ್ಮ ಘಟಕ ಶೈಲಿಗಳಿಂದ ನಮ್ಮ ಮರುಹೊಂದಿಸುವ ಶೈಲಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಇದು ಒಳಗೊಂಡಿರುವ ಕೆಲವು ಪ್ರಮುಖ ರೀಸೆಟ್‌ಗಳೆಂದರೆ ಬದಲಾವಣೆ, ಹಲವು ಅಂಶಗಳ ಮೇಲೆ ಘಟಕಗಳಿಗೆ box-sizing: border-boxಚಲಿಸುವುದು , ಲಿಂಕ್ ಶೈಲಿಗಳು ಮತ್ತು ಹಲವು ಫಾರ್ಮ್ ಅಂಶ ಮರುಹೊಂದಿಕೆಗಳು.emrem

ಮುದ್ರಣಕಲೆ

• .text-ಎಲ್ಲಾ ಉಪಯುಕ್ತತೆಗಳನ್ನು _utilities.scssಫೈಲ್‌ಗೆ ಸರಿಸಲಾಗಿದೆ .
• .page-headerಅದರ ಶೈಲಿಗಳನ್ನು ಉಪಯುಕ್ತತೆಗಳ ಮೂಲಕ ಅನ್ವಯಿಸಬಹುದು ಎಂದು ಕೈಬಿಡಲಾಗಿದೆ .
• .dl-horizontalಕೈಬಿಡಲಾಗಿದೆ. ಬದಲಾಗಿ, ಅದರ ಮತ್ತು ಮಕ್ಕಳ ಮೇಲೆ ಗ್ರಿಡ್ ಕಾಲಮ್ ತರಗತಿಗಳನ್ನು (ಅಥವಾ ಮಿಕ್ಸಿನ್ಸ್) ಬಳಸಿ ಮತ್ತು ಬಳಸಿ .row.<dl><dt><dd>
• ಮರುವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳು, ಅವುಗಳ ಶೈಲಿಗಳನ್ನು <blockquote>ಅಂಶದಿಂದ ಒಂದೇ ವರ್ಗಕ್ಕೆ ಸರಿಸುವುದು, .blockquote. .blockquote-reverseಪಠ್ಯ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಪರಿವರ್ತಕವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .
• .list-inlineಈಗ ಅದರ ಮಕ್ಕಳ ಪಟ್ಟಿ ಐಟಂಗಳಿಗೆ ಹೊಸ .list-inline-itemವರ್ಗವನ್ನು ಅನ್ವಯಿಸುವ ಅಗತ್ಯವಿದೆ.

ಚಿತ್ರಗಳು

• ಎಂದು ಮರುನಾಮಕರಣ .img-responsiveಮಾಡಲಾಗಿದೆ .img-fluid.
• ಎಂದು ಮರುನಾಮಕರಣ .img-roundedಮಾಡಲಾಗಿದೆ.rounded
• ಎಂದು ಮರುನಾಮಕರಣ .img-circleಮಾಡಲಾಗಿದೆ.rounded-circle

ಕೋಷ್ಟಕಗಳು

• ಸೆಲೆಕ್ಟರ್‌ನ ಬಹುತೇಕ ಎಲ್ಲಾ ನಿದರ್ಶನಗಳನ್ನು >ತೆಗೆದುಹಾಕಲಾಗಿದೆ, ಅಂದರೆ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳು ಈಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅವರ ಪೋಷಕರಿಂದ ಶೈಲಿಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ. ಇದು ನಮ್ಮ ಆಯ್ಕೆದಾರರು ಮತ್ತು ಸಂಭಾವ್ಯ ಗ್ರಾಹಕೀಕರಣಗಳನ್ನು ಹೆಚ್ಚು ಸರಳಗೊಳಿಸುತ್ತದೆ.
• ಸ್ಥಿರತೆಗಾಗಿ ಮರುಹೆಸರಿಸಲಾಗಿದೆ .table-condensed..table-sm
• ಹೊಸ .table-inverseಆಯ್ಕೆಯನ್ನು ಸೇರಿಸಲಾಗಿದೆ.
• ಟೇಬಲ್ ಹೆಡರ್ ಮಾರ್ಪಾಡುಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ: .thead-defaultಮತ್ತು .thead-inverse.
• .table--ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಹೊಂದಲು ಸಂದರ್ಭೋಚಿತ ವರ್ಗಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ . ಆದ್ದರಿಂದ .active, .success, ಮತ್ತು ಗೆ , .warning, ಮತ್ತು . _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

ರೂಪಗಳು

• ಸರಿಸಿದ ಅಂಶವನ್ನು _reboot.scssಫೈಲ್‌ಗೆ ಮರುಹೊಂದಿಸಲಾಗಿದೆ.
• ಎಂದು ಮರುನಾಮಕರಣ .control-labelಮಾಡಲಾಗಿದೆ .col-form-label.
• ಅನುಕ್ರಮವಾಗಿ ಮರುಹೆಸರಿಸಲಾಗಿದೆ .input-lgಮತ್ತು .input-smಗೆ .form-control-lgಮತ್ತು ..form-control-sm
• .form-group-*ಸರಳತೆಗಾಗಿ ತರಗತಿಗಳನ್ನು ಕೈಬಿಡಲಾಗಿದೆ . .form-control-*ಬದಲಿಗೆ ಈಗ ತರಗತಿಗಳನ್ನು ಬಳಸಿ .
• ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಸಹಾಯ ಪಠ್ಯಕ್ಕಾಗಿ ಅದನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .help-blockಮತ್ತು ಬದಲಾಯಿಸಲಾಗಿದೆ . .form-textಇನ್‌ಲೈನ್ ಸಹಾಯ ಪಠ್ಯ ಮತ್ತು ಇತರ ಹೊಂದಿಕೊಳ್ಳುವ ಆಯ್ಕೆಗಳಿಗಾಗಿ, ನಂತಹ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳನ್ನು ಬಳಸಿ .text-muted.
• ಕೈಬಿಡಲಾಯಿತು .radio-inlineಮತ್ತು .checkbox-inline.
• ಏಕೀಕೃತ .checkboxಮತ್ತು ವಿವಿಧ ವರ್ಗಗಳ .radioಒಳಗೆ ..form-check.form-check-*
• ಸಮತಲ ರೂಪಗಳನ್ನು ಕೂಲಂಕಷವಾಗಿ ಪರಿಶೀಲಿಸಲಾಗಿದೆ:
  • .form-horizontalತರಗತಿಯ ಅವಶ್ಯಕತೆಯನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .
  • .form-group.rowಇನ್ನು ಮುಂದೆ ಮಿಕ್ಸಿನ್ ಮೂಲಕ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದಿಲ್ಲ , ಆದ್ದರಿಂದ .rowಈಗ ಸಮತಲ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿದೆ (ಉದಾ, <div class="form-group row">).
  • s ನೊಂದಿಗೆ ಲಂಬವಾಗಿ ಮಧ್ಯದ ಲೇಬಲ್‌ಗಳಿಗೆ ಹೊಸ .col-form-labelವರ್ಗವನ್ನು ಸೇರಿಸಲಾಗಿದೆ..form-control
  • .form-rowಗ್ರಿಡ್ ತರಗತಿಗಳೊಂದಿಗೆ ಕಾಂಪ್ಯಾಕ್ಟ್ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಹೊಸದನ್ನು ಸೇರಿಸಲಾಗಿದೆ (ನಿಮ್ಮನ್ನು .rowಒಂದು .form-rowಮತ್ತು ಹೋಗಿ).
• ಕಸ್ಟಮ್ ಫಾರ್ಮ್‌ಗಳ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಲಾಗಿದೆ (ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು, ರೇಡಿಯೊಗಳು, ಆಯ್ಕೆಗಳು ಮತ್ತು ಫೈಲ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ).
• CSS ಮತ್ತು ಹುಸಿ-ವರ್ಗಗಳ ಮೂಲಕ HTML5 ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣದೊಂದಿಗೆ .has-error, .has-warning, ಮತ್ತು ತರಗತಿಗಳನ್ನು ಬದಲಾಯಿಸಲಾಗಿದೆ ..has-success:invalid:valid
• ಎಂದು ಮರುನಾಮಕರಣ .form-control-staticಮಾಡಲಾಗಿದೆ .form-control-plaintext.

ಗುಂಡಿಗಳು

• ಎಂದು ಮರುನಾಮಕರಣ .btn-defaultಮಾಡಲಾಗಿದೆ .btn-secondary.
• .btn-xsವರ್ಗವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ ಏಕೆಂದರೆ .btn-smಪ್ರಮಾಣಾನುಗುಣವಾಗಿ v3 ಗಿಂತ ಚಿಕ್ಕದಾಗಿದೆ.
• jQuery ಪ್ಲಗಿನ್‌ನ ಸ್ಟೇಟ್‌ಫುಲ್ ಬಟನ್ ವೈಶಿಷ್ಟ್ಯವನ್ನು button.jsಕೈಬಿಡಲಾಗಿದೆ. ಇದು $().button(string)ಮತ್ತು $().button('reset')ವಿಧಾನಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಬದಲಿಗೆ ಸ್ವಲ್ಪ ಕಸ್ಟಮ್ JavaScript ಅನ್ನು ಬಳಸಲು ನಾವು ಸಲಹೆ ನೀಡುತ್ತೇವೆ, ಅದು ನಿಮಗೆ ಬೇಕಾದ ರೀತಿಯಲ್ಲಿ ವರ್ತಿಸುವ ಪ್ರಯೋಜನವನ್ನು ಹೊಂದಿರುತ್ತದೆ.
  • ಪ್ಲಗಿನ್‌ನ ಇತರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು (ಬಟನ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು, ಬಟನ್ ರೇಡಿಯೋಗಳು, ಸಿಂಗಲ್-ಟಾಗಲ್ ಬಟನ್‌ಗಳು) v4 ನಲ್ಲಿ ಉಳಿಸಿಕೊಳ್ಳಲಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
• IE9+ ಬೆಂಬಲಿಸುವಂತೆ ಬಟನ್‌ಗಳನ್ನು [disabled]ಬದಲಾಯಿಸಿ . ಆದಾಗ್ಯೂ ಇನ್ನೂ ಅವಶ್ಯಕವಾಗಿದೆ ಏಕೆಂದರೆ ಸ್ಥಳೀಯ ಅಂಗವಿಕಲ ಕ್ಷೇತ್ರಗಳು IE11 ನಲ್ಲಿ ಇನ್ನೂ ದೋಷಯುಕ್ತವಾಗಿವೆ .:disabled:disabledfieldset[disabled]

ಬಟನ್ ಗುಂಪು

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಘಟಕವನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• ತೆಗೆದುಹಾಕಲಾಗಿದೆ .btn-group-justified. <div class="btn-group d-flex" role="group"></div>ಬದಲಿಯಾಗಿ ನೀವು ನೊಂದಿಗೆ ಅಂಶಗಳ ಸುತ್ತ ಹೊದಿಕೆಯಾಗಿ ಬಳಸಬಹುದು .w-100.
• .btn-group-xsಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಲಾದ ವರ್ಗವನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .btn-xs.
• ಬಟನ್ ಟೂಲ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಬಟನ್ ಗುಂಪುಗಳ ನಡುವಿನ ಸ್ಪಷ್ಟ ಅಂತರವನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ; ಈಗ ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ.
• ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಬಳಸಲು ಸುಧಾರಿತ ದಸ್ತಾವೇಜನ್ನು.

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

• ಎಲ್ಲಾ ಘಟಕಗಳು, ಮಾರ್ಪಾಡುಗಳು, ಇತ್ಯಾದಿಗಳಿಗೆ ಪೋಷಕ ಆಯ್ಕೆಗಳಿಂದ ಏಕವಚನ ತರಗತಿಗಳಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ.
• ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗೆ ಲಗತ್ತಿಸಲಾದ ಮೇಲ್ಮುಖ ಅಥವಾ ಕೆಳಮುಖ ಬಾಣಗಳೊಂದಿಗೆ ಇನ್ನು ಮುಂದೆ ಸಾಗಿಸಲು ಸರಳೀಕೃತ ಡ್ರಾಪ್‌ಡೌನ್ ಶೈಲಿಗಳು.
• ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಈಗ <div>s ಅಥವಾ s ನೊಂದಿಗೆ ನಿರ್ಮಿಸಬಹುದು .<ul>
• ಡ್ರಾಪ್‌ಡೌನ್ ಐಟಂಗಳಿಗೆ ಸುಲಭ, ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಲು <a>ಮತ್ತು <button>ಆಧಾರಿತ ಡ್ರಾಪ್‌ಡೌನ್ ಶೈಲಿಗಳನ್ನು ಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ಮರುನಿರ್ಮಿಸಲಾಗಿದೆ.
• ಎಂದು ಮರುನಾಮಕರಣ .dividerಮಾಡಲಾಗಿದೆ .dropdown-divider.
• ಡ್ರಾಪ್‌ಡೌನ್ ಐಟಂಗಳು ಈಗ ಅಗತ್ಯವಿದೆ .dropdown-item.
• ಡ್ರಾಪ್‌ಡೌನ್ ಟಾಗಲ್‌ಗಳಿಗೆ ಇನ್ನು ಮುಂದೆ ಸ್ಪಷ್ಟ ಅಗತ್ಯವಿಲ್ಲ <span class="caret"></span>; ಇದನ್ನು ಈಗ CSS ನ ಮೂಲಕ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ::afterಒದಗಿಸಲಾಗುತ್ತದೆ .dropdown-toggle.

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ

• ಹೊಸ 576pxಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ sm, ಅಂದರೆ ಈಗ ಐದು ಒಟ್ಟು ಶ್ರೇಣಿಗಳಿವೆ ( xs, sm, md, lgಮತ್ತು xl).
• ಸರಳವಾದ ಗ್ರಿಡ್ ತರಗತಿಗಳಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಗ್ರಿಡ್ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ .col-{breakpoint}-{modifier}-{size}..{modifier}-{breakpoint}-{size}
• ಹೊಸ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್-ಚಾಲಿತ ತರಗತಿಗಳಿಗೆ ಪುಶ್ ಮತ್ತು ಪುಲ್ ಮಾಡಿಫೈಯರ್ ತರಗತಿಗಳನ್ನು ಕೈಬಿಡಲಾಗಿದೆ order. ಉದಾಹರಣೆಗೆ, ಬದಲಿಗೆ .col-8.push-4ಮತ್ತು .col-4.pull-8, ನೀವು ಬಳಸುತ್ತೀರಿ .col-8.order-2ಮತ್ತು .col-4.order-1.
• ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಘಟಕಗಳಿಗಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಗುಂಪುಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಘಟಕವನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• ಸ್ಟೈಲಿಂಗ್ ಲಿಂಕ್ ಮತ್ತು ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂಗಳ ಬಟನ್ ಆವೃತ್ತಿಗಳಿಗಾಗಿ a.list-group-itemಸ್ಪಷ್ಟ ವರ್ಗದೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ ..list-group-item-action
• .list-group-flushಕಾರ್ಡ್‌ಗಳೊಂದಿಗೆ ಬಳಸಲು ವರ್ಗವನ್ನು ಸೇರಿಸಲಾಗಿದೆ .

ಮಾದರಿ

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಘಟಕವನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಸರಿಸುವಿಕೆಯನ್ನು ನೀಡಿದರೆ, ನಾವು ಇನ್ನು ಮುಂದೆ ಫ್ಲೋಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿಲ್ಲವಾದ್ದರಿಂದ ಹೆಡರ್‌ನಲ್ಲಿ ವಜಾಗೊಳಿಸುವ ಐಕಾನ್‌ಗಳ ಜೋಡಣೆಯು ಮುರಿದುಹೋಗಿದೆ. ಫ್ಲೋಟೆಡ್ ವಿಷಯವು ಮೊದಲು ಬರುತ್ತದೆ, ಆದರೆ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಅದು ಇನ್ನು ಮುಂದೆ ಇರುವುದಿಲ್ಲ. ಸರಿಪಡಿಸಲು ಮಾದರಿ ಶೀರ್ಷಿಕೆಗಳ ನಂತರ ಬರಲು ನಿಮ್ಮ ವಜಾಗೊಳಿಸುವ ಐಕಾನ್‌ಗಳನ್ನು ನವೀಕರಿಸಿ.
• ಆಯ್ಕೆಯನ್ನು ( remoteಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಬಾಹ್ಯ ವಿಷಯವನ್ನು ಮಾದರಿಗೆ ಸೇರಿಸಲು ಬಳಸಬಹುದು) ಮತ್ತು ಅನುಗುಣವಾದ loaded.bs.modalಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಬದಲಿಗೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಟೆಂಪ್ಲೇಟಿಂಗ್ ಅಥವಾ ಡೇಟಾ ಬೈಂಡಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಬಳಸಲು ಅಥವಾ jQuery.load ಗೆ ಕರೆ ಮಾಡಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ .

ನವ್ಸ್

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಘಟಕವನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• >ಅನ್-ನೆಸ್ಟೆಡ್ ಕ್ಲಾಸ್‌ಗಳ ಮೂಲಕ ಸರಳವಾದ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಎಲ್ಲಾ ಆಯ್ಕೆದಾರರನ್ನು ಕೈಬಿಡಲಾಗಿದೆ .
• HTML-ನಿರ್ದಿಷ್ಟ ಆಯ್ಕೆಗಳ ಬದಲಿಗೆ , ನಾವು s, s ಮತ್ತು s .nav > li > aಗಾಗಿ ಪ್ರತ್ಯೇಕ ತರಗತಿಗಳನ್ನು ಬಳಸುತ್ತೇವೆ . ಹೆಚ್ಚಿದ ವಿಸ್ತರಣೆಯನ್ನು ತರುವ ಸಂದರ್ಭದಲ್ಲಿ ಇದು ನಿಮ್ಮ HTML ಅನ್ನು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ..nav.nav-item.nav-link

ನವಬಾರ್

ಜೋಡಣೆ, ಸ್ಪಂದಿಸುವಿಕೆ ಮತ್ತು ಕಸ್ಟಮೈಸೇಶನ್‌ಗೆ ಸುಧಾರಿತ ಬೆಂಬಲದೊಂದಿಗೆ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಪುನಃ ಬರೆಯಲಾಗಿದೆ.

• ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಎಲ್ಲಿ ಕುಗ್ಗಿಸಬೇಕೆಂದು ನೀವು ಆಯ್ಕೆ ಮಾಡುವ ಅಗತ್ಯವಿರುವ ಮೂಲಕ ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವ್‌ಬಾರ್ ನಡವಳಿಕೆಗಳನ್ನು ಈಗ .navbarತರಗತಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಹಿಂದೆ ಇದು ಕಡಿಮೆ ವೇರಿಯಬಲ್ ಮಾರ್ಪಾಡು ಮತ್ತು ಅಗತ್ಯ ಮರುಸಂಕಲನವಾಗಿತ್ತು. .navbar-expand-{breakpoint}
• .navbar-defaultಈಗ .navbar-light, ಆದರೂ .navbar-darkಹಾಗೆಯೇ ಉಳಿದಿದೆ. ಪ್ರತಿ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಇವುಗಳಲ್ಲಿ ಒಂದು ಅಗತ್ಯವಿದೆ. ಆದಾಗ್ಯೂ, ಈ ವರ್ಗಗಳು ಇನ್ನು ಮುಂದೆ background-colorರು ಹೊಂದಿಸುವುದಿಲ್ಲ; ಬದಲಿಗೆ ಅವು ಮೂಲಭೂತವಾಗಿ ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ color.
• ನವಬಾರ್‌ಗಳಿಗೆ ಈಗ ಕೆಲವು ರೀತಿಯ ಹಿನ್ನೆಲೆ ಘೋಷಣೆಯ ಅಗತ್ಯವಿದೆ. ನಮ್ಮ ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳಿಂದ ಆರಿಸಿಕೊಳ್ಳಿ ( ) ಅಥವಾ ಹುಚ್ಚು ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ.bg-* ಮೇಲಿನ ಬೆಳಕು/ವಿಲೋಮ ವರ್ಗಗಳೊಂದಿಗೆ ನಿಮ್ಮದೇ ಆದದನ್ನು ಹೊಂದಿಸಿ .
• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಶೈಲಿಗಳನ್ನು ನೀಡಿದರೆ, ನ್ಯಾವ್‌ಬಾರ್‌ಗಳು ಈಗ ಸುಲಭವಾದ ಜೋಡಣೆ ಆಯ್ಕೆಗಳಿಗಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬಹುದು.
• .navbar-toggleಈಗ .navbar-togglerಮತ್ತು ವಿಭಿನ್ನ ಶೈಲಿಗಳು ಮತ್ತು ಆಂತರಿಕ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಹೊಂದಿದೆ (ಇನ್ನು ಮೂರು <span>ಸೆಕೆಂಡುಗಳಿಲ್ಲ).
• .navbar-formತರಗತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕೈಬಿಟ್ಟರು . ಇದು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲ; ಬದಲಾಗಿ, .form-inlineಅಗತ್ಯವಿರುವಂತೆ ಅಂಚು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಅನ್ವಯಿಸಿ.
• Navbars ಇನ್ನು ಮುಂದೆ ಒಳಗೊಂಡಿರುವುದಿಲ್ಲ margin-bottomಅಥವಾ border-radiusಡೀಫಾಲ್ಟ್ ಆಗಿ. ಅಗತ್ಯವಿರುವಂತೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ.
• ನ್ಯಾವ್‌ಬಾರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳನ್ನು ಹೊಸ ಮಾರ್ಕ್‌ಅಪ್ ಸೇರಿಸಲು ನವೀಕರಿಸಲಾಗಿದೆ.

ಪುಟ ವಿನ್ಯಾಸ

• ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಘಟಕವನ್ನು ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• ಗಳ ವಂಶಸ್ಥರ ಮೇಲೆ ಈಗ ಸ್ಪಷ್ಟ ವರ್ಗಗಳು ( .page-item, ) ಅಗತ್ಯವಿದೆ.page-link.pagination
• .pagerಇದು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಔಟ್‌ಲೈನ್ ಬಟನ್‌ಗಳಿಗಿಂತ ಸ್ವಲ್ಪ ಹೆಚ್ಚಾದ ಕಾರಣ ಘಟಕವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ .

ಬ್ರೆಡ್ ತುಂಡುಗಳು

• s .breadcrumb-itemನ ವಂಶಸ್ಥರ ಮೇಲೆ ಈಗ ಸ್ಪಷ್ಟ ವರ್ಗ, , ಅಗತ್ಯವಿದೆ.breadcrumb

ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಬ್ಯಾಡ್ಜ್‌ಗಳು

• ಏಕೀಕೃತ .labelಮತ್ತು ಅಂಶದಿಂದ .badgeಅಸ್ಪಷ್ಟಗೊಳಿಸಲು <label>ಮತ್ತು ಸಂಬಂಧಿತ ಘಟಕಗಳನ್ನು ಸರಳೀಕರಿಸಲು.
• .badge-pillದುಂಡಾದ "ಮಾತ್ರೆ" ನೋಟಕ್ಕಾಗಿ ಪರಿವರ್ತಕವಾಗಿ ಸೇರಿಸಲಾಗಿದೆ .
• ಪಟ್ಟಿ ಗುಂಪುಗಳು ಮತ್ತು ಇತರ ಘಟಕಗಳಲ್ಲಿ ಬ್ಯಾಡ್ಜ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೇಲುವುದಿಲ್ಲ. ಅದಕ್ಕಾಗಿ ಈಗ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳು ಅಗತ್ಯವಿದೆ.
• .badge-default.badge-secondaryಬೇರೆಡೆ ಬಳಸಲಾದ ಕಾಂಪೊನೆಂಟ್ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಹೊಂದಿಸಲು ಕೈಬಿಡಲಾಗಿದೆ ಮತ್ತು ಸೇರಿಸಲಾಗಿದೆ.

ಫಲಕಗಳು, ಥಂಬ್‌ನೇಲ್‌ಗಳು ಮತ್ತು ಬಾವಿಗಳು

ಹೊಸ ಕಾರ್ಡ್ ಘಟಕಕ್ಕಾಗಿ ಸಂಪೂರ್ಣವಾಗಿ ಕೈಬಿಡಲಾಗಿದೆ.

ಫಲಕಗಳು

• .panelಗೆ .card, ಈಗ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ.
• .panel-defaultತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು ಬದಲಿ ಇಲ್ಲ.
• .panel-groupತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು ಬದಲಿ ಇಲ್ಲ. .card-groupಬದಲಿ ಅಲ್ಲ, ಅದು ವಿಭಿನ್ನವಾಗಿದೆ.
• .panel-headingಗೆ.card-header
• .panel-titleಗೆ .card-title. ಬಯಸಿದ ನೋಟವನ್ನು ಅವಲಂಬಿಸಿ, ನೀವು ಶಿರೋನಾಮೆ ಅಂಶಗಳು ಅಥವಾ ತರಗತಿಗಳನ್ನು (ಉದಾ <h3>, .h3) ಅಥವಾ ದಪ್ಪ ಅಂಶಗಳು ಅಥವಾ ವರ್ಗಗಳನ್ನು (ಉದಾ <strong>, <b>, .font-weight-bold) ಬಳಸಲು ಬಯಸಬಹುದು. .card-titleಅದೇ ರೀತಿ ಹೆಸರಿಸಿದಾಗ, ಗಿಂತ ವಿಭಿನ್ನ ನೋಟವನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .panel-title.
• .panel-bodyಗೆ.card-body
• .panel-footerಗೆ.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ಮತ್ತು ನಮ್ಮ Sass ನಕ್ಷೆಯಿಂದ ರಚಿಸಲಾದ , , ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ .panel-dangerಕೈಬಿಡಲಾಗಿದೆ ..bg-.text-.border$theme-colors

ಪ್ರಗತಿ

• ಸಾಂದರ್ಭಿಕ .progress-bar-*ತರಗತಿಗಳನ್ನು .bg-*ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, class="progress-bar progress-bar-danger"ಆಗುತ್ತದೆ class="progress-bar bg-danger".
• .activeಜೊತೆಗೆ ಅನಿಮೇಟೆಡ್ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ .progress-bar-animated.

ಏರಿಳಿಕೆ

• ವಿನ್ಯಾಸ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸರಳಗೊಳಿಸಲು ಸಂಪೂರ್ಣ ಘಟಕವನ್ನು ಕೂಲಂಕಷವಾಗಿ ಪರಿಶೀಲಿಸಲಾಗಿದೆ. ನೀವು ಅತಿಕ್ರಮಿಸಲು ನಾವು ಕಡಿಮೆ ಶೈಲಿಗಳು, ಹೊಸ ಸೂಚಕಗಳು ಮತ್ತು ಹೊಸ ಐಕಾನ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ.
• ಎಲ್ಲಾ CSS ಅನ್ನು ಅನ್-ನೆಸ್ಟ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಮರುಹೆಸರಿಸಲಾಗಿದೆ, ಪ್ರತಿ ವರ್ಗವು ಪೂರ್ವಪ್ರತ್ಯಯವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ .carousel-.
  • ಏರಿಳಿಕೆ ಐಟಂಗಳಿಗಾಗಿ, .next, .prev, .leftಮತ್ತು .rightಈಗ .carousel-item-next, .carousel-item-prev, .carousel-item-left, ಮತ್ತು .carousel-item-right.
  • .itemಈಗ ಕೂಡ ಆಗಿದೆ .carousel-item.
  • ಹಿಂದಿನ/ಮುಂದಿನ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ, .carousel-control.rightಮತ್ತು .carousel-control.leftಈಗ .carousel-control-nextಮತ್ತು .carousel-control-prev, ಅಂದರೆ ಅವುಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಮೂಲ ವರ್ಗದ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ.
• ಎಲ್ಲಾ ಸ್ಪಂದಿಸುವ ಶೈಲಿಯನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ, ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಮುಂದೂಡಲಾಗಿದೆ (ಉದಾ, ನಿರ್ದಿಷ್ಟ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಶೀರ್ಷಿಕೆಗಳನ್ನು ತೋರಿಸುವುದು) ಮತ್ತು ಅಗತ್ಯವಿರುವಂತೆ ಕಸ್ಟಮ್ ಶೈಲಿಗಳು.
• ಏರಿಳಿಕೆ ಐಟಂಗಳಲ್ಲಿನ ಚಿತ್ರಗಳಿಗಾಗಿ ತೆಗೆದುಹಾಕಲಾದ ಇಮೇಜ್ ಅತಿಕ್ರಮಿಸುತ್ತದೆ, ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಮುಂದೂಡುತ್ತದೆ.
• ಹೊಸ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ಕರೋಸೆಲ್ ಉದಾಹರಣೆಯನ್ನು ಟ್ವೀಕ್ ಮಾಡಲಾಗಿದೆ.

ಕೋಷ್ಟಕಗಳು

• ಶೈಲಿಯ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಎಲ್ಲಾ ಟೇಬಲ್ ಶೈಲಿಗಳು ಈಗ ಸರಳವಾದ ಆಯ್ಕೆಗಾರರಿಗೆ v4 ನಲ್ಲಿ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದಿವೆ.
• ವಿಲೋಮ ಟೇಬಲ್ ರೂಪಾಂತರವನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಉಪಯುಕ್ತತೆಗಳು

• ಪ್ರದರ್ಶನ, ಮರೆಮಾಡಲಾಗಿದೆ ಮತ್ತು ಇನ್ನಷ್ಟು:
  • ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಿದೆ (ಉದಾ, .d-noneಮತ್ತು d-{sm,md,lg,xl}-none).
  • .hidden-*ಹೊಸ ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಬಹುಪಾಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಕೈಬಿಡಲಾಗಿದೆ . ಉದಾಹರಣೆಗೆ, ಬದಲಿಗೆ .hidden-sm-up, ಬಳಸಿ .d-sm-none. .hidden-printಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಯ ಹೆಸರಿಸುವ ಯೋಜನೆಯನ್ನು ಬಳಸಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ . ಈ ಪುಟದ ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟೀಸ್ ವಿಭಾಗದ ಅಡಿಯಲ್ಲಿ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ .
  • .float-{sm,md,lg,xl}-{left,right,none}ರೆಸ್ಪಾನ್ಸಿವ್ ಫ್ಲೋಟ್‌ಗಳಿಗಾಗಿ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ ಮತ್ತು ತೆಗೆದುಹಾಕಲಾಗಿದೆ .pull-leftಮತ್ತು .pull-rightಅವುಗಳು ಅನಗತ್ಯವಾಗಿರುವುದರಿಂದ .float-leftಮತ್ತು .float-right.
• ಮಾದರಿ:
  • ನಮ್ಮ ಪಠ್ಯ ಜೋಡಣೆ ತರಗತಿಗಳಿಗೆ ಸ್ಪಂದಿಸುವ ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ .text-{sm,md,lg,xl}-{left,center,right}.
• ಜೋಡಣೆ ಮತ್ತು ಅಂತರ:
  • ಎಲ್ಲಾ ಬದಿಗಳಿಗೆ ಹೊಸ ಸ್ಪಂದಿಸುವ ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ , ಜೊತೆಗೆ ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್‌ಗಳು.
  • ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳ ಬೋಟ್‌ಲೋಡ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
  • .center-blockಹೊಸ .mx-autoತರಗತಿಗೆ ಕೈಬಿಡಲಾಗಿದೆ .
• ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಬಿಡಲು Clearfix ಅನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ.

ವೆಂಡರ್ ಪೂರ್ವಪ್ರತ್ಯಯ ಮಿಕ್ಸಿನ್ಸ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ರ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು v3.2.0 ನಲ್ಲಿ ಅಸಮ್ಮತಿಗೊಳಿಸಲಾಗಿದೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿ ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ನಾವು ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ , ಅವುಗಳು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲ.

ಕೆಳಗಿನ ಮಿಶ್ರಣಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing_ content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_ transition-property_ transition-timing-function_transition-transformtranslatetranslate3duser-select

ದಾಖಲೆ

ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಮಂಡಳಿಯಾದ್ಯಂತ ನವೀಕರಿಸಲಾಗಿದೆ. ಇಲ್ಲಿ ಕಡಿಮೆಯಾಗಿದೆ:

• ನಾವು ಇನ್ನೂ ಜೆಕಿಲ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ, ಆದರೆ ನಾವು ಮಿಶ್ರಣದಲ್ಲಿ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ:
  • bugify.rbನಮ್ಮ ಬ್ರೌಸರ್ ಬಗ್‌ಗಳ ಪುಟದಲ್ಲಿನ ನಮೂದುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪಟ್ಟಿ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ .
  • example.rbಡೀಫಾಲ್ಟ್ highlight.rbಪ್ಲಗಿನ್‌ನ ಕಸ್ಟಮ್ ಫೋರ್ಕ್ ಆಗಿದೆ, ಇದು ಸುಲಭವಾದ ಉದಾಹರಣೆ-ಕೋಡ್ ನಿರ್ವಹಣೆಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
  • callout.rbಅದೇ ರೀತಿಯ ಕಸ್ಟಮ್ ಫೋರ್ಕ್ ಆಗಿದೆ, ಆದರೆ ನಮ್ಮ ವಿಶೇಷ ಡಾಕ್ಸ್ ಕಾಲ್‌ಔಟ್‌ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.
  • ನಮ್ಮ ವಿಷಯಗಳ ಕೋಷ್ಟಕವನ್ನು ರಚಿಸಲು jekyll-toc ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
• ಸುಲಭವಾದ ಸಂಪಾದನೆಗಾಗಿ ಎಲ್ಲಾ ಡಾಕ್ಸ್ ವಿಷಯವನ್ನು ಮಾರ್ಕ್‌ಡೌನ್‌ನಲ್ಲಿ (HTML ಬದಲಿಗೆ) ಪುನಃ ಬರೆಯಲಾಗಿದೆ.
• ಸರಳವಾದ ವಿಷಯ ಮತ್ತು ಹೆಚ್ಚು ಸಮೀಪಿಸಬಹುದಾದ ಕ್ರಮಾನುಗತಕ್ಕಾಗಿ ಪುಟಗಳನ್ನು ಮರುಸಂಘಟಿಸಲಾಗಿದೆ.
• ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಸಂಪೂರ್ಣ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು ನಾವು ಸಾಮಾನ್ಯ CSS ನಿಂದ SCSS ಗೆ ಸ್ಥಳಾಂತರಗೊಂಡಿದ್ದೇವೆ.

ರೆಸ್ಪಾನ್ಸಿವ್ ಉಪಯುಕ್ತತೆಗಳು

ಎಲ್ಲಾ @screen-ಅಸ್ಥಿರಗಳನ್ನು v4.0.0 ನಲ್ಲಿ ತೆಗೆದುಹಾಕಲಾಗಿದೆ. media-breakpoint-up()ಬದಲಿಗೆ , media-breakpoint-down()ಅಥವಾ media-breakpoint-only()ಸಾಸ್ ಮಿಕ್ಸಿನ್ಸ್ ಅಥವಾ $grid-breakpointsಸಾಸ್ ಮ್ಯಾಪ್ ಅನ್ನು ಬಳಸಿ .

displayಸ್ಪಷ್ಟವಾದ ಉಪಯುಕ್ತತೆಗಳ ಪರವಾಗಿ ನಮ್ಮ ಸ್ಪಂದಿಸುವ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಹೆಚ್ಚಾಗಿ ತೆಗೆದುಹಾಕಲಾಗಿದೆ .

• .hiddenಮತ್ತು .showವರ್ಗಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಏಕೆಂದರೆ ಅವುಗಳು jQuery $(...).hide()ಮತ್ತು $(...).show()ವಿಧಾನಗಳೊಂದಿಗೆ ಸಂಘರ್ಷಗೊಂಡಿವೆ . ಬದಲಿಗೆ, ಗುಣಲಕ್ಷಣವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ ಅಥವಾ ಮತ್ತು [hidden]ನಂತಹ ಇನ್‌ಲೈನ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿ .style="display: none;"style="display: block;"
• ಎಲ್ಲಾ .hidden-ವರ್ಗಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ, ಮರುಹೆಸರಿಸಲಾದ ಮುದ್ರಣ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಉಳಿಸಿ.
  • v3 ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 ಆಲ್ಫಾಸ್‌ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ಮುದ್ರಣ ಉಪಯುಕ್ತತೆಗಳು ಇನ್ನು ಮುಂದೆ .hidden-ಅಥವಾ ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವುದಿಲ್ಲ .visible-, ಆದರೆ .d-print-.
  • ಹಳೆಯ ಹೆಸರುಗಳು : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
  • ಹೊಸ ತರಗತಿಗಳು: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

ಸ್ಪಷ್ಟವಾದ ತರಗತಿಗಳನ್ನು ಬಳಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ .visible-*, ಆ ಪರದೆಯ ಗಾತ್ರದಲ್ಲಿ ಅದನ್ನು ಮರೆಮಾಡದೆ ಅಂಶವನ್ನು ನೀವು ಗೋಚರಿಸುವಂತೆ ಮಾಡಿ. ಪರದೆಯ ಗಾತ್ರಗಳ ನಿರ್ದಿಷ್ಟ ಮಧ್ಯಂತರದಲ್ಲಿ ಮಾತ್ರ ಅಂಶವನ್ನು ತೋರಿಸಲು ನೀವು ಒಂದು ವರ್ಗವನ್ನು ಒಂದು .d-*-noneವರ್ಗದೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು (ಉದಾಹರಣೆಗೆ ಮಧ್ಯಮ ಮತ್ತು ದೊಡ್ಡ ಸಾಧನಗಳಲ್ಲಿ ಮಾತ್ರ ಅಂಶವನ್ನು ತೋರಿಸುತ್ತದೆ)..d-*-block.d-none.d-md-block.d-xl-none

v4 ನಲ್ಲಿನ ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳ ಬದಲಾವಣೆಗಳು ಅದೇ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸಲು ನೀವು ಒಂದು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ದೊಡ್ಡದಾಗಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ ಎಂದರ್ಥ. ಹೊಸ ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳು ಕಡಿಮೆ ಸಾಮಾನ್ಯ ಸಂದರ್ಭಗಳಿಗೆ ಅವಕಾಶ ಕಲ್ಪಿಸಲು ಪ್ರಯತ್ನಿಸುವುದಿಲ್ಲ, ಅಲ್ಲಿ ಒಂದು ಅಂಶದ ಗೋಚರತೆಯನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳ ಒಂದೇ ಪಕ್ಕದ ವ್ಯಾಪ್ತಿಯಂತೆ ವ್ಯಕ್ತಪಡಿಸಲಾಗುವುದಿಲ್ಲ; ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ ನೀವು ಕಸ್ಟಮ್ CSS ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.