ಅಪ್ರೋಚ್

ಪ್ರಾರಂಭಿಕ ಪುಟಗಳು ಪ್ರಾಜೆಕ್ಟ್‌ನ ಪರಿಚಯಾತ್ಮಕ ಪ್ರವಾಸವನ್ನು ಒದಗಿಸುತ್ತವೆ ಮತ್ತು ಅದು ಏನು ನೀಡುತ್ತದೆ ಎಂಬುದನ್ನು ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ನಾವು ಏಕೆ ಮಾಡುತ್ತೇವೆ ಎಂಬುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. ಇದು ವೆಬ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲು ನಮ್ಮ ತತ್ವಶಾಸ್ತ್ರವನ್ನು ವಿವರಿಸುತ್ತದೆ ಇದರಿಂದ ಇತರರು ನಮ್ಮಿಂದ ಕಲಿಯಬಹುದು, ನಮ್ಮೊಂದಿಗೆ ಕೊಡುಗೆ ನೀಡಬಹುದು ಮತ್ತು ಸುಧಾರಿಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು.

ಸರಿಯಿಲ್ಲದಿರುವ ಯಾವುದನ್ನಾದರೂ ನೋಡಿ, ಅಥವಾ ಬಹುಶಃ ಉತ್ತಮವಾಗಿ ಮಾಡಬಹುದೇ? ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ - ಅದನ್ನು ನಿಮ್ಮೊಂದಿಗೆ ಚರ್ಚಿಸಲು ನಾವು ಇಷ್ಟಪಡುತ್ತೇವೆ.

ಸಾರಾಂಶ

ನಾವು ಇವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದಕ್ಕೂ ಹೆಚ್ಚು ಧುಮುಕುತ್ತೇವೆ, ಆದರೆ ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ, ನಮ್ಮ ವಿಧಾನವನ್ನು ಮಾರ್ಗದರ್ಶನ ಮಾಡುವುದು ಇಲ್ಲಿದೆ.

• ಘಟಕಗಳು ಸ್ಪಂದಿಸುವ ಮತ್ತು ಮೊಬೈಲ್-ಮೊದಲು ಆಗಿರಬೇಕು
• ಘಟಕಗಳನ್ನು ಮೂಲ ವರ್ಗದೊಂದಿಗೆ ನಿರ್ಮಿಸಬೇಕು ಮತ್ತು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ವಿಸ್ತರಿಸಬೇಕು
• ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ಸ್ ಸಾಮಾನ್ಯ z-ಇಂಡೆಕ್ಸ್ ಸ್ಕೇಲ್ ಅನ್ನು ಪಾಲಿಸಬೇಕು
• ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, JavaScript ಗಿಂತ HTML ಮತ್ತು CSS ಅನುಷ್ಠಾನಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ
• ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಕಸ್ಟಮ್ ಶೈಲಿಗಳ ಮೇಲೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ
• ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಕಟ್ಟುನಿಟ್ಟಾದ HTML ಅವಶ್ಯಕತೆಗಳನ್ನು (ಮಕ್ಕಳ ಆಯ್ಕೆದಾರರು) ಜಾರಿಗೊಳಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ

ರೆಸ್ಪಾನ್ಸಿವ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಮೊಬೈಲ್-ಮೊದಲು ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ . ನಾವು ಈ ಪದವನ್ನು ನಮ್ಮ ಡಾಕ್ಸ್‌ನಲ್ಲಿ ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು ಹೆಚ್ಚಾಗಿ ಒಪ್ಪುತ್ತೇವೆ, ಆದರೆ ಕೆಲವೊಮ್ಮೆ ಇದು ತುಂಬಾ ವಿಶಾಲವಾಗಿರಬಹುದು. ಪ್ರತಿಯೊಂದು ಘಟಕವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಂದಿಸಬಾರದು, ಈ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿಧಾನವು ವ್ಯೂಪೋರ್ಟ್ ದೊಡ್ಡದಾಗುತ್ತಿದ್ದಂತೆ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ನಿಮ್ಮನ್ನು ತಳ್ಳುವ ಮೂಲಕ CSS ಅತಿಕ್ರಮಣಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಾದ್ಯಂತ, ನಮ್ಮ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ನೀವು ಇದನ್ನು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿ ನೋಡುತ್ತೀರಿ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, min-widthನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ ಅನ್ವಯಿಸಲು ಪ್ರಾರಂಭಿಸುವ ಮತ್ತು ಹೆಚ್ಚಿನ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳ ಮೂಲಕ ಸಾಗುವ ಪ್ರಶ್ನೆಗಳನ್ನು ನಾವು ಬಳಸುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, a ನಿಂದ ಅನಂತಕ್ಕೆ .d-noneಅನ್ವಯಿಸುತ್ತದೆ . min-width: 0ಮತ್ತೊಂದೆಡೆ, .d-md-noneಮಧ್ಯಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಿಂದ ಮತ್ತು ಮೇಲಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ.

max-widthಒಂದು ಘಟಕದ ಅಂತರ್ಗತ ಸಂಕೀರ್ಣತೆಗೆ ಅಗತ್ಯವಿರುವಾಗ ನಾವು ಕೆಲವೊಮ್ಮೆ ಬಳಸುತ್ತೇವೆ . ಕೆಲವೊಮ್ಮೆ, ಈ ಅತಿಕ್ರಮಣಗಳು ನಮ್ಮ ಘಟಕಗಳಿಂದ ಕೋರ್ ಕಾರ್ಯವನ್ನು ಪುನಃ ಬರೆಯುವುದಕ್ಕಿಂತ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಬೆಂಬಲಿಸಲು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮತ್ತು ಮಾನಸಿಕವಾಗಿ ಸ್ಪಷ್ಟವಾಗಿರುತ್ತವೆ. ನಾವು ಈ ವಿಧಾನವನ್ನು ಮಿತಿಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ, ಆದರೆ ಕಾಲಕಾಲಕ್ಕೆ ಅದನ್ನು ಬಳಸುತ್ತೇವೆ.

ತರಗತಿಗಳು

ನಮ್ಮ ರೀಬೂಟ್ ಅನ್ನು ಹೊರತುಪಡಿಸಿ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸಾಮಾನ್ಯೀಕರಣದ ಸ್ಟೈಲ್‌ಶೀಟ್, ನಮ್ಮ ಎಲ್ಲಾ ಶೈಲಿಗಳು ತರಗತಿಗಳನ್ನು ಸೆಲೆಕ್ಟರ್‌ಗಳಾಗಿ ಬಳಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿವೆ. ಇದರರ್ಥ ಟೈಪ್ ಸೆಲೆಕ್ಟರ್‌ಗಳ (ಉದಾ, input[type="text"]) ಮತ್ತು ಬಾಹ್ಯ ಪೋಷಕ ವರ್ಗಗಳಿಂದ (ಉದಾ, .parent .child) ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಅತಿಕ್ರಮಿಸಲು ತುಂಬಾ ನಿರ್ದಿಷ್ಟವಾಗಿಸುತ್ತದೆ.

ಅಂತೆಯೇ, ಸಾಮಾನ್ಯ, ಅತಿಕ್ರಮಿಸದ ಆಸ್ತಿ-ಮೌಲ್ಯದ ಜೋಡಿಗಳನ್ನು ಹೊಂದಿರುವ ಮೂಲ ವರ್ಗದೊಂದಿಗೆ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, .btnಮತ್ತು .btn-primary. ನಾವು .btnಎಲ್ಲಾ ಸಾಮಾನ್ಯ ಶೈಲಿಗಳಿಗೆ ಬಳಸುತ್ತೇವೆ display, paddingಮತ್ತು border-width. .btn-primaryನಂತರ ನಾವು ಬಣ್ಣ, ಹಿನ್ನೆಲೆ-ಬಣ್ಣ, ಗಡಿ-ಬಣ್ಣ ಇತ್ಯಾದಿಗಳನ್ನು ಸೇರಿಸಲು ಮಾರ್ಪಡಿಸುವವರನ್ನು ಬಳಸುತ್ತೇವೆ .

ಬಹು ರೂಪಾಂತರಗಳಾದ್ಯಂತ ಬದಲಾಯಿಸಬೇಕಾದ ಬಹು ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಮೌಲ್ಯಗಳು ಇದ್ದಾಗ ಮಾತ್ರ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಬಳಸಬೇಕು. ಮಾರ್ಪಡಿಸುವವರು ಯಾವಾಗಲೂ ಅಗತ್ಯವಿಲ್ಲ, ಆದ್ದರಿಂದ ನೀವು ನಿಜವಾಗಿಯೂ ಕೋಡ್‌ನ ಸಾಲುಗಳನ್ನು ಉಳಿಸುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಅವುಗಳನ್ನು ರಚಿಸುವಾಗ ಅನಗತ್ಯ ಅತಿಕ್ರಮಣಗಳನ್ನು ತಡೆಯುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಮಾರ್ಪಾಡುಗಳ ಉತ್ತಮ ಉದಾಹರಣೆಗಳೆಂದರೆ ನಮ್ಮ ಥೀಮ್ ಬಣ್ಣ ವರ್ಗಗಳು ಮತ್ತು ಗಾತ್ರದ ರೂಪಾಂತರಗಳು.

z-ಸೂಚ್ಯಂಕ ಮಾಪಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಎರಡು z-indexಮಾಪಕಗಳಿವೆ-ಒಂದು ಘಟಕದೊಳಗಿನ ಅಂಶಗಳು ಮತ್ತು ಒವರ್ಲೇ ಘಟಕಗಳು.

ಘಟಕ ಅಂಶಗಳು

• borderಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಕೆಲವು ಘಟಕಗಳನ್ನು ಆಸ್ತಿಯನ್ನು ಮಾರ್ಪಡಿಸದೆ ಡಬಲ್ ಗಡಿಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಅತಿಕ್ರಮಿಸುವ ಅಂಶಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ . ಉದಾಹರಣೆಗೆ, ಬಟನ್ ಗುಂಪುಗಳು, ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳು ಮತ್ತು ವಿನ್ಯಾಸ.
• ಈ ಘಟಕಗಳು ಮೂಲಕ ಪ್ರಮಾಣಿತ z-indexಪ್ರಮಾಣವನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ .03
• 0ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ (ಆರಂಭಿಕ), 1ಆಗಿದೆ :hover, 2ಆಗಿದೆ :active/ .active, ಮತ್ತು 3ಆಗಿದೆ :focus.
• ಈ ವಿಧಾನವು ನಮ್ಮ ಹೆಚ್ಚಿನ ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ನಿರೀಕ್ಷೆಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಒಂದು ಅಂಶವು ಕೇಂದ್ರೀಕೃತವಾಗಿದ್ದರೆ, ಅದು ವೀಕ್ಷಣೆಯಲ್ಲಿ ಮತ್ತು ಬಳಕೆದಾರರ ಗಮನದಲ್ಲಿದೆ. ಸಕ್ರಿಯ ಅಂಶಗಳು ಎರಡನೆಯ ಸ್ಥಾನದಲ್ಲಿವೆ ಏಕೆಂದರೆ ಅವು ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸುತ್ತವೆ. ಹೋವರ್ ಮೂರನೇ ಸ್ಥಾನದಲ್ಲಿದೆ ಏಕೆಂದರೆ ಇದು ಬಳಕೆದಾರರ ಉದ್ದೇಶವನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಆದರೆ ಬಹುತೇಕ ಯಾವುದನ್ನಾದರೂ ಸುಳಿದಾಡಿಸಬಹುದು.

ಓವರ್ಲೇ ಘಟಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕೆಲವು ರೀತಿಯ ಓವರ್‌ಲೇ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹಲವಾರು ಘಟಕಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದು ಅತ್ಯಧಿಕ z-index, ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಸ್ಥಿರ ಮತ್ತು ಜಿಗುಟಾದ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳು, ಮಾದರಿಗಳು, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಈ ಘಟಕಗಳು ತಮ್ಮದೇ ಆದ z-indexಪ್ರಮಾಣವನ್ನು ಹೊಂದಿದ್ದು ಅದು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ 1000. ಈ ಆರಂಭಿಕ ಸಂಖ್ಯೆಯನ್ನು ನಿರಂಕುಶವಾಗಿ ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ ಮತ್ತು ನಮ್ಮ ಶೈಲಿಗಳು ಮತ್ತು ನಿಮ್ಮ ಯೋಜನೆಯ ಕಸ್ಟಮ್ ಶೈಲಿಗಳ ನಡುವೆ ಸಣ್ಣ ಬಫರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಪ್ರತಿಯೊಂದು ಓವರ್‌ಲೇ ಘಟಕವು ಅದರ z-indexಮೌಲ್ಯವನ್ನು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಹೆಚ್ಚಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಸಾಮಾನ್ಯ UI ತತ್ವಗಳು ಬಳಕೆದಾರರ ಗಮನ ಅಥವಾ ಸುಳಿದಾಡುವ ಅಂಶಗಳನ್ನು ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ವೀಕ್ಷಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಮಾದರಿಯು ಡಾಕ್ಯುಮೆಂಟ್ ನಿರ್ಬಂಧಿಸುವಿಕೆಯಾಗಿದೆ (ಉದಾಹರಣೆಗೆ, ಮಾದರಿಯ ಕ್ರಿಯೆಯನ್ನು ಹೊರತುಪಡಿಸಿ ನೀವು ಬೇರೆ ಯಾವುದೇ ಕ್ರಮವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಾಧ್ಯವಿಲ್ಲ), ಆದ್ದರಿಂದ ನಾವು ಅದನ್ನು ನಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳ ಮೇಲೆ ಇರಿಸುತ್ತೇವೆ.

z-indexನಮ್ಮ ಲೇಔಟ್ ಪುಟದಲ್ಲಿ ಇದರ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .

JS ಮೂಲಕ HTML ಮತ್ತು CSS

ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ನಾವು HTML ಮತ್ತು CSS ಅನ್ನು JavaScript ಮೂಲಕ ಬರೆಯಲು ಬಯಸುತ್ತೇವೆ. ಸಾಮಾನ್ಯವಾಗಿ, HTML ಮತ್ತು CSS ಹೆಚ್ಚು ಸಮೃದ್ಧವಾಗಿದೆ ಮತ್ತು ಎಲ್ಲಾ ವಿಭಿನ್ನ ಅನುಭವದ ಹಂತಗಳ ಹೆಚ್ಚಿನ ಜನರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ. HTML ಮತ್ತು CSS ಸಹ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ JavaScript ಗಿಂತ ವೇಗವಾಗಿರುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಸಾಮಾನ್ಯವಾಗಿ ನಿಮಗಾಗಿ ಹೆಚ್ಚಿನ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

dataಈ ತತ್ವವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಮ್ಮ ಪ್ರಥಮ ದರ್ಜೆ JavaScript API ಆಗಿದೆ . ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸಲು ನೀವು ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯುವ ಅಗತ್ಯವಿಲ್ಲ; ಬದಲಿಗೆ, HTML ಬರೆಯಿರಿ. ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅವಲೋಕನ ಪುಟದಲ್ಲಿ ಇದರ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ಓದಿ .

ಕೊನೆಯದಾಗಿ, ನಮ್ಮ ಶೈಲಿಗಳು ಸಾಮಾನ್ಯ ವೆಬ್ ಅಂಶಗಳ ಮೂಲಭೂತ ನಡವಳಿಕೆಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತವೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಬ್ರೌಸರ್ ಒದಗಿಸುವದನ್ನು ಬಳಸಲು ನಾವು ಬಯಸುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಯಾವುದೇ ಅಂಶದ ಮೇಲೆ ವರ್ಗವನ್ನು ಹಾಕಬಹುದು .btn, ಆದರೆ ಹೆಚ್ಚಿನ ಅಂಶಗಳು ಯಾವುದೇ ಶಬ್ದಾರ್ಥದ ಮೌಲ್ಯ ಅಥವಾ ಬ್ರೌಸರ್ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ ಬದಲಿಗೆ, ನಾವು <button>s ಮತ್ತು <a>s ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಘಟಕಗಳಿಗೆ ಅದೇ ಹೋಗುತ್ತದೆ. ಇನ್‌ಪುಟ್‌ನ ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ ಪೋಷಕ ಅಂಶಕ್ಕೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲು ನಮ್ಮದೇ ಆದ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ಪ್ಲಗಿನ್ ಅನ್ನು ನಾವು ಬರೆಯಬಹುದಾದರೂ:valid , ಪಠ್ಯವನ್ನು ಕೆಂಪು ಎಂದು ಹೇಳುವ ಶೈಲಿಯನ್ನು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಪ್ರತಿ ಬ್ರೌಸರ್ ನಮಗೆ ಒದಗಿಸುವ / :invalidಹುಸಿ-ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಲು ನಾವು ಬಯಸುತ್ತೇವೆ.

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

ಯುಟಿಲಿಟಿ ತರಗತಿಗಳು-ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ರಲ್ಲಿ ಹಿಂದಿನ ಸಹಾಯಕರು-ಸಿಎಸ್ಎಸ್ ಉಬ್ಬುವಿಕೆ ಮತ್ತು ಕಳಪೆ ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಎದುರಿಸುವಲ್ಲಿ ಪ್ರಬಲ ಮಿತ್ರರಾಗಿದ್ದಾರೆ. ಯುಟಿಲಿಟಿ ವರ್ಗವು ವಿಶಿಷ್ಟವಾಗಿ ಒಂದೇ, ಬದಲಾಗದ ಆಸ್ತಿ-ಮೌಲ್ಯದ ಜೋಡಣೆಯನ್ನು ವರ್ಗವಾಗಿ ವ್ಯಕ್ತಪಡಿಸಲಾಗುತ್ತದೆ (ಉದಾ, .d-blockಪ್ರತಿನಿಧಿಸುತ್ತದೆ display: block;). ಅವರ ಪ್ರಾಥಮಿಕ ಮನವಿಯೆಂದರೆ HTML ಬರೆಯುವಾಗ ಬಳಕೆಯ ವೇಗ ಮತ್ತು ನೀವು ಬರೆಯಬೇಕಾದ ಕಸ್ಟಮ್ CSS ಪ್ರಮಾಣವನ್ನು ಮಿತಿಗೊಳಿಸುವುದು.

ನಿರ್ದಿಷ್ಟವಾಗಿ ಕಸ್ಟಮ್ CSS ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ, ನಿಮ್ಮ ಸಾಮಾನ್ಯವಾಗಿ ಪುನರಾವರ್ತಿತ ಆಸ್ತಿ-ಮೌಲ್ಯದ ಜೋಡಿಗಳನ್ನು ಏಕ ವರ್ಗಗಳಾಗಿ ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಹೆಚ್ಚುತ್ತಿರುವ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಎದುರಿಸಲು ಉಪಯುಕ್ತತೆಗಳು ಸಹಾಯ ಮಾಡಬಹುದು. ಇದು ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ಪ್ರಮಾಣದಲ್ಲಿ ನಾಟಕೀಯ ಪರಿಣಾಮವನ್ನು ಬೀರಬಹುದು.

ಹೊಂದಿಕೊಳ್ಳುವ HTML

ಯಾವಾಗಲೂ ಸಾಧ್ಯವಾಗದಿದ್ದರೂ, ಘಟಕಗಳಿಗೆ ನಮ್ಮ HTML ಅಗತ್ಯತೆಗಳಲ್ಲಿ ಅತಿಯಾದ ಸಿದ್ಧಾಂತವನ್ನು ತಪ್ಪಿಸಲು ನಾವು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ. ಹೀಗಾಗಿ, ನಾವು ನಮ್ಮ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳಲ್ಲಿ ಏಕ ತರಗತಿಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತೇವೆ ಮತ್ತು ತಕ್ಷಣದ ಮಕ್ಕಳ ಆಯ್ಕೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ ( >). ಇದು ನಿಮ್ಮ ಅನುಷ್ಠಾನದಲ್ಲಿ ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ನಮ್ಮ CSS ಅನ್ನು ಸರಳವಾಗಿ ಮತ್ತು ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟವಾಗಿರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಕೋಡ್ ಸಂಪ್ರದಾಯಗಳು

ಕೋಡ್ ಗೈಡ್ (ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಹ-ಸೃಷ್ಟಿಕರ್ತ, @mdo ನಿಂದ) ನಾವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಾದ್ಯಂತ ನಮ್ಮ HTML ಮತ್ತು CSS ಅನ್ನು ಹೇಗೆ ಬರೆಯುತ್ತೇವೆ ಎಂಬುದನ್ನು ದಾಖಲಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ಸಾಮಾನ್ಯ ಅರ್ಥದಲ್ಲಿ ಡೀಫಾಲ್ಟ್‌ಗಳು, ಆಸ್ತಿ ಮತ್ತು ಗುಣಲಕ್ಷಣದ ಆದೇಶಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

ನಮ್ಮ Sass /CSS ನಲ್ಲಿ ಈ ಮಾನದಂಡಗಳನ್ನು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಜಾರಿಗೊಳಿಸಲು ನಾವು Stylelint ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ನಮ್ಮ ಕಸ್ಟಮ್ ಸ್ಟೈಲಿಂಟ್ ಕಾನ್ಫಿಗರ್ ಮುಕ್ತ ಮೂಲವಾಗಿದೆ ಮತ್ತು ಇತರರಿಗೆ ಬಳಸಲು ಮತ್ತು ವಿಸ್ತರಿಸಲು ಲಭ್ಯವಿದೆ.

ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಮತ್ತು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಅನ್ನು ಜಾರಿಗೊಳಿಸಲು ನಾವು vnu-jar ಅನ್ನು ಬಳಸುತ್ತೇವೆ, ಹಾಗೆಯೇ ಸಾಮಾನ್ಯ ದೋಷಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುತ್ತೇವೆ.