ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

ಪ್ರವೇಶಿಸುವಿಕೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವೈಶಿಷ್ಟ್ಯಗಳ ಸಂಕ್ಷಿಪ್ತ ಅವಲೋಕನ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ವಿಷಯದ ರಚನೆಗೆ ಮಿತಿಗಳು.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ರೆಡಿಮೇಡ್ ಶೈಲಿಗಳು, ಲೇಔಟ್ ಪರಿಕರಗಳು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಘಟಕಗಳ ಬಳಸಲು ಸುಲಭವಾದ ಚೌಕಟ್ಟನ್ನು ಒದಗಿಸುತ್ತದೆ, ಡೆವಲಪರ್‌ಗಳು ದೃಷ್ಟಿಗೆ ಇಷ್ಟವಾಗುವ, ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಶ್ರೀಮಂತವಾಗಿರುವ ಮತ್ತು ಬಾಕ್ಸ್‌ನ ಹೊರಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಅವಲೋಕನ ಮತ್ತು ಮಿತಿಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಯಾವುದೇ ಯೋಜನೆಯ ಒಟ್ಟಾರೆ ಪ್ರವೇಶವು ಲೇಖಕರ ಮಾರ್ಕ್‌ಅಪ್, ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಅವರು ಸೇರಿಸಿದ ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಇವುಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದರೆ, WCAG 2.1 (A/AA/AAA), ವಿಭಾಗ 508 , ಮತ್ತು ಅಂತಹುದೇ ಪ್ರವೇಶದ ಮಾನದಂಡಗಳು ಮತ್ತು ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸುವ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಸಾಧ್ಯವಾಗಬೇಕು.

ರಚನಾತ್ಮಕ ಮಾರ್ಕ್ಅಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಮಾರ್ಕ್‌ಅಪ್ ರಚನೆಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು. ಈ ದಸ್ತಾವೇಜನ್ನು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಬಳಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸದ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಸಂಭಾವ್ಯ ಪ್ರವೇಶದ ಕಾಳಜಿಯನ್ನು ಪರಿಹರಿಸಬಹುದಾದ ವಿಧಾನಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಸೂಕ್ತವಾದ ಲಾಕ್ಷಣಿಕ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಸಂವಾದಾತ್ಮಕ ಘಟಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸಂವಾದಾತ್ಮಕ ಘಟಕಗಳಾದ ಮೋಡಲ್ ಡೈಲಾಗ್‌ಗಳು, ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ಮತ್ತು ಕಸ್ಟಮ್ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸ್ಪರ್ಶ, ಮೌಸ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಸಂಬಂಧಿತ WAI - ARIA ಪಾತ್ರಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು (ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹವು) ಬಳಸಿಕೊಂಡು ಈ ಘಟಕಗಳು ಅರ್ಥವಾಗುವಂತೆ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸಬಲ್ಲವು.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಘಟಕಗಳು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಸಾಕಷ್ಟು ಸಾರ್ವತ್ರಿಕವಾಗಿರುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿರುವುದರಿಂದ, ಲೇಖಕರು ತಮ್ಮ ಘಟಕದ ನಿಖರವಾದ ಸ್ವರೂಪ ಮತ್ತು ಕಾರ್ಯವನ್ನು ಹೆಚ್ಚು ನಿಖರವಾಗಿ ತಿಳಿಸಲು ಹೆಚ್ಚಿನ ARIA ಪಾತ್ರಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ಸೇರಿಸಬೇಕಾಗಬಹುದು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ದಸ್ತಾವೇಜನ್ನು ಗಮನಿಸಲಾಗಿದೆ.

ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್

ಪ್ರಸ್ತುತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರೂಪಿಸುವ ಬಣ್ಣಗಳ ಕೆಲವು ಸಂಯೋಜನೆಗಳು-ಬಟನ್ ವ್ಯತ್ಯಾಸಗಳು, ಎಚ್ಚರಿಕೆಯ ವ್ಯತ್ಯಾಸಗಳು, ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ಸೂಚಕಗಳಂತಹ ವಿಷಯಗಳಿಗಾಗಿ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಾದ್ಯಂತ ಬಳಸಲಾಗುತ್ತದೆ- ಸಾಕಷ್ಟು ಬಣ್ಣ ವ್ಯತಿರಿಕ್ತತೆಗೆ ಕಾರಣವಾಗಬಹುದು (ಶಿಫಾರಸು ಮಾಡಲಾದ WCAG 2.1 ಪಠ್ಯ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ 4.5:1 ರ ಕೆಳಗೆ ಮತ್ತು WCAG 2.1 ಪಠ್ಯೇತರ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ 3:1 ), ವಿಶೇಷವಾಗಿ ಬೆಳಕಿನ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸಿದಾಗ. ಲೇಖಕರು ತಮ್ಮ ಬಣ್ಣದ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಪ್ರೋತ್ಸಾಹಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ, ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಈ ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮಾರ್ಪಡಿಸಿ/ವಿಸ್ತರಿಸುತ್ತಾರೆ.

ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡಿದ ವಿಷಯ

ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡಬೇಕಾದ, ಆದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ವಿಷಯವನ್ನು .visually-hiddenವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಶೈಲಿಯನ್ನು ಮಾಡಬಹುದು. ದೃಶ್ಯವಲ್ಲದ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚುವರಿ ದೃಶ್ಯ ಮಾಹಿತಿ ಅಥವಾ ಸೂಚನೆಗಳನ್ನು (ಬಣ್ಣದ ಬಳಕೆಯ ಮೂಲಕ ಸೂಚಿಸುವಂತಹ ಅರ್ಥ) ಸಹ ತಿಳಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

ಸಾಂಪ್ರದಾಯಿಕ "ಸ್ಕಿಪ್" ಲಿಂಕ್‌ಗಳಂತಹ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡಿದ ಸಂವಾದಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ, .visually-hidden-focusableವರ್ಗವನ್ನು ಬಳಸಿ. ಒಮ್ಮೆ ಕೇಂದ್ರೀಕರಿಸಿದಾಗ ನಿಯಂತ್ರಣವು ಗೋಚರಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ (ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ). ಹಿಂದಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿನ ಸಮಾನ ಮತ್ತು ತರಗತಿಗಳಿಗೆ ಹೋಲಿಸಿದರೆ , ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5 ಒಂದು ಸ್ವತಂತ್ರ ವರ್ಗವಾಗಿದೆ ಮತ್ತು ವರ್ಗದೊಂದಿಗೆ ಸಂಯೋಜನೆಯಲ್ಲಿ ಬಳಸಬಾರದು ..sr-only.sr-only-focusable.visually-hidden-focusable.visually-hidden

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

ಕಡಿಮೆಯಾದ ಚಲನೆ

prefers-reduced-motionಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮಾಧ್ಯಮ ವೈಶಿಷ್ಟ್ಯಕ್ಕೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ . ಬಳಕೆದಾರರು ಕಡಿಮೆ ಚಲನೆಗೆ ತಮ್ಮ ಆದ್ಯತೆಯನ್ನು ಸೂಚಿಸಲು ಅನುಮತಿಸುವ ಬ್ರೌಸರ್‌ಗಳು/ಪರಿಸರಗಳಲ್ಲಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಹೆಚ್ಚಿನ CSS ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮಗಳು (ಉದಾಹರಣೆಗೆ, ಮಾದರಿ ಸಂವಾದವನ್ನು ತೆರೆದಾಗ ಅಥವಾ ಮುಚ್ಚಿದಾಗ ಅಥವಾ ಏರಿಳಿಕೆಗಳಲ್ಲಿ ಸ್ಲೈಡಿಂಗ್ ಅನಿಮೇಷನ್) ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಅನಿಮೇಷನ್‌ಗಳು ( ಉದಾಹರಣೆಗೆ ಸ್ಪಿನ್ನರ್‌ಗಳು) ನಿಧಾನವಾಗುತ್ತದೆ.

ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ prefers-reduced-motionಮತ್ತು ಬಳಕೆದಾರರು ಕಡಿಮೆ ಚಲನೆಯನ್ನು ಬಯಸುತ್ತಾರೆ ಎಂದು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸದಿರುವಲ್ಲಿ (ಅಂದರೆ ಎಲ್ಲಿ ), ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಸ್ತಿಯನ್ನು prefers-reduced-motion: no-preferenceಬಳಸಿಕೊಂಡು ಸುಗಮ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ .scroll-behavior

ಹೆಚ್ಚುವರಿ ಸಂಪನ್ಮೂಲಗಳು