ಲಭ್ಯವಿರುವ ಗ್ಲಿಫ್‌ಗಳು

Glyphicon Halflings ಸೆಟ್‌ನಿಂದ ಫಾಂಟ್ ಸ್ವರೂಪದಲ್ಲಿ 250 ಕ್ಕೂ ಹೆಚ್ಚು ಗ್ಲಿಫ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. Glyphicons Halflings ಸಾಮಾನ್ಯವಾಗಿ ಉಚಿತವಾಗಿ ಲಭ್ಯವಿರುವುದಿಲ್ಲ, ಆದರೆ ಅವುಗಳ ರಚನೆಕಾರರು ಅವುಗಳನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ಉಚಿತವಾಗಿ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಿದ್ದಾರೆ. ಧನ್ಯವಾದವಾಗಿ, ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಗ್ಲಿಫಿಕಾನ್ಸ್‌ಗೆ ಲಿಂಕ್ ಅನ್ನು ಸೇರಿಸಲು ಮಾತ್ರ ನಾವು ಕೇಳುತ್ತೇವೆ .

ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ನಕ್ಷತ್ರ
glyphicon glyphicon-plus
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಯೂರೋ
glyphicon glyphicon-eur
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಮೈನಸ್
glyphicon glyphicon-ಮೋಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹೊದಿಕೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪೆನ್ಸಿಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಗ್ಲಾಸ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸಂಗೀತ
glyphicon glyphicon-ಹುಡುಕಾಟ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹೃದಯ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸ್ಟಾರ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸ್ಟಾರ್-ಖಾಲಿ
glyphicon glyphicon-ಬಳಕೆದಾರ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫಿಲ್ಮ್
glyphicon glyphicon-th-ದೊಡ್ಡದು
glyphicon glyphicon-ನೇ
glyphicon glyphicon-th-list
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸರಿ
glyphicon glyphicon-ತೆಗೆದುಹಾಕು
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಫ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸಿಗ್ನಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕಾಗ್
glyphicon glyphicon-ಕಸ
glyphicon glyphicon-ಮನೆ
glyphicon glyphicon-file
glyphicon glyphicon-ಸಮಯ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಸ್ತೆ
glyphicon glyphicon-download-alt
glyphicon glyphicon-ಡೌನ್ಲೋಡ್
glyphicon glyphicon-ಅಪ್ಲೋಡ್
glyphicon glyphicon-ಇನ್ಬಾಕ್ಸ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪ್ಲೇ-ಸರ್ಕಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪುನರಾವರ್ತನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಿಫ್ರೆಶ್
glyphicon glyphicon-list-alt
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಲಾಕ್
glyphicon glyphicon-ಧ್ವಜ
glyphicon glyphicon-ಹೆಡ್ಫೋನ್ಗಳು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಾಲ್ಯೂಮ್-ಆಫ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಾಲ್ಯೂಮ್-ಡೌನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಾಲ್ಯೂಮ್-ಅಪ್
glyphicon glyphicon-qrcode
glyphicon glyphicon-ಬಾರ್ಕೋಡ್
glyphicon glyphicon-ಟ್ಯಾಗ್
glyphicon glyphicon-ಟ್ಯಾಗ್ಗಳು
glyphicon glyphicon-ಪುಸ್ತಕ
glyphicon glyphicon-bookmark
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪ್ರಿಂಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕ್ಯಾಮೆರಾ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫಾಂಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬೋಲ್ಡ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಇಟಾಲಿಕ್
glyphicon glyphicon-ಪಠ್ಯ-ಎತ್ತರ
glyphicon glyphicon-ಪಠ್ಯ-ಅಗಲ
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-ಪಟ್ಟಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಇಂಡೆಂಟ್-ಎಡ
glyphicon glyphicon-ಇಂಡೆಂಟ್-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫೇಸ್ಟೈಮ್-ವೀಡಿಯೋ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಚಿತ್ರ
glyphicon glyphicon-map-marker
glyphicon glyphicon-ಹೊಂದಾಣಿಕೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಟಿಂಟ್
glyphicon glyphicon-ಸಂಪಾದಿಸು
glyphicon glyphicon-ಹಂಚಿಕೆ
glyphicon glyphicon-ಚೆಕ್
glyphicon glyphicon-ಚಲನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹೆಜ್ಜೆ-ಹಿಂದಕ್ಕೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವೇಗವಾಗಿ-ಹಿಂದುಳಿದ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹಿಂದುಳಿದ
glyphicon glyphicon-play
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿರಾಮ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸ್ಟಾಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫಾರ್ವರ್ಡ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫಾಸ್ಟ್-ಫಾರ್ವರ್ಡ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹೆಜ್ಜೆ-ಮುಂದಕ್ಕೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಎಜೆಕ್ಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಚೆವ್ರಾನ್-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಚೆವ್ರಾನ್-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪ್ಲಸ್-ಚಿನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಮೈನಸ್-ಚಿಹ್ನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತೆಗೆದುಹಾಕು-ಚಿಹ್ನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸರಿ-ಚಿಹ್ನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪ್ರಶ್ನೆ-ಚಿಹ್ನೆ
glyphicon glyphicon-ಮಾಹಿತಿ-ಚಿಹ್ನೆ
glyphicon glyphicon-ಸ್ಕ್ರೀನ್ಶಾಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತೆಗೆದುಹಾಕು-ವೃತ್ತ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಓಕೆ-ಸರ್ಕಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬ್ಯಾನ್-ಸರ್ಕಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬಾಣ-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬಾಣ-ಬಲ
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಿಸೈಜ್-ಸಣ್ಣ
glyphicon glyphicon-ಆಶ್ಚರ್ಯ-ಚಿಹ್ನೆ
glyphicon glyphicon-ಉಡುಗೊರೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಎಲೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬೆಂಕಿ
glyphicon glyphicon-ಕಣ್ಣು-ತೆರೆದ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕಣ್ಣು-ಮುಚ್ಚಿ
glyphicon glyphicon-ಎಚ್ಚರಿಕೆ-ಚಿಹ್ನೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪ್ಲೇನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕ್ಯಾಲೆಂಡರ್
glyphicon glyphicon-ಯಾದೃಚ್ಛಿಕ
glyphicon glyphicon-ಕಾಮೆಂಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಮ್ಯಾಗ್ನೆಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಚೆವ್ರಾನ್-ಅಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಚೆವ್ರಾನ್-ಡೌನ್
glyphicon glyphicon-retweet
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಶಾಪಿಂಗ್ ಕಾರ್ಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫೋಲ್ಡರ್-ಕ್ಲೋಸ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫೋಲ್ಡರ್-ಓಪನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಿಸೈಜ್-ಲಂಬ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರೀಸೈಜ್-ಅಡ್ಡ
glyphicon glyphicon-hdd
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬುಲ್ಹಾರ್ನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬೆಲ್
glyphicon glyphicon-ಪ್ರಮಾಣಪತ್ರ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಥಂಬ್ಸ್-ಅಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಥಂಬ್ಸ್-ಡೌನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕೈ-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕೈ-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹ್ಯಾಂಡ್-ಅಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಹ್ಯಾಂಡ್-ಡೌನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವೃತ್ತ-ಬಾಣ-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವೃತ್ತ-ಬಾಣ-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸರ್ಕಲ್-ಆರೋ-ಅಪ್
glyphicon glyphicon-ವೃತ್ತ-ಬಾಣ-ಕೆಳಗೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಗ್ಲೋಬ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವ್ರೆಂಚ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕಾರ್ಯಗಳು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫಿಲ್ಟರ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬ್ರೀಫ್ಕೇಸ್
glyphicon glyphicon-ಪೂರ್ಣಪರದೆ
glyphicon glyphicon-ಡ್ಯಾಶ್ಬೋರ್ಡ್
glyphicon glyphicon-paperclip
glyphicon glyphicon-ಹೃದಯ-ಖಾಲಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಲಿಂಕ್
glyphicon glyphicon-ಫೋನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪುಶ್ಪಿನ್
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಣೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಿಸಿ-ವರ್ಣಮಾಲೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಿಸಿ-ಆಲ್ಫಾಬೆಟ್-ಆಲ್ಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಿಸಿ-ಆದೇಶ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಿಸಿ-ಆದೇಶ-ಆಲ್ಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಂಗಡಣೆ-ಗುಣಲಕ್ಷಣಗಳು
glyphicon glyphicon-sort-by-attributes-alt
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪರಿಶೀಲಿಸಲಾಗಿಲ್ಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವಿಸ್ತರಿಸು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕುಸಿತ-ಕೆಳಗೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕುಸಿತ-ಅಪ್
glyphicon glyphicon-log-in
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಶ್
glyphicon glyphicon-log-out
glyphicon glyphicon-ಹೊಸ-ಕಿಟಕಿ
glyphicon glyphicon-ದಾಖಲೆ
glyphicon glyphicon-ಉಳಿಸಿ
glyphicon glyphicon-ತೆರೆದ
glyphicon glyphicon-ಉಳಿಸಲಾಗಿದೆ
glyphicon glyphicon-ಆಮದು
glyphicon glyphicon-ರಫ್ತು
glyphicon glyphicon-ಕಳುಹಿಸು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಪಿ-ಡಿಸ್ಕ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಪಿ-ಉಳಿಸಲಾಗಿದೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಪಿ-ತೆಗೆದುಹಾಕು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಪಿ-ಸೇವ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಫ್ಲಾಪಿ-ಓಪನ್
glyphicon glyphicon-ಕ್ರೆಡಿಟ್-ಕಾರ್ಡ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ವರ್ಗಾವಣೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕಟ್ಲರಿ
glyphicon glyphicon-ಹೆಡರ್
glyphicon glyphicon-ಸಂಕುಚಿತ
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-ಗೋಪುರ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಅಂಕಿಅಂಶಗಳು
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-ಉಪಶೀರ್ಷಿಕೆಗಳು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸೌಂಡ್-ಸ್ಟಿರಿಯೊ
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-ಹಕ್ಕುಸ್ವಾಮ್ಯ-ಗುರುತು
glyphicon glyphicon-ನೋಂದಣಿ-ಗುರುತು
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಟ್ರೀ-ಕೋನಿಫರ್
glyphicon glyphicon-ಮರ-ಪತನಶೀಲ
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-ಓಪನ್-ಫೈಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಲೆವೆಲ್-ಅಪ್
glyphicon glyphicon-ನಕಲು
glyphicon glyphicon-ಪೇಸ್ಟ್
glyphicon glyphicon-ಎಚ್ಚರಿಕೆ
glyphicon glyphicon-equalizer
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಾಜ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಾಣಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪಾನ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬಿಷಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ನೈಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಬೇಬಿ-ಫಾರ್ಮುಲಾ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಟೆಂಟ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕಪ್ಪು ಹಲಗೆ
glyphicon glyphicon-ಹಾಸಿಗೆ
glyphicon glyphicon-ಸೇಬು
glyphicon glyphicon-ಅಳಿಸಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಮರಳು ಗಡಿಯಾರ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ದೀಪ
glyphicon glyphicon-ನಕಲು
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಪಿಗ್ಗಿ-ಬ್ಯಾಂಕ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಕತ್ತರಿ
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಯೆನ್
glyphicon glyphicon-jpy
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರೂಬಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ರಬ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸ್ಕೇಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಐಸ್-ಲಾಲಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಐಸ್-ಲಾಲಿ-ರುಚಿ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಶಿಕ್ಷಣ
glyphicon glyphicon-ಆಯ್ಕೆ-ಸಮತಲ
glyphicon glyphicon-ಆಯ್ಕೆ-ಲಂಬ
glyphicon glyphicon-menu-hamburger
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಮೋಡಲ್-ವಿಂಡೋ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತೈಲ
glyphicon glyphicon-ಧಾನ್ಯ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸನ್ಗ್ಲಾಸ್
glyphicon glyphicon-ಪಠ್ಯ-ಗಾತ್ರ
glyphicon glyphicon-ಪಠ್ಯ-ಬಣ್ಣ
glyphicon glyphicon-ಪಠ್ಯ-ಹಿನ್ನೆಲೆ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಟಾಪ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಬಾಟಮ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಅಡ್ಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಲಂಬ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಆಬ್ಜೆಕ್ಟ್-ಅಲೈನ್-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತ್ರಿಕೋನ-ಬಲ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತ್ರಿಕೋನ-ಎಡ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತ್ರಿಕೋನ-ಕೆಳಭಾಗ
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ತ್ರಿಕೋನ-ಮೇಲ್ಭಾಗ
glyphicon glyphicon-ಕನ್ಸೋಲ್
ಗ್ಲಿಫಿಕಾನ್ ಗ್ಲಿಫಿಕಾನ್-ಸೂಪರ್ಸ್ಕ್ರಿಪ್ಟ್
glyphicon glyphicon-subscript
glyphicon glyphicon-ಮೆನು-ಎಡ
glyphicon glyphicon-ಮೆನು-ಬಲ
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

ಬಳಸುವುದು ಹೇಗೆ

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, ಎಲ್ಲಾ ಐಕಾನ್‌ಗಳಿಗೆ ಮೂಲ ವರ್ಗ ಮತ್ತು ವೈಯಕ್ತಿಕ ಐಕಾನ್ ವರ್ಗದ ಅಗತ್ಯವಿರುತ್ತದೆ. ಬಳಸಲು, ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಎಲ್ಲಿಯಾದರೂ ಇರಿಸಿ. ಸರಿಯಾದ ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ ಐಕಾನ್ ಮತ್ತು ಪಠ್ಯದ ನಡುವೆ ಜಾಗವನ್ನು ಬಿಡಲು ಮರೆಯದಿರಿ.

ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ

ಐಕಾನ್ ವರ್ಗಗಳನ್ನು ನೇರವಾಗಿ ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ. ಅದೇ ಅಂಶದ ಮೇಲೆ ಇತರ ವರ್ಗಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ಬಳಸಬಾರದು. ಬದಲಿಗೆ, ನೆಸ್ಟೆಡ್ ಅನ್ನು ಸೇರಿಸಿ <span>ಮತ್ತು ಐಕಾನ್ ತರಗತಿಗಳನ್ನು ಗೆ ಅನ್ವಯಿಸಿ <span>.

ಖಾಲಿ ಅಂಶಗಳ ಬಳಕೆಗೆ ಮಾತ್ರ

ಯಾವುದೇ ಪಠ್ಯ ವಿಷಯವನ್ನು ಹೊಂದಿರದ ಮತ್ತು ಮಕ್ಕಳ ಅಂಶಗಳನ್ನು ಹೊಂದಿರದ ಅಂಶಗಳ ಮೇಲೆ ಮಾತ್ರ ಐಕಾನ್ ತರಗತಿಗಳನ್ನು ಬಳಸಬೇಕು.

ಐಕಾನ್ ಫಾಂಟ್ ಸ್ಥಳವನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತಿದೆ

../fonts/ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಐಕಾನ್ ಫಾಂಟ್ ಫೈಲ್‌ಗಳು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಫೈಲ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿದೆ ಎಂದು ಊಹಿಸುತ್ತದೆ . ಆ ಫಾಂಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸರಿಸುವುದು ಅಥವಾ ಮರುಹೆಸರಿಸುವುದು ಎಂದರೆ CSS ಅನ್ನು ಮೂರು ವಿಧಾನಗಳಲ್ಲಿ ಒಂದನ್ನು ನವೀಕರಿಸುವುದು:

ಮೂಲದಲ್ಲಿ @icon-font-pathಮತ್ತು/ಅಥವಾ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿ ಕಡಿಮೆ ಫೈಲ್‌ಗಳು.@icon-font-name
ಕಡಿಮೆ ಕಂಪೈಲರ್ ಒದಗಿಸಿದ ಸಂಬಂಧಿತ URL ಗಳ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಳ್ಳಿ .
url()ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಮಾರ್ಗಗಳನ್ನು ಬದಲಾಯಿಸಿ .

ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಭಿವೃದ್ಧಿ ಸೆಟಪ್‌ಗೆ ಸೂಕ್ತವಾದ ಯಾವುದೇ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿ.

ಪ್ರವೇಶಿಸಬಹುದಾದ ಐಕಾನ್‌ಗಳು

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಆಧುನಿಕ ಆವೃತ್ತಿಗಳು CSS ರಚಿತವಾದ ವಿಷಯವನ್ನು ಹಾಗೂ ನಿರ್ದಿಷ್ಟ ಯೂನಿಕೋಡ್ ಅಕ್ಷರಗಳನ್ನು ಪ್ರಕಟಿಸುತ್ತವೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಲ್ಲಿ ಅನಪೇಕ್ಷಿತ ಮತ್ತು ಗೊಂದಲಮಯವಾದ ಔಟ್‌ಪುಟ್ ಅನ್ನು ತಪ್ಪಿಸಲು (ವಿಶೇಷವಾಗಿ ಐಕಾನ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅಲಂಕಾರಕ್ಕಾಗಿ ಬಳಸಿದಾಗ), ನಾವು ಅವುಗಳನ್ನು aria-hidden="true"ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಮರೆಮಾಡುತ್ತೇವೆ.

ನೀವು ಅರ್ಥವನ್ನು ತಿಳಿಸಲು ಐಕಾನ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ (ಅಲಂಕಾರಿಕ ಅಂಶವಾಗಿ ಮಾತ್ರ), ಈ ಅರ್ಥವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ತಿಳಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ - ಉದಾಹರಣೆಗೆ, ಹೆಚ್ಚುವರಿ ವಿಷಯವನ್ನು ಸೇರಿಸಿ, ದೃಷ್ಟಿಗೋಚರವಾಗಿ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿದೆ.

ನೀವು ಯಾವುದೇ ಪಠ್ಯದೊಂದಿಗೆ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸುತ್ತಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ <button>ಕೇವಲ ಐಕಾನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವಂತಹ), ನಿಯಂತ್ರಣದ ಉದ್ದೇಶವನ್ನು ಗುರುತಿಸಲು ನೀವು ಯಾವಾಗಲೂ ಪರ್ಯಾಯ ವಿಷಯವನ್ನು ಒದಗಿಸಬೇಕು, ಇದರಿಂದಾಗಿ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಇದು ಅರ್ಥವಾಗುತ್ತದೆ. aria-labelಈ ಸಂದರ್ಭದಲ್ಲಿ, ನೀವು ನಿಯಂತ್ರಣದಲ್ಲಿಯೇ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಬಹುದು .

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ಉದಾಹರಣೆಗಳು

ಟೂಲ್‌ಬಾರ್, ನ್ಯಾವಿಗೇಶನ್ ಅಥವಾ ಪೂರ್ವಭಾವಿ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳು, ಬಟನ್ ಗುಂಪುಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಬಳಸಿ.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ಇದು ದೋಷ ಸಂದೇಶ ಎಂದು ತಿಳಿಸಲು ಎಚ್ಚರಿಕೆಯಲ್ಲಿ ಬಳಸಲಾದ ಐಕಾನ್ .sr-only, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಈ ಸುಳಿವನ್ನು ತಿಳಿಸಲು ಹೆಚ್ಚುವರಿ ಪಠ್ಯದೊಂದಿಗೆ.

ಮಾನ್ಯವಾದ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ, ಸಂದರ್ಭೋಚಿತ ಮೆನು. ಡ್ರಾಪ್‌ಡೌನ್ JavaScript ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡಲಾಗಿದೆ .

ಉದಾಹರಣೆ

ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಪ್ರಚೋದಕ ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಒಳಗೆ .dropdownಅಥವಾ ಘೋಷಿಸುವ ಇನ್ನೊಂದು ಅಂಶವನ್ನು ಸುತ್ತಿ position: relative;. ನಂತರ ಮೆನುವಿನ HTML ಅನ್ನು ಸೇರಿಸಿ.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupಪೋಷಕರಿಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಮೇಲಕ್ಕೆ ವಿಸ್ತರಿಸಲು (ಕೆಳಕ್ಕೆ ಬದಲಾಗಿ) ಬದಲಾಯಿಸಬಹುದು .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ಜೋಡಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೇಲಿನಿಂದ ಮತ್ತು ಅದರ ಪೋಷಕರ ಎಡಭಾಗದಲ್ಲಿ 100% ಸ್ಥಾನದಲ್ಲಿರುತ್ತದೆ. ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸಲು .dropdown-menu-righta ಗೆ ಸೇರಿಸಿ ..dropdown-menu

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

ಹೆಡರ್‌ಗಳು

ಯಾವುದೇ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನಲ್ಲಿ ಕ್ರಿಯೆಗಳ ವಿಭಾಗಗಳನ್ನು ಲೇಬಲ್ ಮಾಡಲು ಹೆಡರ್ ಸೇರಿಸಿ.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ವಿಭಾಜಕ

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನಲ್ಲಿ ಲಿಂಕ್‌ಗಳ ಪ್ರತ್ಯೇಕ ಸರಣಿಗೆ ವಿಭಾಜಕವನ್ನು ಸೇರಿಸಿ.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಮೆನು ಐಟಂಗಳು

ಲಿಂಕ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ .disableda ಗೆ ಸೇರಿಸಿ .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ಬಟನ್ ಗುಂಪಿನೊಂದಿಗೆ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಬಟನ್‌ಗಳ ಸರಣಿಯನ್ನು ಗುಂಪು ಮಾಡಿ. ನಮ್ಮ ಬಟನ್‌ಗಳ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಐಚ್ಛಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರೇಡಿಯೋ ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್ ಶೈಲಿಯ ನಡವಳಿಕೆಯನ್ನು ಸೇರಿಸಿ .

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

ಒಂದು ಒಳಗಿನ ಅಂಶಗಳ ಮೇಲೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಅಥವಾ ಪಾಪೋವರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಅನಗತ್ಯ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸುವ .btn-groupಆಯ್ಕೆಯನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ container: 'body'(ಉದಾಹರಣೆಗೆ ಅಂಶವು ಅಗಲವಾಗಿ ಬೆಳೆಯುವುದು ಮತ್ತು/ಅಥವಾ ಟೂಲ್‌ಟಿಪ್ ಅಥವಾ ಪಾಪೋವರ್ ಪ್ರಚೋದಿಸಿದಾಗ ಅದರ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದು).

ಸರಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ `role`ಮತ್ತು ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸಿ

ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗಾಗಿ - ಬಟನ್‌ಗಳ ಸರಣಿಯನ್ನು ಗುಂಪು ಮಾಡಲಾಗಿದೆ ಎಂದು ತಿಳಿಸಲು, ಸೂಕ್ತವಾದ roleಗುಣಲಕ್ಷಣವನ್ನು ಒದಗಿಸುವ ಅಗತ್ಯವಿದೆ. ಬಟನ್ ಗುಂಪುಗಳಿಗೆ, ಇದು role="group", ಟೂಲ್‌ಬಾರ್‌ಗಳು ಒಂದು role="toolbar".

ಒಂದು ಅಪವಾದವೆಂದರೆ ಒಂದೇ ನಿಯಂತ್ರಣವನ್ನು ಹೊಂದಿರುವ ಗುಂಪುಗಳು (ಉದಾಹರಣೆಗೆ ಅಂಶಗಳೊಂದಿಗೆ ಸಮರ್ಥನೀಯ ಬಟನ್ ಗುಂಪುಗಳು<button> ) ಅಥವಾ ಡ್ರಾಪ್‌ಡೌನ್.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಗುಂಪುಗಳು ಮತ್ತು ಟೂಲ್‌ಬಾರ್‌ಗಳಿಗೆ ಸ್ಪಷ್ಟವಾದ ಲೇಬಲ್ ಅನ್ನು ನೀಡಬೇಕು, ಏಕೆಂದರೆ ಹೆಚ್ಚಿನ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಸರಿಯಾದ roleಗುಣಲಕ್ಷಣದ ಉಪಸ್ಥಿತಿಯ ಹೊರತಾಗಿಯೂ ಅವುಗಳನ್ನು ಪ್ರಕಟಿಸುವುದಿಲ್ಲ. ಇಲ್ಲಿ ಒದಗಿಸಲಾದ ಉದಾಹರಣೆಗಳಲ್ಲಿ, ನಾವು ಬಳಸುತ್ತೇವೆ aria-label, ಆದರೆ ಪರ್ಯಾಯಗಳನ್ನು aria-labelledbyಸಹ ಬಳಸಬಹುದು.

ಮೂಲ ಉದಾಹರಣೆ

.btnರಲ್ಲಿ ಬಟನ್‌ಗಳ ಸರಣಿಯನ್ನು ಕಟ್ಟಿಕೊಳ್ಳಿ .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಘಟಕಗಳಿಗೆ <div class="btn-group">ಒಂದು ಸೆಟ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ .<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ಗಾತ್ರ

ಗುಂಪಿನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಬಟನ್‌ಗೆ ಬಟನ್ ಗಾತ್ರದ ತರಗತಿಗಳನ್ನು ಅನ್ವಯಿಸುವ ಬದಲು, ಬಹು ಗುಂಪುಗಳನ್ನು ಗೂಡುಕಟ್ಟುವುದನ್ನು ಒಳಗೊಂಡಂತೆ .btn-group-*ಪ್ರತಿಯೊಂದಕ್ಕೂ ಸೇರಿಸಿ..btn-group

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ಗೂಡುಕಟ್ಟುವ

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಬಟನ್‌ಗಳ ಸರಣಿಯೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಲು ನೀವು ಬಯಸಿದಾಗ .btn-groupಇನ್ನೊಂದರಲ್ಲಿ ಇರಿಸಿ ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ಲಂಬ ವ್ಯತ್ಯಾಸ

ಬಟನ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಬದಲಾಗಿ ಲಂಬವಾಗಿ ಜೋಡಿಸಿದಂತೆ ಮಾಡಿ. ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಇಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ಸಮರ್ಥನೀಯ ಬಟನ್ ಗುಂಪುಗಳು

ಅದರ ಪೋಷಕನ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವ್ಯಾಪಿಸಲು ಸಮಾನ ಗಾತ್ರದಲ್ಲಿ ಗುಂಡಿಗಳ ಗುಂಪನ್ನು ವಿಸ್ತರಿಸಿ. ಬಟನ್ ಗುಂಪಿನೊಳಗೆ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಗಡಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ನಿರ್ದಿಷ್ಟ HTML ಮತ್ತು CSS ಗುಂಡಿಗಳನ್ನು ಸಮರ್ಥಿಸಲು ಬಳಸುವುದರಿಂದ (ಅವುಗಳೆಂದರೆ display: table-cell), ಅವುಗಳ ನಡುವಿನ ಗಡಿಗಳನ್ನು ದ್ವಿಗುಣಗೊಳಿಸಲಾಗಿದೆ. ಸಾಮಾನ್ಯ ಬಟನ್ ಗುಂಪುಗಳಲ್ಲಿ, margin-left: -1pxಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಬದಲು ಗಡಿಗಳನ್ನು ಜೋಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, marginಜೊತೆ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ display: table-cell. ಪರಿಣಾಮವಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ನಿಮ್ಮ ಗ್ರಾಹಕೀಕರಣಗಳನ್ನು ಅವಲಂಬಿಸಿ, ನೀವು ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಅಥವಾ ಮರು-ಬಣ್ಣ ಮಾಡಲು ಬಯಸಬಹುದು.

IE8 ಮತ್ತು ಗಡಿಗಳು

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ಸಮರ್ಥನೀಯ ಬಟನ್ ಗುಂಪಿನಲ್ಲಿರುವ ಬಟನ್‌ಗಳ ಮೇಲೆ ಗಡಿಗಳನ್ನು ನೀಡುವುದಿಲ್ಲ, ಅದು ಆನ್ ಆಗಿರಲಿ <a>ಅಥವಾ <button>ಅಂಶಗಳಾಗಿರಲಿ. ಅದನ್ನು ಸುತ್ತಲು, ಪ್ರತಿ ಗುಂಡಿಯನ್ನು ಇನ್ನೊಂದರಲ್ಲಿ ಕಟ್ಟಿಕೊಳ್ಳಿ .btn-group.

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ #12476 ನೋಡಿ .

`<a>`ಅಂಶಗಳೊಂದಿಗೆ _

.btnಗಳ ಸರಣಿಯನ್ನು ಸುತ್ತಿ .btn-group.btn-group-justified.

ಎಡಕ್ಕೆ ಮಧ್ಯಮ ಸರಿ

ಎಡಕ್ಕೆ ಮಧ್ಯಮ

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ಲಿಂಕ್‌ಗಳು ಬಟನ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ

ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಟನ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಬಳಸಿದರೆ <a>- ಪ್ರಸ್ತುತ ಪುಟದೊಳಗೆ ಮತ್ತೊಂದು ಡಾಕ್ಯುಮೆಂಟ್ ಅಥವಾ ವಿಭಾಗಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಬದಲು ಪುಟದಲ್ಲಿನ ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ - ಅವುಗಳಿಗೆ ಸೂಕ್ತವಾದದನ್ನು ಸಹ ನೀಡಬೇಕು role="button".

`<button>`ಅಂಶಗಳೊಂದಿಗೆ _

<button>ಅಂಶಗಳೊಂದಿಗೆ ಸಮರ್ಥನೀಯ ಬಟನ್ ಗುಂಪುಗಳನ್ನು ಬಳಸಲು , ನೀವು ಪ್ರತಿ ಗುಂಡಿಯನ್ನು ಬಟನ್ ಗುಂಪಿನಲ್ಲಿ ಸುತ್ತಬೇಕು . ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್‌ಗಳು ಅಂಶಗಳಿಗೆ ಸಮರ್ಥನೆಗಾಗಿ ನಮ್ಮ CSS ಅನ್ನು ಸರಿಯಾಗಿ ಅನ್ವಯಿಸುವುದಿಲ್ಲ <button>, ಆದರೆ ನಾವು ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದರಿಂದ, ನಾವು ಅದರ ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಬಹುದು.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಎ ಒಳಗೆ ಇರಿಸುವ .btn-groupಮೂಲಕ ಮತ್ತು ಸರಿಯಾದ ಮೆನು ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಅದನ್ನು ಪ್ರಚೋದಿಸಲು ಯಾವುದೇ ಬಟನ್ ಅನ್ನು ಬಳಸಿ.

ಪ್ಲಗಿನ್ ಅವಲಂಬನೆ

ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಿಗೆ ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆವೃತ್ತಿಯಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್ ಪ್ಲಗಿನ್ ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ.

ಏಕ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಕೆಲವು ಮೂಲಭೂತ ಮಾರ್ಕ್ಅಪ್ ಬದಲಾವಣೆಗಳೊಂದಿಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಟಾಗಲ್ ಆಗಿ ಬಟನ್ ಅನ್ನು ತಿರುಗಿಸಿ.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಅಂತೆಯೇ, ಪ್ರತ್ಯೇಕ ಬಟನ್‌ನೊಂದಿಗೆ ಮಾತ್ರ ಅದೇ ಮಾರ್ಕ್‌ಅಪ್ ಬದಲಾವಣೆಗಳೊಂದಿಗೆ ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ರಚಿಸಿ.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ಗಾತ್ರ

ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಎಲ್ಲಾ ಗಾತ್ರದ ಬಟನ್‌ಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ಡ್ರಾಪ್ಅಪ್ ಬದಲಾವಣೆ

.dropupಪೋಷಕರಿಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಅಂಶಗಳ ಮೇಲಿನ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಟ್ರಿಗರ್ ಮಾಡಿ.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ಯಾವುದೇ ಪಠ್ಯ ಆಧಾರಿತ ಪಠ್ಯದ ಮೊದಲು, ನಂತರ ಅಥವಾ ಎರಡೂ ಬದಿಗಳಲ್ಲಿ ಪಠ್ಯ ಅಥವಾ ಬಟನ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ವಿಸ್ತರಿಸಿ <input>. .input-groupಒಂದು ಜೊತೆ ಬಳಸಿ .input-group-addonಅಥವಾ .input-group-btnಪೂರ್ವಭಾವಿಯಾಗಿ ಅಥವಾ ಅಂಶಗಳನ್ನು ಏಕಕ್ಕೆ ಸೇರಿಸಲು .form-control.

ಪಠ್ಯ `<input>`ರು ಮಾತ್ರ

<select>ವೆಬ್‌ಕಿಟ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗದ ಕಾರಣ ಇಲ್ಲಿ ಅಂಶಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ .

<textarea>ಇಲ್ಲಿ ಅಂಶಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ ಏಕೆಂದರೆ rowsಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಅವುಗಳ ಗುಣಲಕ್ಷಣವನ್ನು ಗೌರವಿಸಲಾಗುವುದಿಲ್ಲ.

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿನ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪ್‌ವರ್‌ಗಳಿಗೆ ವಿಶೇಷ ಸೆಟ್ಟಿಂಗ್ ಅಗತ್ಯವಿದೆ

ಒಂದು ಒಳಗಿನ ಅಂಶಗಳ ಮೇಲೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಅಥವಾ ಪಾಪೋವರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಅನಗತ್ಯ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸಲು .input-groupನೀವು ಆಯ್ಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ container: 'body'(ಉದಾಹರಣೆಗೆ ಅಂಶವು ಅಗಲವಾಗಿ ಬೆಳೆಯುವುದು ಮತ್ತು/ಅಥವಾ ಟೂಲ್‌ಟಿಪ್ ಅಥವಾ ಪಾಪೋವರ್ ಪ್ರಚೋದಿಸಿದಾಗ ಅದರ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದು).

ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ

ಫಾರ್ಮ್ ಗುಂಪುಗಳು ಅಥವಾ ಗ್ರಿಡ್ ಕಾಲಮ್ ತರಗತಿಗಳನ್ನು ನೇರವಾಗಿ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ. ಬದಲಿಗೆ, ಫಾರ್ಮ್ ಗುಂಪು ಅಥವಾ ಗ್ರಿಡ್-ಸಂಬಂಧಿತ ಅಂಶದ ಒಳಗೆ ಇನ್‌ಪುಟ್ ಗುಂಪನ್ನು ನೆಸ್ಟ್ ಮಾಡಿ.

ಯಾವಾಗಲೂ ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ನೀವು ಪ್ರತಿ ಇನ್‌ಪುಟ್‌ಗೆ ಲೇಬಲ್ ಅನ್ನು ಸೇರಿಸದಿದ್ದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ತೊಂದರೆಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. ಈ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಿಗೆ, ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಲೇಬಲ್ ಅಥವಾ ಕಾರ್ಯವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ರವಾನಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಬಳಸಬೇಕಾದ ನಿಖರವಾದ ತಂತ್ರ (ಗೋಚರ <label>ಅಂಶಗಳು, ವರ್ಗವನ್ನು <label>ಬಳಸಿಕೊಂಡು ಮರೆಮಾಡಿದ ಅಂಶಗಳು, ಅಥವಾ , , , ಅಥವಾ ಗುಣಲಕ್ಷಣದ ಬಳಕೆ) ಮತ್ತು ಯಾವ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ತಿಳಿಸಬೇಕು ಎಂಬುದು ನೀವು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತಿರುವ ಇಂಟರ್ಫೇಸ್ ವಿಜೆಟ್‌ನ ನಿಖರ ಪ್ರಕಾರವನ್ನು ಅವಲಂಬಿಸಿ ಬದಲಾಗುತ್ತದೆ. ಈ ವಿಭಾಗದಲ್ಲಿನ ಉದಾಹರಣೆಗಳು ಕೆಲವು ಸೂಚಿಸಿದ, ಕೇಸ್-ನಿರ್ದಿಷ್ಟ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

ಮೂಲ ಉದಾಹರಣೆ

ಇನ್‌ಪುಟ್‌ನ ಎರಡೂ ಬದಿಯಲ್ಲಿ ಒಂದು ಆಡ್-ಆನ್ ಅಥವಾ ಬಟನ್ ಅನ್ನು ಇರಿಸಿ. ನೀವು ಇನ್‌ಪುಟ್‌ನ ಎರಡೂ ಬದಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಇರಿಸಬಹುದು.

ನಾವು ಒಂದೇ ಬದಿಯಲ್ಲಿ ಬಹು ಆಡ್-ಆನ್‌ಗಳನ್ನು ( .input-group-addonಅಥವಾ ) ಬೆಂಬಲಿಸುವುದಿಲ್ಲ..input-group-btn

ಒಂದೇ ಇನ್‌ಪುಟ್ ಗುಂಪಿನಲ್ಲಿ ನಾವು ಬಹು ಫಾರ್ಮ್-ನಿಯಂತ್ರಣಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ಗಾತ್ರ

ಸಾಪೇಕ್ಷ ಫಾರ್ಮ್ ಗಾತ್ರದ ವರ್ಗಗಳನ್ನು .input-groupಸ್ವತಃ ಸೇರಿಸಿ ಮತ್ತು ಒಳಗಿನ ವಿಷಯಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸುತ್ತವೆ-ಪ್ರತಿ ಅಂಶದ ಮೇಲೆ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ ಗಾತ್ರದ ತರಗತಿಗಳನ್ನು ಪುನರಾವರ್ತಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋ ಆಡ್ಆನ್ಗಳು

ಪಠ್ಯದ ಬದಲಿಗೆ ಇನ್‌ಪುಟ್ ಗುಂಪಿನ ಆಡ್‌ಆನ್‌ನಲ್ಲಿ ಯಾವುದೇ ಚೆಕ್‌ಬಾಕ್ಸ್ ಅಥವಾ ರೇಡಿಯೋ ಆಯ್ಕೆಯನ್ನು ಇರಿಸಿ.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ಬಟನ್ ಸೇರ್ಪಡೆಗಳು

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿನ ಬಟನ್‌ಗಳು ಸ್ವಲ್ಪ ಭಿನ್ನವಾಗಿರುತ್ತವೆ ಮತ್ತು ಒಂದು ಹೆಚ್ಚುವರಿ ಮಟ್ಟದ ಗೂಡುಕಟ್ಟುವ ಅಗತ್ಯವಿರುತ್ತದೆ. ಬದಲಿಗೆ .input-group-addon, ನೀವು ಬಟನ್‌ಗಳನ್ನು ಕಟ್ಟಲು ಬಳಸಬೇಕಾಗುತ್ತದೆ .input-group-btn. ಅತಿಕ್ರಮಿಸಲಾಗದ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಶೈಲಿಗಳ ಕಾರಣದಿಂದಾಗಿ ಇದು ಅಗತ್ಯವಿದೆ.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಬಟನ್‌ಗಳು

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ವಿಭಜಿತ ಗುಂಡಿಗಳು

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

ಬಹು ಗುಂಡಿಗಳು

ನೀವು ಪ್ರತಿ ಬದಿಯಲ್ಲಿ ಒಂದು ಆಡ್-ಆನ್ ಅನ್ನು ಮಾತ್ರ ಹೊಂದಬಹುದಾದರೂ, ಒಂದೇ ಒಂದು ಒಳಗೆ ನೀವು ಬಹು ಬಟನ್‌ಗಳನ್ನು ಹೊಂದಬಹುದು .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ನಾವ್‌ಗಳು ಬೇಸ್ .navಕ್ಲಾಸ್‌ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ಹಂಚಿಕೊಂಡಿವೆ, ಜೊತೆಗೆ ಹಂಚಿದ ರಾಜ್ಯಗಳನ್ನು ಹೊಂದಿವೆ. ಪ್ರತಿ ಶೈಲಿಯ ನಡುವೆ ಬದಲಾಯಿಸಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಬದಲಾಯಿಸಿ.

ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್‌ಗಳಿಗಾಗಿ navs ಅನ್ನು ಬಳಸುವುದಕ್ಕೆ JavaScript ಟ್ಯಾಬ್‌ಗಳ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶಗಳೊಂದಿಗೆ ಟ್ಯಾಬ್‌ಗಳಿಗಾಗಿ, ನೀವು ಟ್ಯಾಬ್‌ಗಳನ್ನು ಬಳಸಬೇಕು JavaScript ಪ್ಲಗಿನ್ . ಮಾರ್ಕ್‌ಅಪ್‌ಗೆ ಹೆಚ್ಚುವರಿ roleಮತ್ತು ARIA ಗುಣಲಕ್ಷಣಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ - ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ ಪ್ಲಗಿನ್‌ನ ಉದಾಹರಣೆ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ನೋಡಿ.

ನ್ಯಾವಿಗೇಷನ್ ಆಗಿ ಬಳಸುವ navs ಅನ್ನು ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡಿ

role="navigation"ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ಒದಗಿಸಲು ನೀವು navs ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ , ನ ಅತ್ಯಂತ ತಾರ್ಕಿಕ ಮೂಲ ಕಂಟೇನರ್‌ಗೆ a ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ ಅಥವಾ ಸಂಪೂರ್ಣ ನ್ಯಾವಿಗೇಶನ್‌ನ ಸುತ್ತಲೂ <ul>ಒಂದು ಅಂಶವನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ. <nav>ಪಾತ್ರವನ್ನು <ul>ಸ್ವತಃ ಸೇರಿಸಬೇಡಿ, ಏಕೆಂದರೆ ಇದು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಮೂಲಕ ನಿಜವಾದ ಪಟ್ಟಿಯಾಗಿ ಘೋಷಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಟ್ಯಾಬ್‌ಗಳು

ವರ್ಗಕ್ಕೆ ಮೂಲ .nav-tabsವರ್ಗದ ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ಮಾತ್ರೆಗಳು

ಅದೇ HTML ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಆದರೆ .nav-pillsಬದಲಿಗೆ ಬಳಸಿ:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ಮಾತ್ರೆಗಳು ಲಂಬವಾಗಿ ಕೂಡಿರುತ್ತವೆ. ಕೇವಲ ಸೇರಿಸಿ .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

ಸಮರ್ಥನೆ

768px ಗಿಂತ ಅಗಲವಾದ ಪರದೆಗಳಲ್ಲಿ ಅವರ ಪೋಷಕರ ಸಮಾನ ಅಗಲದ ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಮಾತ್ರೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಿ .nav-justified. ಚಿಕ್ಕ ಪರದೆಯ ಮೇಲೆ, ನ್ಯಾವಿಕ್ ಲಿಂಕ್‌ಗಳನ್ನು ಜೋಡಿಸಲಾಗಿದೆ.

ಸಮರ್ಥಿಸಲಾದ navbar nav ಲಿಂಕ್‌ಗಳು ಪ್ರಸ್ತುತ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

ಸಫಾರಿ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಸಮರ್ಥನೆ ನ್ಯಾವ್ಸ್

v9.1.2 ರಂತೆ, ಸಫಾರಿ ದೋಷವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸುವುದರಿಂದ ರಿಫ್ರೆಶ್ ಮಾಡಿದ ನಂತರ ತೆರವುಗೊಂಡ ಸಮರ್ಥನೀಯ ನ್ಯಾವಿಯಲ್ಲಿ ರೆಂಡರಿಂಗ್ ದೋಷಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ. ಈ ದೋಷವನ್ನು ಸಮರ್ಥಿಸಲಾದ nav ಉದಾಹರಣೆಯಲ್ಲಿ ಸಹ ತೋರಿಸಲಾಗಿದೆ .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಲಿಂಕ್‌ಗಳು

ಯಾವುದೇ ನ್ಯಾವ್ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ (ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಮಾತ್ರೆಗಳು), ಬೂದು ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಸೇರಿಸಿ .disabledಮತ್ತು ಯಾವುದೇ ಹೂವರ್ ಪರಿಣಾಮಗಳಿಲ್ಲ .

ಲಿಂಕ್ ಕಾರ್ಯಚಟುವಟಿಕೆಯು ಪ್ರಭಾವಿತವಾಗಿಲ್ಲ

ಈ ವರ್ಗವು ಅದರ ನೋಟವನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುತ್ತದೆ, <a>ಅದರ ಕಾರ್ಯವನ್ನು ಅಲ್ಲ. ಇಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ HTML ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಸೇರಿಸಿ .

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಟ್ಯಾಬ್‌ಗಳು

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಮಾತ್ರೆಗಳು

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಸೈಟ್‌ಗಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಹೆಡರ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಸ್ಪಂದಿಸುವ ಮೆಟಾ ಘಟಕಗಳಾಗಿವೆ. ಅವು ಮೊಬೈಲ್ ವೀಕ್ಷಣೆಗಳಲ್ಲಿ ಕುಸಿಯಲು (ಮತ್ತು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ) ಪ್ರಾರಂಭವಾಗುತ್ತವೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲ ಹೆಚ್ಚಾದಂತೆ ಅಡ್ಡಲಾಗಿ ಮಾರ್ಪಡುತ್ತವೆ.

ಸಮರ್ಥಿಸಲಾದ navbar nav ಲಿಂಕ್‌ಗಳು ಪ್ರಸ್ತುತ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

ತುಂಬಿ ತುಳುಕುತ್ತಿರುವ ವಿಷಯ

ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿರುವ ವಿಷಯಕ್ಕೆ ಎಷ್ಟು ಸ್ಥಳಾವಕಾಶ ಬೇಕು ಎಂದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ತಿಳಿದಿಲ್ಲವಾದ್ದರಿಂದ, ಎರಡನೇ ಸಾಲಿನಲ್ಲಿ ವಿಷಯವನ್ನು ಸುತ್ತುವ ಮೂಲಕ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಬಹುದು. ಇದನ್ನು ಪರಿಹರಿಸಲು, ನೀವು ಹೀಗೆ ಮಾಡಬಹುದು:

ನ್ಯಾವ್‌ಬಾರ್ ಐಟಂಗಳ ಪ್ರಮಾಣ ಅಥವಾ ಅಗಲವನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿರ್ದಿಷ್ಟ ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಕೆಲವು ನ್ಯಾವ್‌ಬಾರ್ ಐಟಂಗಳನ್ನು ಮರೆಮಾಡಿ .
ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್ ಕುಸಿದ ಮತ್ತು ಅಡ್ಡ ಮೋಡ್ ನಡುವೆ ಬದಲಾಯಿಸುವ ಬಿಂದುವನ್ನು ಬದಲಾಯಿಸಿ. ವೇರಿಯೇಬಲ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ @grid-float-breakpointಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಸೇರಿಸಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

JavaScript ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದರೆ ಮತ್ತು ನ್ಯಾವ್‌ಬಾರ್ ಕುಸಿಯುವಷ್ಟು ವ್ಯೂಪೋರ್ಟ್ ಕಿರಿದಾಗಿದ್ದರೆ, ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ವಿಸ್ತರಿಸಲು ಮತ್ತು ಒಳಗಿನ ವಿಷಯವನ್ನು ವೀಕ್ಷಿಸಲು ಅಸಾಧ್ಯವಾಗುತ್ತದೆ .navbar-collapse.

ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವ್‌ಬಾರ್‌ಗೆ ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆವೃತ್ತಿಯಲ್ಲಿ ಸೇರಿಸಬೇಕಾದ ಕುಸಿತದ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ.

ಕುಸಿದ ಮೊಬೈಲ್ ನ್ಯಾವ್‌ಬಾರ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತಿದೆ

ವೀವ್‌ಪೋರ್ಟ್ ಗಿಂತ ಕಿರಿದಾದಾಗ ನ್ಯಾವ್‌ಬಾರ್ ತನ್ನ ಲಂಬವಾದ ಮೊಬೈಲ್ ವೀಕ್ಷಣೆಗೆ ಕುಸಿಯುತ್ತದೆ @grid-float-breakpointಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಕನಿಷ್ಠ @grid-float-breakpointಅಗಲದಲ್ಲಿದ್ದಾಗ ಅದರ ಸಮತಲವಾದ ಮೊಬೈಲ್ ಅಲ್ಲದ ವೀಕ್ಷಣೆಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ. ನ್ಯಾವ್‌ಬಾರ್ ಕುಸಿದಾಗ/ವಿಸ್ತರಿಸಿದಾಗ ನಿಯಂತ್ರಿಸಲು ಈ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಕಡಿಮೆ ಮೂಲದಲ್ಲಿ ಹೊಂದಿಸಿ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು 768px(ಚಿಕ್ಕ "ಸಣ್ಣ" ಅಥವಾ "ಟ್ಯಾಬ್ಲೆಟ್" ಪರದೆ).

ನ್ಯಾವ್‌ಬಾರ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡಿ

ಒಂದು ಅಂಶವನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ <nav>ಅಥವಾ, ಒಂದು ನಂತಹ ಹೆಚ್ಚು ಸಾಮಾನ್ಯ ಅಂಶವನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ , ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೆಗ್ಗುರುತು ಪ್ರದೇಶವೆಂದು ಸ್ಪಷ್ಟವಾಗಿ ಗುರುತಿಸಲು ಪ್ರತಿ ನ್ಯಾವ್‌ಬಾರ್‌ಗೆ <div>a ಅನ್ನು ಸೇರಿಸಿ .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ಗಾಗಿ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನ್ಯಾವ್‌ಬಾರ್ ಬ್ರ್ಯಾಂಡ್ ಅನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಚಿತ್ರದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ <img>. ತನ್ನದೇ ಆದ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿರುವುದರಿಂದ , .navbar-brandನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಅವಲಂಬಿಸಿ ನೀವು ಕೆಲವು CSS ಅನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕಾಗಬಹುದು.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಸರಿಯಾದ ಲಂಬ ಜೋಡಣೆ ಮತ್ತು ಕುಸಿದ ನಡವಳಿಕೆಗಾಗಿ ಫಾರ್ಮ್ ವಿಷಯವನ್ನು ಇರಿಸಿ . ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯದೊಳಗೆ ಅದು ಎಲ್ಲಿ ನೆಲೆಸಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಜೋಡಣೆ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿ.

ಒಂದು ಎಚ್ಚರಿಕೆಯಂತೆ, ಮಿಕ್ಸಿನ್ ಮೂಲಕ .navbar-formಅದರ ಹೆಚ್ಚಿನ ಕೋಡ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತದೆ . ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಂತಹ ಕೆಲವು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು, ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಸರಿಯಾಗಿ ತೋರಿಸಬೇಕಾದ ಸ್ಥಿರ ಅಗಲಗಳ ಅಗತ್ಯವಿರಬಹುದು..form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ಯಾವಾಗಲೂ ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ನೀವು ಪ್ರತಿ ಇನ್‌ಪುಟ್‌ಗೆ ಲೇಬಲ್ ಅನ್ನು ಸೇರಿಸದಿದ್ದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ತೊಂದರೆಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. .sr-onlyಈ ಇನ್‌ಲೈನ್ ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ, ನೀವು ವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಬಲ್‌ಗಳನ್ನು ಮರೆಮಾಡಬಹುದು . ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸುವ ಪರ್ಯಾಯ ವಿಧಾನಗಳಿವೆ, ಉದಾಹರಣೆಗೆ aria-label, aria-labelledbyಅಥವಾ titleಗುಣಲಕ್ಷಣ. ಇವುಗಳಲ್ಲಿ ಯಾವುದೂ ಇಲ್ಲದಿದ್ದರೆ, ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು placeholderಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿದರೆ, ಆದರೆ placeholderಇತರ ಲೇಬಲಿಂಗ್ ವಿಧಾನಗಳಿಗೆ ಬದಲಿಯಾಗಿ ಬಳಸಲು ಸಲಹೆ ನೀಡಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು a ನಲ್ಲಿ ನೆಲೆಸದ ಅಂಶಗಳಿಗೆ .navbar-btnವರ್ಗವನ್ನು ಸೇರಿಸಿ .<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

ನೊಂದಿಗೆ ಅಂಶದಲ್ಲಿ ಪಠ್ಯದ ತಂತಿಗಳನ್ನು ಸುತ್ತಿ .navbar-text, ಸಾಮಾನ್ಯವಾಗಿ <p>ಸರಿಯಾದ ಪ್ರಮುಖ ಮತ್ತು ಬಣ್ಣಕ್ಕಾಗಿ ಟ್ಯಾಗ್‌ನಲ್ಲಿ.

<p class="navbar-text">Signed in as Mark Otto</p>

ಸಾಮಾನ್ಯ navbar ನ್ಯಾವಿಗೇಷನ್ ಘಟಕದೊಳಗೆ ಇಲ್ಲದ ಪ್ರಮಾಣಿತ ಲಿಂಕ್‌ಗಳನ್ನು ಬಳಸುವ .navbar-linkಜನರಿಗೆ, ಡೀಫಾಲ್ಟ್ ಮತ್ತು ವಿಲೋಮ ನ್ಯಾವಿಗೇಷನ್ ಆಯ್ಕೆಗಳಿಗೆ ಸರಿಯಾದ ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಲು ವರ್ಗವನ್ನು ಬಳಸಿ.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftಅಥವಾ .navbar-rightಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು nav ಲಿಂಕ್‌ಗಳು, ಫಾರ್ಮ್‌ಗಳು, ಬಟನ್‌ಗಳು ಅಥವಾ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸಿ. ಎರಡೂ ವರ್ಗಗಳು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ದಿಕ್ಕಿನಲ್ಲಿ CSS ಫ್ಲೋಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, nav ಲಿಂಕ್‌ಗಳನ್ನು ಜೋಡಿಸಲು, <ul>ಅನ್ವಯಿಸಲಾದ ಆಯಾ ಉಪಯುಕ್ತತೆಯ ವರ್ಗದೊಂದಿಗೆ ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಇರಿಸಿ.

ಈ ತರಗತಿಗಳು .pull-leftಮತ್ತು ನ ಮಿಕ್ಸ್-ಎಡ್ ಆವೃತ್ತಿಗಳಾಗಿವೆ .pull-right, ಆದರೆ ಸಾಧನದ ಗಾತ್ರಗಳಾದ್ಯಂತ ನ್ಯಾವ್‌ಬಾರ್ ಘಟಕಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಿಗೆ ಅವುಗಳನ್ನು ಸ್ಕೋಪ್ ಮಾಡಲಾಗುತ್ತದೆ.

ಬಹು ಘಟಕಗಳನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸುವುದು

ನವಬಾರ್‌ಗಳು ಪ್ರಸ್ತುತ ಬಹು .navbar-rightವರ್ಗಗಳೊಂದಿಗೆ ಮಿತಿಯನ್ನು ಹೊಂದಿವೆ. ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಸ್ಥಳಾವಕಾಶ ಮಾಡಲು, ನಾವು ಕೊನೆಯ .navbar-rightಅಂಶದಲ್ಲಿ ಋಣಾತ್ಮಕ ಅಂಚು ಬಳಸುತ್ತೇವೆ. ಆ ವರ್ಗವನ್ನು ಬಳಸುವ ಬಹು ಅಂಶಗಳಿರುವಾಗ, ಈ ಅಂಚುಗಳು ಉದ್ದೇಶಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ನಾವು ಆ ಘಟಕವನ್ನು v4 ನಲ್ಲಿ ಪುನಃ ಬರೆಯಲು ಸಾಧ್ಯವಾದಾಗ ನಾವು ಇದನ್ನು ಮರುಪರಿಶೀಲಿಸುತ್ತೇವೆ.

.navbar-fixed-topಒಂದು .containerಅಥವಾ .container-fluidಕೇಂದ್ರ ಮತ್ತು ಪ್ಯಾಡ್ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಸೇರಿಸಿ.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

ದೇಹ ಪ್ಯಾಡಿಂಗ್ ಅಗತ್ಯವಿದೆ

ನೀವು ಟಾಪ್‌ಗೆ ಸೇರಿಸದ ಹೊರತು ಸ್ಥಿರ ನ್ಯಾವ್‌ಬಾರ್ ನಿಮ್ಮ ಇತರ ವಿಷಯವನ್ನು ಓವರ್‌ಲೇ paddingಮಾಡುತ್ತದೆ <body>. ನಿಮ್ಮ ಸ್ವಂತ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ ಅಥವಾ ಕೆಳಗಿನ ನಮ್ಮ ತುಣುಕನ್ನು ಬಳಸಿ. ಸಲಹೆ: ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, navbar 50px ಎತ್ತರದಲ್ಲಿದೆ.

body { padding-top: 70px; }

ಕೋರ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS ನಂತರ ಇದನ್ನು ಸೇರಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ .

.navbar-fixed-bottomಒಂದು .containerಅಥವಾ .container-fluidಕೇಂದ್ರ ಮತ್ತು ಪ್ಯಾಡ್ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಸೇರಿಸಿ.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

ದೇಹ ಪ್ಯಾಡಿಂಗ್ ಅಗತ್ಯವಿದೆ

paddingನೀವು ಕೆಳಭಾಗಕ್ಕೆ ಸೇರಿಸದ ಹೊರತು ಸ್ಥಿರ ನ್ಯಾವ್‌ಬಾರ್ ನಿಮ್ಮ ಇತರ ವಿಷಯವನ್ನು ಓವರ್‌ಲೇ ಮಾಡುತ್ತದೆ <body>. ನಿಮ್ಮ ಸ್ವಂತ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ ಅಥವಾ ಕೆಳಗಿನ ನಮ್ಮ ತುಣುಕನ್ನು ಬಳಸಿ. ಸಲಹೆ: ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, navbar 50px ಎತ್ತರದಲ್ಲಿದೆ.

body { padding-bottom: 70px; }

ಕೋರ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS ನಂತರ ಇದನ್ನು ಸೇರಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ .

.navbar-static-topಒಂದು .containerಅಥವಾ .container-fluidಕೇಂದ್ರಕ್ಕೆ ಮತ್ತು ಪ್ಯಾಡ್ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಮತ್ತು ಸೇರಿಸುವ ಮೂಲಕ ಪುಟದೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವ ಪೂರ್ಣ-ಅಗಲ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ರಚಿಸಿ .

ತರಗತಿಗಳಂತೆ .navbar-fixed-*, ನೀವು ಯಾವುದೇ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿಲ್ಲ body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

ಸೇರಿಸುವ ಮೂಲಕ ನ್ಯಾವ್‌ಬಾರ್‌ನ ನೋಟವನ್ನು ಮಾರ್ಪಡಿಸಿ .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

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

ನ್ಯಾವಿಗೇಷನಲ್ ಕ್ರಮಾನುಗತದಲ್ಲಿ ಪ್ರಸ್ತುತ ಪುಟದ ಸ್ಥಳವನ್ನು ಸೂಚಿಸಿ.

:beforeಮತ್ತು ಮೂಲಕ CSS ನಲ್ಲಿ ವಿಭಜಕಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸಲಾಗುತ್ತದೆ content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ಪುಟ ವಿನ್ಯಾಸ

ಬಹು-ಪುಟ ವಿನ್ಯಾಸ ಘಟಕ ಅಥವಾ ಸರಳವಾದ ಪೇಜರ್ ಪರ್ಯಾಯದೊಂದಿಗೆ ನಿಮ್ಮ ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ವಿನ್ಯಾಸ ಲಿಂಕ್‌ಗಳನ್ನು ಒದಗಿಸಿ .

ಡೀಫಾಲ್ಟ್ ವಿನ್ಯಾಸ

Rdio ನಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆದ ಸರಳ ವಿನ್ಯಾಸ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ. ದೊಡ್ಡ ಬ್ಲಾಕ್ ಅನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳುವುದು ಕಷ್ಟ, ಸುಲಭವಾಗಿ ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ದೊಡ್ಡ ಕ್ಲಿಕ್ ಪ್ರದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ವಿನ್ಯಾಸ ಘಟಕವನ್ನು ಲೇಬಲ್ ಮಾಡುವುದು

<nav>ಪರದೆಯ ಓದುಗರಿಗೆ ಮತ್ತು ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ನ್ಯಾವಿಗೇಷನ್ ವಿಭಾಗವಾಗಿ ಗುರುತಿಸಲು ವಿನ್ಯಾಸ ಘಟಕವನ್ನು ಅಂಶದಲ್ಲಿ ಸುತ್ತಿಡಬೇಕು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಒಂದು ಪುಟವು ಈಗಾಗಲೇ ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ನ್ಯಾವಿಗೇಶನ್ ವಿಭಾಗವನ್ನು ಹೊಂದಿರುವ ಸಾಧ್ಯತೆಯಿದೆ (ಉದಾಹರಣೆಗೆ ಹೆಡರ್‌ನಲ್ಲಿ ಪ್ರಾಥಮಿಕ ನ್ಯಾವಿಗೇಷನ್, ಅಥವಾ ಸೈಡ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಷನ್), ಅದರ ಉದ್ದೇಶವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ವಿವರಣಾತ್ಮಕವನ್ನು aria-labelಒದಗಿಸುವುದು ಸೂಕ್ತವಾಗಿದೆ. <nav>ಉದಾಹರಣೆಗೆ, ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳ ಗುಂಪಿನ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ವಿನ್ಯಾಸ ಘಟಕವನ್ನು ಬಳಸಿದರೆ, ಸೂಕ್��ವಾದ ಲೇಬಲ್ ಆಗಿರಬಹುದು aria-label="Search results pages".

ಅಂಗವಿಕಲ ಮತ್ತು ಸಕ್ರಿಯ ರಾಜ್ಯಗಳು

ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾಗಿದೆ. .disabledಕ್ಲಿಕ್ ಮಾಡಲಾಗದ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಮತ್ತು .activeಪ್ರಸ್ತುತ ಪುಟವನ್ನು ಸೂಚಿಸಲು ಬಳಸಿ .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

<span>ಉದ್ದೇಶಿತ ಶೈಲಿಗಳನ್ನು ಉಳಿಸಿಕೊಂಡು ಕ್ಲಿಕ್ ಕಾರ್ಯವನ್ನು ತೆಗೆದುಹಾಕಲು, ನೀವು ಸಕ್ರಿಯ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಆಂಕರ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಲು ಅಥವಾ ಹಿಂದಿನ/ಮುಂದಿನ ಬಾಣಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಆಂಕರ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ಗಾತ್ರ

ದೊಡ್ಡದಾದ ಅಥವಾ ಚಿಕ್ಕದಾದ ವಿನ್ಯಾಸವನ್ನು ಬಯಸುತ್ತೀರಾ? ಸೇರಿಸಿ .pagination-lgಅಥವಾ .pagination-smಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ಪೇಜರ್

ಲೈಟ್ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳೊಂದಿಗೆ ಸರಳ ವಿನ್ಯಾಸದ ಅನುಷ್ಠಾನಗಳಿಗಾಗಿ ತ್ವರಿತ ಹಿಂದಿನ ಮತ್ತು ಮುಂದಿನ ಲಿಂಕ್‌ಗಳು. ಬ್ಲಾಗ್‌ಗಳು ಅಥವಾ ನಿಯತಕಾಲಿಕೆಗಳಂತಹ ಸರಳ ಸೈಟ್‌ಗಳಿಗೆ ಇದು ಉತ್ತಮವಾಗಿದೆ.

ಡೀಫಾಲ್ಟ್ ಉದಾಹರಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಪೇಜರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

ಜೋಡಿಸಲಾದ ಲಿಂಕ್‌ಗಳು

ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಪ್ರತಿ ಲಿಂಕ್ ಅನ್ನು ಬದಿಗಳಿಗೆ ಜೋಡಿಸಬಹುದು:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ಐಚ್ಛಿಕ ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿ

ಪೇಜರ್ ಲಿಂಕ್‌ಗಳು ಪೇಜಿನೇಶನ್‌ನಿಂದ ಸಾಮಾನ್ಯ .disabledಉಪಯುಕ್ತತೆಯ ವರ್ಗವನ್ನು ಸಹ ಬಳಸುತ್ತವೆ.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ಉದಾಹರಣೆ

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆ ಹೊಸದು

<h3>Example heading <span class="label label-default">New</span></h3>

ಲಭ್ಯವಿರುವ ವ್ಯತ್ಯಾಸಗಳು

ಲೇಬಲ್‌ನ ನೋಟವನ್ನು ಬದಲಾಯಿಸಲು ಕೆಳಗೆ ತಿಳಿಸಲಾದ ಯಾವುದೇ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಿ.

ಡೀಫಾಲ್ಟ್ ಪ್ರಾಥಮಿಕ ಯಶಸ್ಸಿನ ಮಾಹಿತಿ ಎಚ್ಚರಿಕೆ ಅಪಾಯ

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ಟನ್‌ಗಳಷ್ಟು ಲೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿರುವಿರಾ?

ನೀವು ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಡಜನ್‌ಗಟ್ಟಲೆ ಇನ್‌ಲೈನ್ ಲೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿರುವಾಗ ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಗಳು ಉದ್ಭವಿಸಬಹುದು, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ inline-blockಅಂಶವನ್ನು ಹೊಂದಿರುತ್ತದೆ (ಐಕಾನ್‌ನಂತೆ). ಇದರ ಸುತ್ತಲಿನ ಮಾರ್ಗವು ಹೊಂದಿಸುತ್ತಿದೆ display: inline-block;. ಸಂದರ್ಭ ಮತ್ತು ಉದಾಹರಣೆಗಾಗಿ, #13219 ನೋಡಿ .

<span class="badge">ಲಿಂಕ್‌ಗಳು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ navs ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಹೊಸ ಅಥವಾ ಓದದಿರುವ ಐಟಂಗಳನ್ನು ಸುಲಭವಾಗಿ ಹೈಲೈಟ್ ಮಾಡಿ.

ಇನ್‌ಬಾಕ್ಸ್42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ಸ್ವಯಂ ಕುಸಿಯುತ್ತಿದೆ

ಯಾವುದೇ ಹೊಸ ಅಥವಾ ಓದದ ಐಟಂಗಳು ಇಲ್ಲದಿದ್ದಾಗ, :emptyಯಾವುದೇ ವಿಷಯವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ಬ್ಯಾಡ್ಜ್‌ಗಳು ಸರಳವಾಗಿ ಕುಸಿಯುತ್ತವೆ (CSS ನ ಸೆಲೆಕ್ಟರ್ ಮೂಲಕ).

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ರಲ್ಲಿ ಬ್ಯಾಡ್ಜ್‌ಗಳು ಸ್ವಯಂ ಕುಸಿದು ಹೋಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಇದು :emptyಸೆಲೆಕ್ಟರ್‌ಗೆ ಬೆಂಬಲವನ್ನು ಹೊಂದಿಲ್ಲ.

ಸಕ್ರಿಯ nav ಸ್ಥಿತಿಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ

ಮಾತ್ರೆ ನ್ಯಾವಿಗೇಷನ್‌ಗಳಲ್ಲಿ ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ಇರಿಸಲು ಅಂತರ್ನಿರ್ಮಿತ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಪ್ರಮುಖ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂಪೂರ್ಣ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಐಚ್ಛಿಕವಾಗಿ ವಿಸ್ತರಿಸಬಹುದಾದ ಹಗುರವಾದ, ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕ.

ಹಲೋ, ವಿಶ್ವ!

ಇದು ಸರಳ ಹೀರೋ ಯೂನಿಟ್ ಆಗಿದೆ, ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಿದ ವಿಷಯ ಅಥವಾ ಮಾಹಿತಿಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ಸೆಳೆಯಲು ಸರಳವಾದ ಜಂಬೊಟ್ರಾನ್ ಶೈಲಿಯ ಘಟಕವಾಗಿದೆ.

ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ಜಂಬೊಟ್ರಾನ್ ಪೂರ್ಣ ಅಗಲವನ್ನು ಮಾಡಲು ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳಿಲ್ಲದೆ, ಅದನ್ನು ಎಲ್ಲಾ .containers ಹೊರಗೆ ಇರಿಸಿ ಮತ್ತು ಬದಲಿಗೆ .containerಒಳಗೆ ಸೇರಿಸಿ.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ಚಿತ್ರಗಳು, ವೀಡಿಯೊಗಳು, ಪಠ್ಯ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಗ್ರಿಡ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಥಂಬ್‌ನೇಲ್ ಘಟಕದೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ವಿಸ್ತರಿಸಿ.

ನೀವು ವಿವಿಧ ಎತ್ತರಗಳು ಮತ್ತು/ಅಥವಾ ಅಗಲಗಳ ಥಂಬ್‌ನೇಲ್‌ಗಳ Pinterest ತರಹದ ಪ್ರಸ್ತುತಿಯನ್ನು ಹುಡುಕುತ್ತಿದ್ದರೆ, ನೀವು Masonry , Isotope , ಅಥವಾ Salvattore ನಂತಹ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ .

ಡೀಫಾಲ್ಟ್ ಉದಾಹರಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಥಂಬ್‌ನೇಲ್‌ಗಳನ್ನು ಕನಿಷ್ಠ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ಕಸ್ಟಮ್ ವಿಷಯ

ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ, ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು ಅಥವಾ ಬಟನ್‌ಗಳಂತಹ ಯಾವುದೇ ರೀತಿಯ HTML ವಿಷಯವನ್ನು ಥಂಬ್‌ನೇಲ್‌ಗಳಿಗೆ ಸೇರಿಸಲು ಸಾಧ್ಯವಿದೆ.

ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಬಟನ್ ಬಟನ್

ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಬಟನ್ ಬಟನ್

ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಬಟನ್ ಬಟನ್

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

ಲಭ್ಯವಿರುವ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಎಚ್ಚರಿಕೆಯ ಸಂದೇಶಗಳ ಕೈಬೆರಳೆಣಿಕೆಯ ಜೊತೆಗೆ ವಿಶಿಷ್ಟ ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಸಂದರ್ಭೋಚಿತ ಪ್ರತಿಕ್ರಿಯೆ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ.

ಉದಾಹರಣೆಗಳು

ಮೂಲಭೂತ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳಿಗಾಗಿ ಯಾವುದೇ ಪಠ್ಯ ಮತ್ತು ಐಚ್ಛಿಕ ವಜಾಗೊಳಿಸುವ ಬಟನ್ ಅನ್ನು ಸುತ್ತಿ .alertಮತ್ತು ನಾಲ್ಕು ಸಂದರ್ಭೋಚಿತ ವರ್ಗಗಳಲ್ಲಿ ಒಂದನ್ನು (ಉದಾ, ) ಸುತ್ತಿಕೊಳ್ಳಿ..alert-success

ಡೀಫಾಲ್ಟ್ ವರ್ಗವಿಲ್ಲ

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

ಚೆನ್ನಾಗಿದೆ! ಈ ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ನೀವು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ.

ತಲೆ ಎತ್ತಿ! ಈ ಎಚ್ಚರಿಕೆಗೆ ನಿಮ್ಮ ಗಮನ ಬೇಕು, ಆದರೆ ಇದು ಮುಖ್ಯವಲ್ಲ.

ಎಚ್ಚರಿಕೆ! ನಿಮ್ಮನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಉತ್ತಮ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.

ಓಹ್ ಸ್ನ್ಯಾಪ್! ಕೆಲವು ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿ.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ವಜಾಗೊಳಿಸಬಹುದಾದ ಎಚ್ಚರಿಕೆಗಳು

.alert-dismissibleಐಚ್ಛಿಕ ಮತ್ತು ಮುಚ್ಚು ಬಟನ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಯಾವುದೇ ಎಚ್ಚರಿಕೆಯನ್ನು ನಿರ್ಮಿಸಿ .

JavaScript ಎಚ್ಚರಿಕೆ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ, ವಜಾಗೊಳಿಸಬಹುದಾದ ಎಚ್ಚರಿಕೆಗಳಿಗಾಗಿ, ನೀವು ಎಚ್ಚರಿಕೆಗಳನ್ನು ಬಳಸಬೇಕು JavaScript ಪ್ಲಗಿನ್ .

ಎಚ್ಚರಿಕೆ! ನಿಮ್ಮನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಉತ್ತಮ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಸರಿಯಾದ ನಡವಳಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ

ಡೇಟಾ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ <button>ಅಂಶವನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ .data-dismiss="alert"

ಎಚ್ಚರಿಕೆಗಳಲ್ಲಿ ಲಿಂಕ್‌ಗಳು

.alert-linkಯಾವುದೇ ಎಚ್ಚರಿಕೆಯೊಳಗೆ ಹೊಂದಾಣಿಕೆಯ ಬಣ್ಣದ ಲಿಂಕ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಒದಗಿಸಲು ಯುಟಿಲಿಟಿ ವರ್ಗವನ್ನು ಬಳಸಿ .

ಚೆನ್ನಾಗಿದೆ! ಈ ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ನೀವು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ .

ತಲೆ ಎತ್ತಿ! ಈ ಎಚ್ಚರಿಕೆಗೆ ನಿಮ್ಮ ಗಮನ ಬೇಕು , ಆದರೆ ಇದು ಮುಖ್ಯವಲ್ಲ.

ಎಚ್ಚರಿಕೆ! ನಿಮ್ಮನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಉತ್ತಮ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ .

ಓಹ್ ಸ್ನ್ಯಾಪ್! ಕೆಲವು ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿ.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ಸರಳ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಪ್ರಗತಿ ಬಾರ್‌ಗಳೊಂದಿಗೆ ವರ್ಕ್‌ಫ್ಲೋ ಅಥವಾ ಕ್ರಿಯೆಯ ಪ್ರಗತಿಯ ಕುರಿತು ನವೀಕೃತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಿ.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ತಮ್ಮ ಕೆಲವು ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಲು CSS3 ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು Internet Explorer 9 ಮತ್ತು ಕೆಳಗಿನ ಅಥವಾ Firefox ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಒಪೇರಾ 12 ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ವಿಷಯ ಭದ್ರತಾ ನೀತಿ (CSP) ಹೊಂದಾಣಿಕೆ

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನುಮತಿಸದ ವಿಷಯ ಭದ್ರತಾ ನೀತಿಯನ್ನು (CSP) ಹೊಂದಿದ್ದರೆ, ನಂತರ ನಮ್ಮ ಕೆಳಗಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಪ್ರಗತಿ ಪಟ್ಟಿಯ ಅಗಲಗಳನ್ನು ಹೊಂದಿಸಲು style-src 'unsafe-inline'ಇನ್‌ಲೈನ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ . styleಕಟ್ಟುನಿಟ್ಟಾದ CSP ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಅಗಲಗಳನ್ನು ಹೊಂದಿಸಲು ಪರ್ಯಾಯ ವಿಧಾನಗಳು ಸ್ವಲ್ಪ ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವುದು (ಅದು ಹೊಂದಿಸುತ್ತದೆ element.style.width) ಅಥವಾ ಕಸ್ಟಮ್ CSS ತರಗತಿಗಳನ್ನು ಬಳಸುವುದು.

ಮೂಲ ಉದಾಹರಣೆ

ಡೀಫಾಲ್ಟ್ ಪ್ರಗತಿ ಪಟ್ಟಿ.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ಲೇಬಲ್ನೊಂದಿಗೆ

ಗೋಚರ ಶೇಕಡಾವಾರು ತೋರಿಸಲು ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ನಿಂದ ವರ್ಗದೊಂದಿಗೆ <span>ತೆಗೆದುಹಾಕಿ ..sr-only

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

ಲೇಬಲ್ ಪಠ್ಯವು ಕಡಿಮೆ ಶೇಕಡಾವಾರುಗಳಿಗೆ ಸಹ ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, min-widthಪ್ರಗತಿ ಪಟ್ಟಿಗೆ ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ಸಂದರ್ಭೋಚಿತ ಪರ್ಯಾಯಗಳು

ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ಸ್ಥಿರವಾದ ಶೈಲಿಗಳಿಗಾಗಿ ಒಂದೇ ರೀತಿಯ ಬಟನ್ ಮತ್ತು ಎಚ್ಚರಿಕೆ ತರಗತಿಗಳನ್ನು ಬಳಸುತ್ತವೆ.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ಪಟ್ಟೆಯುಳ್ಳ

ಪಟ್ಟೆ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. IE9 ಮತ್ತು ಕೆಳಗಿನವುಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ಅನಿಮೇಟೆಡ್

ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಟ್ಟೆಗಳನ್ನು ಅನಿಮೇಟ್ .activeಮಾಡಲು ಗೆ ಸೇರಿಸಿ . .progress-bar-stripedIE9 ಮತ್ತು ಕೆಳಗಿನವುಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ

ಅವುಗಳನ್ನು ಪೇರಿಸಲು ಅನೇಕ ಬಾರ್‌ಗಳನ್ನು ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಇರಿಸಿ .progress.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ಪಠ್ಯದ ವಿಷಯದ ಜೊತೆಗೆ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಚಿತ್ರವನ್ನು ಒಳಗೊಂಡಿರುವ ವಿವಿಧ ರೀತಿಯ ಘಟಕಗಳನ್ನು (ಬ್ಲಾಗ್ ಕಾಮೆಂಟ್‌ಗಳು, ಟ್ವೀಟ್‌ಗಳು, ಇತ್ಯಾದಿ) ನಿರ್ಮಿಸಲು ಅಮೂರ್ತ ವಸ್ತು ಶೈಲಿಗಳು.

ಡೀಫಾಲ್ಟ್ ಮಾಧ್ಯಮ

ಡೀಫಾಲ್ಟ್ ಮಾಧ್ಯಮವು ಕಂಟೆಂಟ್ ಬ್ಲಾಕ್‌ನ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಮಾಧ್ಯಮ ವಸ್ತುವನ್ನು (ಚಿತ್ರಗಳು, ವೀಡಿಯೊ, ಆಡಿಯೊ) ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ವರ್ಗಗಳು .pull-leftಮತ್ತು .pull-rightಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಮತ್ತು ಈ ಹಿಂದೆ ಮಾಧ್ಯಮ ಘಟಕದ ಭಾಗವಾಗಿ ಬಳಸಲಾಗುತ್ತಿತ್ತು, ಆದರೆ v3.3.0 ನಂತೆ ಆ ಬಳಕೆಗಾಗಿ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ. ಅವುಗಳು ಸರಿಸುಮಾರು ಸಮನಾಗಿರುತ್ತದೆ .media-leftಮತ್ತು .media-right, ಅದನ್ನು ಹೊರತುಪಡಿಸಿ html ನಲ್ಲಿ .media-rightಇಡಬೇಕು ..media-body

ಮಾಧ್ಯಮ ಜೋಡಣೆ

ಚಿತ್ರಗಳು ಅಥವಾ ಇತರ ಮಾಧ್ಯಮವನ್ನು ಮೇಲ್ಭಾಗ, ಮಧ್ಯ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿ ಜೋಡಿಸಬಹುದು. ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಮೇಲ್ಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲಾಗಿದೆ.

ಉನ್ನತ ಜೋಡಿಸಲಾದ ಮಾಧ್ಯಮ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಎಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಓರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.

ಮಧ್ಯದಲ್ಲಿ ಜೋಡಿಸಲಾದ ಮಾಧ್ಯಮ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಎಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಓರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.

ಕೆಳಕ್ಕೆ ಜೋಡಿಸಲಾದ ಮಾಧ್ಯಮ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.

ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಎಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಓರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

ಮಾಧ್ಯಮ ಪಟ್ಟಿ

ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ, ನೀವು ಪಟ್ಟಿಯೊಳಗೆ ಮಾಧ್ಯಮವನ್ನು ಬಳಸಬಹುದು (ಕಾಮೆಂಟ್ ಥ್ರೆಡ್‌ಗಳು ಅಥವಾ ಲೇಖನಗಳ ಪಟ್ಟಿಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ).

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

ಪಟ್ಟಿ ಗುಂಪುಗಳು ಸರಳವಾದ ಅಂಶಗಳ ಪಟ್ಟಿಗಳನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಕಸ್ಟಮ್ ವಿಷಯದೊಂದಿಗೆ ಸಂಕೀರ್ಣವಾದವುಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಶಕ್ತಿಯುತವಾದ ಅಂಶವಾಗಿದೆ.

ಮೂಲ ಉದಾಹರಣೆ

ಅತ್ಯಂತ ಮೂಲಭೂತವಾದ ಪಟ್ಟಿಯ ಗುಂಪು ಸರಳವಾಗಿ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಮತ್ತು ಸರಿಯಾದ ವರ್ಗಗಳೊಂದಿಗೆ ಕ್ರಮಿಸದ ಪಟ್ಟಿಯಾಗಿದೆ. ಅನುಸರಿಸುವ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಅದರ ಮೇಲೆ ನಿರ್ಮಿಸಿ, ಅಥವಾ ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮ ಸ್ವಂತ CSS.

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ಬ್ಯಾಡ್ಜ್‌ಗಳು

ಯಾವುದೇ ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂಗೆ ಬ್ಯಾಡ್ಜ್‌ಗಳ ಘಟಕವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಲಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ.

14ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
2ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
1ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ಲಿಂಕ್ ಮಾಡಲಾದ ಐಟಂಗಳು

ಪಟ್ಟಿ ಐಟಂಗಳ ಬದಲಿಗೆ ಆಂಕರ್ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪಟ್ಟಿ ಗುಂಪು ಐಟಂಗಳನ್ನು ಲಿಂಕ್ ಮಾಡಿ (ಅಂದರೆ ಒಂದು <div>ಬದಲಿಗೆ ಪೋಷಕರು ಎಂದರ್ಥ <ul>). ಪ್ರತಿಯೊಂದು ಅಂಶದ ಸುತ್ತಲೂ ವೈಯಕ್ತಿಕ ಪೋಷಕರ ಅಗತ್ಯವಿಲ್ಲ.

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್ ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್ ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ಬಟನ್ ವಸ್ತುಗಳು

ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂಗಳು ಪಟ್ಟಿಯ ಐಟಂಗಳ ಬದಲಿಗೆ ಬಟನ್ಗಳಾಗಿರಬಹುದು (ಅಂದರೆ ಒಂದು <div>ಬದಲಿಗೆ ಪೋಷಕರು ಎಂದರ್ಥ <ul>). ಪ್ರತಿಯೊಂದು ಅಂಶದ ಸುತ್ತಲೂ ವೈಯಕ್ತಿಕ ಪೋಷಕರ ಅಗತ್ಯವಿಲ್ಲ. ಇಲ್ಲಿ ಪ್ರಮಾಣಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಬೇಡಿ ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ವಸ್ತುಗಳು

ಅಶಕ್ತಗೊಂಡಂತೆ ಕಾಣಲು ಬೂದು ಬಣ್ಣಕ್ಕೆ ಸೇರಿಸಿ .disabled..list-group-item

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್ ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್ ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳು

ಶೈಲಿ ಪಟ್ಟಿ ಐಟಂಗಳಿಗೆ ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಿ, ಡೀಫಾಲ್ಟ್ ಅಥವಾ ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ. .activeರಾಜ್ಯವನ್ನೂ ಒಳಗೊಂಡಿದೆ .

ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್ ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ಕಸ್ಟಮ್ ವಿಷಯ

ಕೆಳಗಿನಂತೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಪಟ್ಟಿ ಗುಂಪುಗಳಿಗೆ ಸಹ ಯಾವುದೇ HTML ಅನ್ನು ಒಳಗೆ ಸೇರಿಸಿ.

ಗುಂಪು ಐಟಂ ಶಿರೋನಾಮೆ ಪಟ್ಟಿ

ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್.

ಗುಂಪು ಐಟಂ ಶಿರೋನಾಮೆ ಪಟ್ಟಿ

ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್.

ಗುಂಪು ಐಟಂ ಶಿರೋನಾಮೆ ಪಟ್ಟಿ

ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ಯಾವಾಗಲೂ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ, ಕೆಲವೊಮ್ಮೆ ನೀವು ನಿಮ್ಮ DOM ಅನ್ನು ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಇರಿಸಬೇಕಾಗುತ್ತದೆ. ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಪ್ಯಾನಲ್ ಘಟಕವನ್ನು ಪ್ರಯತ್ನಿಸಿ.

ಮೂಲ ಉದಾಹರಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಎಲ್ಲಾ .panelಕೆಲವು ಮೂಲಭೂತ ಅಂಚುಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಕೆಲವು ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಪ್ಯಾಡಿಂಗ್ ಆಗಿದೆ.

ಮೂಲ ಫಲಕ ಉದಾಹರಣೆ

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ಶಿರೋನಾಮೆ ಹೊಂದಿರುವ ಫಲಕ

ಇದರೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ಯಾನೆಲ್‌ಗೆ ಶಿರೋನಾಮೆ ಧಾರಕವನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಿ .panel-heading. ಪೂರ್ವ-ಶೈಲಿಯ ಶೀರ್ಷಿಕೆಯನ್ನು ಸೇರಿಸಲು ನೀವು ಯಾವುದನ್ನಾದರೂ ಸೇರಿಸಿಕೊಳ್ಳಬಹುದು <h1>- <h6>ತರಗತಿಯೊಂದಿಗೆ .panel-title. ಆದಾಗ್ಯೂ, ಫಾಂಟ್ ಗಾತ್ರಗಳು <h1>- <h6>ನಿಂದ ಅತಿಕ್ರಮಿಸಲಾಗಿದೆ .panel-heading.

ಸರಿಯಾದ ಲಿಂಕ್ ಬಣ್ಣಕ್ಕಾಗಿ, ಒಳಗೆ ಶೀರ್ಷಿಕೆಗಳಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ಇರಿಸಲು ಮರೆಯದಿರಿ .panel-title.

ಶೀರ್ಷಿಕೆ ಇಲ್ಲದ ಫಲಕ ಶಿರೋನಾಮೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

ಅಡಿಟಿಪ್ಪಣಿಯೊಂದಿಗೆ ಫಲಕ

ರಲ್ಲಿ ವ್ರ್ಯಾಪ್ ಬಟನ್‌ಗಳು ಅಥವಾ ದ್ವಿತೀಯ ಪಠ್ಯ .panel-footer. ಪ್ಯಾನೆಲ್ ಅಡಿಟಿಪ್ಪಣಿಗಳು ಸಾಂದರ್ಭಿಕ ಬದಲಾವಣೆಗಳನ್ನು ಬಳಸುವಾಗ ಬಣ್ಣಗಳು ಮತ್ತು ಗಡಿಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅವುಗಳು ಮುಂಭಾಗದಲ್ಲಿ ಇರಬಾರದು.

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಅಡಿಟಿಪ್ಪಣಿ

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ಸಂದರ್ಭೋಚಿತ ಪರ್ಯಾಯಗಳು

ಇತರ ಘಟಕಗಳಂತೆ, ಯಾವುದೇ ಸಂದರ್ಭೋಚಿತ ಸ್ಥಿತಿಯ ವರ್ಗಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಕ್ಕೆ ಸುಲಭವಾಗಿ ಫಲಕವನ್ನು ಹೆಚ್ಚು ಅರ್ಥಪೂರ್ಣಗೊಳಿಸಿ.

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

ಪ್ಯಾನಲ್ ಶೀರ್ಷಿಕೆ

ಪ್ಯಾನಲ್ ವಿಷಯ

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ಕೋಷ್ಟಕಗಳೊಂದಿಗೆ

.tableತಡೆರಹಿತ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಪ್ಯಾನೆಲ್‌ನಲ್ಲಿ ಯಾವುದೇ ಗಡಿಯಿಲ್ಲದದನ್ನು ಸೇರಿಸಿ . ಒಂದು ಇದ್ದರೆ .panel-body, ಪ್ರತ್ಯೇಕಿಸಲು ನಾವು ಮೇಜಿನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಗಡಿಯನ್ನು ಸೇರಿಸುತ್ತೇವೆ.

ಪ್ಯಾನಲ್ ಶಿರೋನಾಮೆ

ಕೆಲವು ಡೀಫಾಲ್ಟ್ ಪ್ಯಾನಲ್ ವಿಷಯ ಇಲ್ಲಿದೆ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಏನಿಯನ್ ಲ್ಯಾಸಿನಿಯಾ ಬೈಬೆಂಡಮ್ ನುಲ್ಲಾ ಸೆಡ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಬಳಕೆದಾರ ಹೆಸರು
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	@mdo
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	@ಕೊಬ್ಬು
3	ಲ್ಯಾರಿ	ಪಕ್ಷಿ	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ಯಾವುದೇ ಪ್ಯಾನಲ್ ಬಾಡಿ ಇಲ್ಲದಿದ್ದರೆ, ಘಟಕವು ಪ್ಯಾನಲ್ ಹೆಡರ್‌ನಿಂದ ಟೇಬಲ್‌ಗೆ ಅಡ್ಡಿಯಿಲ್ಲದೆ ಚಲಿಸುತ್ತದೆ.

ಪ್ಯಾನಲ್ ಶಿರೋನಾಮೆ

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಬಳಕೆದಾರ ಹೆಸರು
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	@mdo
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	@ಕೊಬ್ಬು
3	ಲ್ಯಾರಿ	ಪಕ್ಷಿ	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ಪಟ್ಟಿ ಗುಂಪುಗಳೊಂದಿಗೆ

ಯಾವುದೇ ಪ್ಯಾನೆಲ್‌ನಲ್ಲಿ ಪೂರ್ಣ-ಅಗಲ ಪಟ್ಟಿ ಗುಂಪುಗಳನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಿ.

ಪ್ಯಾನಲ್ ಶಿರೋನಾಮೆ

ಕೆಲವು ಡೀಫಾಲ್ಟ್ ಪ್ಯಾನಲ್ ವಿಷಯ ಇಲ್ಲಿದೆ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಏನಿಯನ್ ಲ್ಯಾಸಿನಿಯಾ ಬೈಬೆಂಡಮ್ ನುಲ್ಲಾ ಸೆಡ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ಯಾವುದೇ ಸಾಧನದಲ್ಲಿ ಸರಿಯಾಗಿ ಅಳೆಯುವ ಅಂತರ್ಗತ ಅನುಪಾತವನ್ನು ರಚಿಸುವ ಮೂಲಕ ಅವುಗಳ ಒಳಗೊಂಡಿರುವ ಬ್ಲಾಕ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ವೀಡಿಯೊ ಅಥವಾ ಸ್ಲೈಡ್‌ಶೋ ಆಯಾಮಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅನುಮತಿಸಿ.

ನಿಯಮಗಳನ್ನು ನೇರವಾಗಿ <iframe>, <embed>, <video>, ಮತ್ತು <object>ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ; .embed-responsive-itemನೀವು ಇತರ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಯಸಿದಾಗ ಐಚ್ಛಿಕವಾಗಿ ಸ್ಪಷ್ಟ ವಂಶಸ್ಥರ ವರ್ಗವನ್ನು ಬಳಸಿ .

ಪರ ಸಲಹೆ! ನಾವು ನಿಮಗಾಗಿ ಅದನ್ನು ಅತಿಕ್ರಮಿಸುವುದರಿಂದ frameborder="0"ನಿಮ್ಮ s ನಲ್ಲಿ ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ಡೀಫಾಲ್ಟ್ ಚೆನ್ನಾಗಿ

ಒಂದು ಅಂಶಕ್ಕೆ ಒಳಹರಿವಿನ ಪರಿಣಾಮವನ್ನು ನೀಡಲು ಬಾವಿಯನ್ನು ಸರಳ ಪರಿಣಾಮದಂತೆ ಬಳಸಿ.

ನೋಡು, ನಾನು ಬಾವಿಯಲ್ಲಿದ್ದೇನೆ!

<div class="well">...</div>

ಐಚ್ಛಿಕ ತರಗತಿಗಳು

ಎರಡು ಐಚ್ಛಿಕ ಪರಿವರ್ತಕ ವರ್ಗಗಳೊಂದಿಗೆ ಕಂಟ್ರೋಲ್ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳು.

ನೋಡು, ನಾನು ದೊಡ್ಡ ಬಾವಿಯಲ್ಲಿದ್ದೇನೆ!

<div class="well well-lg">...</div>

ನೋಡು, ನಾನು ಒಂದು ಸಣ್ಣ ಬಾವಿಯಲ್ಲಿದ್ದೇನೆ!

<div class="well well-sm">...</div>

ಘಟಕಗಳು

ಗ್ಲಿಫಿಕಾನ್ಸ್

ಲಭ್ಯವಿರುವ ಗ್ಲಿಫ್‌ಗಳು

ಬಳಸುವುದು ಹೇಗೆ

ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ

ಖಾಲಿ ಅಂಶಗಳ ಬಳಕೆಗೆ ಮಾತ್ರ

ಐಕಾನ್ ಫಾಂಟ್ ಸ್ಥಳವನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತಿದೆ

ಪ್ರವೇಶಿಸಬಹುದಾದ ಐಕಾನ್‌ಗಳು

ಉದಾಹರಣೆಗಳು

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

ಉದಾಹರಣೆ

ಜೋಡಣೆ

ಹೆಚ್ಚುವರಿ ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯವಿರಬಹುದು

ಅಸಮ್ಮತಿಸಿದ .pull-rightಜೋಡಣೆ

ಹೆಡರ್‌ಗಳು

ವಿಭಾಜಕ

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಮೆನು ಐಟಂಗಳು

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

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

ಸರಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ roleಮತ್ತು ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸಿ

ಮೂಲ ಉದಾಹರಣೆ

ಬಟನ್ ಟೂಲ್‌ಬಾರ್

ಗಾತ್ರ

ಗೂಡುಕಟ್ಟುವ

ಲಂಬ ವ್ಯತ್ಯಾಸ

ಸಮರ್ಥನೀಯ ಬಟನ್ ಗುಂಪುಗಳು

ಗಡಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

IE8 ಮತ್ತು ಗಡಿಗಳು

<a>ಅಂಶಗಳೊಂದಿಗೆ _

ಲಿಂಕ್‌ಗಳು ಬಟನ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ

<button>ಅಂಶಗಳೊಂದಿಗೆ _

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

ಪ್ಲಗಿನ್ ಅವಲಂಬನೆ

ಏಕ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಗಾತ್ರ

ಡ್ರಾಪ್ಅಪ್ ಬದಲಾವಣೆ

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

ಪಠ್ಯ <input>ರು ಮಾತ್ರ

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿನ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪ್‌ವರ್‌ಗಳಿಗೆ ವಿಶೇಷ ಸೆಟ್ಟಿಂಗ್ ಅಗತ್ಯವಿದೆ

ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ

ಯಾವಾಗಲೂ ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ಮೂಲ ಉದಾಹರಣೆ

ಗಾತ್ರ

ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋ ಆಡ್ಆನ್ಗಳು

ಬಟನ್ ಸೇರ್ಪಡೆಗಳು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಬಟನ್‌ಗಳು

ವಿಭಜಿತ ಗುಂಡಿಗಳು

ಬಹು ಗುಂಡಿಗಳು

ನವ್ಸ್

ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್‌ಗಳಿಗಾಗಿ navs ಅನ್ನು ಬಳಸುವುದಕ್ಕೆ JavaScript ಟ್ಯಾಬ್‌ಗಳ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

ನ್ಯಾವಿಗೇಷನ್ ಆಗಿ ಬಳಸುವ navs ಅನ್ನು ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡಿ

ಟ್ಯಾಬ್‌ಗಳು

ಮಾತ್ರೆಗಳು

ಸಮರ್ಥನೆ

ಸಫಾರಿ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಸಮರ್ಥನೆ ನ್ಯಾವ್ಸ್

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಲಿಂಕ್‌ಗಳು

ಲಿಂಕ್ ಕಾರ್ಯಚಟುವಟಿಕೆಯು ಪ್ರಭಾವಿತವಾಗಿಲ್ಲ

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಟ್ಯಾಬ್‌ಗಳು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಮಾತ್ರೆಗಳು

ನವಬಾರ್

ಡೀಫಾಲ್ಟ್ ನ್ಯಾವ್‌ಬಾರ್

ತುಂಬಿ ತುಳುಕುತ್ತಿರುವ ವಿಷಯ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

ಕುಸಿದ ಮೊಬೈಲ್ ನ್ಯಾವ್‌ಬಾರ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತಿದೆ

ನ್ಯಾವ್‌ಬಾರ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡಿ

ಬ್ರಾಂಡ್ ಚಿತ್ರ

ರೂಪಗಳು

ಮೊಬೈಲ್ ಸಾಧನ ಎಚ್ಚರಿಕೆಗಳು

ಯಾವಾಗಲೂ ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ಗುಂಡಿಗಳು

ಸಂದರ್ಭ-ನಿರ್ದಿಷ್ಟ ಬಳಕೆ

ಪಠ್ಯ

ನಾನ್-ನಾವ್ ಲಿಂಕ್‌ಗಳು

ಘಟಕ ಜೋಡಣೆ

ಬಹು ಘಟಕಗಳನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸುವುದು

ಮೇಲಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ

ದೇಹ ಪ್ಯಾಡಿಂಗ್ ಅಗತ್ಯವಿದೆ

ಕೆಳಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ

ಅಸಮ್ಮತಿಸಿದ `.pull-right`ಜೋಡಣೆ

ಸರಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ `role`ಮತ್ತು ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸಿ

`<a>`ಅಂಶಗಳೊಂದಿಗೆ _

`<button>`ಅಂಶಗಳೊಂದಿಗೆ _

ಪಠ್ಯ `<input>`ರು ಮಾತ್ರ