ಶುರುವಾಗುತ್ತಿದೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅವಲೋಕನ, ಡೌನ್ಲೋಡ್ ಮಾಡುವುದು ಮತ್ತು ಬಳಸುವುದು ಹೇಗೆ, ಮೂಲ ಟೆಂಪ್ಲೇಟ್ಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅವಲೋಕನ, ಡೌನ್ಲೋಡ್ ಮಾಡುವುದು ಮತ್ತು ಬಳಸುವುದು ಹೇಗೆ, ಮೂಲ ಟೆಂಪ್ಲೇಟ್ಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ (ಪ್ರಸ್ತುತ v3.3.7) ತ್ವರಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಲು ಕೆಲವು ಸುಲಭ ಮಾರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟ ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕೆ ಮನವಿ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಯಾವುದು ಸರಿಹೊಂದುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಓದಿ.
CSS, JavaScript ಮತ್ತು ಫಾಂಟ್ಗಳನ್ನು ಸಂಕಲಿಸಲಾಗಿದೆ ಮತ್ತು ಕಡಿಮೆಗೊಳಿಸಲಾಗಿದೆ. ಯಾವುದೇ ಡಾಕ್ಸ್ ಅಥವಾ ಮೂಲ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿಲ್ಲ.
ನಮ್ಮ ಡಾಕ್ಸ್ ಜೊತೆಗೆ ಸೋರ್ಸ್ ಲೆಸ್, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ ಫೈಲ್ಗಳು. ಕಡಿಮೆ ಕಂಪೈಲರ್ ಮತ್ತು ಕೆಲವು ಸೆಟಪ್ ಅಗತ್ಯವಿದೆ.
ರೈಲ್ಸ್, ಕಂಪಾಸ್ ಅಥವಾ ಸಾಸ್-ಮಾತ್ರ ಯೋಜನೆಗಳಲ್ಲಿ ಸುಲಭವಾಗಿ ಸೇರ್ಪಡೆಗೊಳ್ಳಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಡಿಮೆಯಿಂದ ಸಾಸ್ಗೆ ಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ .
jsDelivr ನಲ್ಲಿರುವ ಜನರು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ಗೆ CDN ಬೆಂಬಲವನ್ನು ದಯೆಯಿಂದ ಒದಗಿಸುತ್ತಾರೆ. ಈ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ CDN ಲಿಂಕ್ಗಳನ್ನು ಬಳಸಿ.
ಬೋವರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಲೆಸ್, ಸಿಎಸ್ಎಸ್, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ಗಳನ್ನು ಸ್ಥಾಪಿಸಬಹುದು ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದು :
ನೀವು npm ಅನ್ನು ಬಳಸಿಕೊಂಡು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸಹ ಸ್ಥಾಪಿಸಬಹುದು :
require('bootstrap')
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಎಲ್ಲಾ jQuery ಪ್ಲಗಿನ್ಗಳನ್ನು jQuery ಆಬ್ಜೆಕ್ಟ್ಗೆ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಮಾಡ್ಯೂಲ್ bootstrap
ಸ್ವತಃ ಏನನ್ನೂ ರಫ್ತು ಮಾಡುವುದಿಲ್ಲ. /js/*.js
ಪ್ಯಾಕೇಜ್ನ ಉನ್ನತ ಮಟ್ಟದ ಡೈರೆಕ್ಟರಿಯ ಅಡಿಯಲ್ಲಿ ಫೈಲ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ jQuery ಪ್ಲಗಿನ್ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ package.json
ಕೆಳಗಿನ ಕೀಗಳ ಅಡಿಯಲ್ಲಿ ಕೆಲವು ಹೆಚ್ಚುವರಿ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿದೆ:
less
- ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮುಖ್ಯ ಕಡಿಮೆ ಮೂಲ ಫೈಲ್ಗೆ ಮಾರ್ಗstyle
- ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರ್ವ ಕಂಪೈಲ್ ಮಾಡಲಾದ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ನಾನ್-ಮಿನಿಫೈಡ್ CSS ಗೆ ಮಾರ್ಗ (ಯಾವುದೇ ಗ್ರಾಹಕೀಕರಣವಿಲ್ಲ)ಸಂಯೋಜಕವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕಡಿಮೆ, CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ಗಳನ್ನು ಸ್ಥಾಪಿಸಬಹುದು ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದು :
CSS ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ . ನೀವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಅದರ Less/Sass ಮೂಲದಿಂದ ಕಂಪೈಲ್ ಮಾಡುತ್ತಿದ್ದರೆ ಮತ್ತು ನಮ್ಮ Gruntfile ಅನ್ನು ಬಳಸದೇ ಇದ್ದರೆ, ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಗೆ ನೀವೇ ಸ್ವಯಂಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಸಂಯೋಜಿಸಬೇಕಾಗುತ್ತದೆ. ನೀವು ಪೂರ್ವಸಂಯೋಜಿತ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಅಥವಾ ನಮ್ಮ Gruntfile ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಇದರ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ ಏಕೆಂದರೆ Autoprefixer ಈಗಾಗಲೇ ನಮ್ಮ Gruntfile ಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಎರಡು ರೂಪಗಳಲ್ಲಿ ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು, ಅದರೊಳಗೆ ನೀವು ಈ ಕೆಳಗಿನ ಡೈರೆಕ್ಟರಿಗಳು ಮತ್ತು ಫೈಲ್ಗಳನ್ನು ಕಾಣಬಹುದು, ಸಾಮಾನ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತಾರ್ಕಿಕವಾಗಿ ಗುಂಪು ಮಾಡುವುದು ಮತ್ತು ಸಂಕಲಿಸಿದ ಮತ್ತು ಚಿಕ್ಕದಾದ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ಗಳಿಗೆ jQuery ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ . jQuery ಯ ಯಾವ ಆವೃತ್ತಿಗಳು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಮ್ಮನ್ನು ಸಂಪರ್ಕಿಸಿ .bower.json
ಡೌನ್ಲೋಡ್ ಮಾಡಿದ ನಂತರ, (ಕಂಪೈಲ್ ಮಾಡಿದ) ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ರಚನೆಯನ್ನು ನೋಡಲು ಸಂಕುಚಿತ ಫೋಲ್ಡರ್ ಅನ್ನು ಅನ್ಜಿಪ್ ಮಾಡಿ. ನೀವು ಈ ರೀತಿಯದನ್ನು ನೋಡುತ್ತೀರಿ:
ಇದು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅತ್ಯಂತ ಮೂಲಭೂತ ರೂಪವಾಗಿದೆ: ಯಾವುದೇ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ತ್ವರಿತ ಡ್ರಾಪ್-ಇನ್ ಬಳಕೆಗಾಗಿ ಪೂರ್ವಸಂಯೋಜಿತ ಫೈಲ್ಗಳು. ನಾವು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಮತ್ತು JS ( bootstrap.*
), ಹಾಗೆಯೇ ಕಂಪೈಲ್ ಮಾಡಿದ ಮತ್ತು ಮಿನಿಫೈಡ್ CSS ಮತ್ತು JS ( bootstrap.min.*
) ಅನ್ನು ಒದಗಿಸುತ್ತೇವೆ. CSS ಮೂಲ ನಕ್ಷೆಗಳು ( bootstrap.*.map
) ಕೆಲವು ಬ್ರೌಸರ್ಗಳ ಡೆವಲಪರ್ ಪರಿಕರಗಳೊಂದಿಗೆ ಬಳಸಲು ಲಭ್ಯವಿದೆ. ಐಚ್ಛಿಕ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಥೀಮ್ನಂತೆ Glyphicons ನಿಂದ ಫಾಂಟ್ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲ ಕೋಡ್ ಡೌನ್ಲೋಡ್ ಪೂರ್ವ ಕಂಪೈಲ್ ಮಾಡಿದ CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ ಸ್ವತ್ತುಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಜೊತೆಗೆ ಮೂಲ ಕಡಿಮೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ದಾಖಲಾತಿ. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ, ಇದು ಕೆಳಗಿನ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒಳಗೊಂಡಿದೆ:
, less/
, js/
ಮತ್ತು fonts/
ನಮ್ಮ CSS, JS ಮತ್ತು ಐಕಾನ್ ಫಾಂಟ್ಗಳಿಗೆ (ಕ್ರಮವಾಗಿ) ಮೂಲ ಕೋಡ್ ಆಗಿದೆ. ಫೋಲ್ಡರ್ ಮೇಲಿನ dist/
ಪ್ರಿಕಂಪೈಲ್ ಮಾಡಿದ ಡೌನ್ಲೋಡ್ ವಿಭಾಗದಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡಿದೆ. docs/
ಫೋಲ್ಡರ್ ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಮತ್ತು examples/
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಕೆಯ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ಅದರಾಚೆಗೆ, ಯಾವುದೇ ಇತರ ಒಳಗೊಂಡಿರುವ ಫೈಲ್ ಪ್ಯಾಕೇಜ್ಗಳು, ಪರವಾನಗಿ ಮಾಹಿತಿ ಮತ್ತು ಅಭಿವೃದ್ಧಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅದರ ನಿರ್ಮಾಣ ವ್ಯವಸ್ಥೆಗಾಗಿ ಗ್ರಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಫ್ರೇಮ್ವರ್ಕ್ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಅನುಕೂಲಕರ ವಿಧಾನಗಳೊಂದಿಗೆ. ನಾವು ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಕಂಪೈಲ್ ಮಾಡುತ್ತೇವೆ, ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸುತ್ತೇವೆ ಮತ್ತು ಇನ್ನಷ್ಟು.
ಗ್ರಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು, ನೀವು ಮೊದಲು node.js ಅನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಸ್ಥಾಪಿಸಬೇಕು (ಇದು npm ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ). npm ಎಂದರೆ ನೋಡ್ ಪ್ಯಾಕೇಜ್ ಮಾಡ್ಯೂಲ್ಗಳು ಮತ್ತು ಇದು node.js ಮೂಲಕ ಅಭಿವೃದ್ಧಿ ಅವಲಂಬನೆಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ.
ನಂತರ, ಆಜ್ಞಾ ಸಾಲಿನಿಂದ:grunt-cli
ಜೊತೆಗೆ ಜಾಗತಿಕವಾಗಿ ಸ್ಥಾಪಿಸಿ npm install -g grunt-cli
./bootstrap/
, ನಂತರ ರನ್ ಮಾಡಿ npm install
. npm package.json
ಫೈಲ್ ಅನ್ನು ನೋಡುತ್ತದೆ ಮತ್ತು ಅಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಅಗತ್ಯ ಸ್ಥಳೀಯ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಥಾಪಿಸುತ್ತದೆ.ಪೂರ್ಣಗೊಂಡಾಗ, ಆಜ್ಞಾ ಸಾಲಿನಿಂದ ಒದಗಿಸಲಾದ ವಿವಿಧ ಗ್ರಂಟ್ ಆಜ್ಞೆಗಳನ್ನು ನೀವು ಚಲಾಯಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
grunt dist
(ಕೇವಲ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಂಪೈಲ್ ಮಾಡಿ)/dist/
ಕಂಪೈಲ್ ಮಾಡಿದ ಮತ್ತು ಮಿನಿಫೈಡ್ CSS ಮತ್ತು JavaScript ಫೈಲ್ಗಳೊಂದಿಗೆ ಡೈರೆಕ್ಟರಿಯನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತದೆ . ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಕೆದಾರರಾಗಿ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮಗೆ ಬೇಕಾದ ಆಜ್ಞೆಯಾಗಿದೆ.
grunt watch
(ವೀಕ್ಷಿಸಿ)ಕಡಿಮೆ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ವೀಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ಬದಲಾವಣೆಯನ್ನು ಉಳಿಸಿದಾಗಲೆಲ್ಲಾ ಅವುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ CSS ಗೆ ಮರುಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ.
grunt test
(ಪರೀಕ್ಷೆಗಳನ್ನು ರನ್ ಮಾಡಿ)JSHint ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ ಮತ್ತು PhantomJS ನಲ್ಲಿ QUnit ಪರೀಕ್ಷೆಗಳನ್ನು ತಲೆಬುಡವಿಲ್ಲದೆ ನಡೆಸುತ್ತದೆ .
grunt docs
(ಡಾಕ್ಸ್ ಸ್ವತ್ತುಗಳನ್ನು ನಿರ್ಮಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ)ಮೂಲಕ ಸ್ಥಳೀಯವಾಗಿ ದಸ್ತಾವೇಜನ್ನು ಚಲಾಯಿಸುವಾಗ ಬಳಸಲಾಗುವ CSS, JavaScript ಮತ್ತು ಇತರ ಸ್ವತ್ತುಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ ಮತ್ತು ಪರೀಕ್ಷಿಸುತ್ತದೆ bundle exec jekyll serve
.
grunt
(ಸಂಪೂರ್ಣವಾಗಿ ಎಲ್ಲವನ್ನೂ ನಿರ್ಮಿಸಿ ಮತ್ತು ಪರೀಕ್ಷೆಗಳನ್ನು ಚಲಾಯಿಸಿ)CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಮಿನಿಫೈ ಮಾಡುತ್ತದೆ, ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ವೆಬ್ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ, ಡಾಕ್ಸ್ ವಿರುದ್ಧ HTML5 ವ್ಯಾಲಿಡೇಟರ್ ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ, ಕಸ್ಟಮೈಜರ್ ಸ್ವತ್ತುಗಳನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತದೆ ಮತ್ತು ಇನ್ನಷ್ಟು. ಜೆಕಿಲ್ ಅಗತ್ಯವಿದೆ . ನೀವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿಯೇ ಹ್ಯಾಕಿಂಗ್ ಮಾಡುತ್ತಿದ್ದರೆ ಮಾತ್ರ ಸಾಮಾನ್ಯವಾಗಿ ಅಗತ್ಯವಾಗಿರುತ್ತದೆ.
ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸುವಲ್ಲಿ ಅಥವಾ ಗ್ರಂಟ್ ಆಜ್ಞೆಗಳನ್ನು ಚಲಾಯಿಸುವಲ್ಲಿ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಿದರೆ, ಮೊದಲು /node_modules/
npm ನಿಂದ ರಚಿಸಲಾದ ಡೈರೆಕ್ಟರಿಯನ್ನು ಅಳಿಸಿ. ನಂತರ, ಮರುಚಾಲನೆ ಮಾಡಿ npm install
.
ಈ ಮೂಲ HTML ಟೆಂಪ್ಲೇಟ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ ಅಥವಾ ಈ ಉದಾಹರಣೆಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ . ನಮ್ಮ ಟೆಂಪ್ಲೇಟ್ಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತೀರಿ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ, ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ತಕ್ಕಂತೆ ಅವುಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು.
ಕನಿಷ್ಠ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಡಾಕ್ಯುಮೆಂಟ್ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕೆಳಗಿನ HTML ಅನ್ನು ನಕಲಿಸಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಹಲವು ಘಟಕಗಳೊಂದಿಗೆ ಮೇಲಿನ ಮೂಲ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ನಿರ್ಮಿಸಿ. ನಿಮ್ಮ ವೈಯಕ್ತಿಕ ಯೋಜನೆಯ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಮತ್ತು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ರೆಪೊಸಿಟರಿಯನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ಕೆಳಗಿನ ಪ್ರತಿಯೊಂದು ಉದಾಹರಣೆಗಾಗಿ ಮೂಲ ಕೋಡ್ ಪಡೆಯಿರಿ . ಉದಾಹರಣೆಗಳನ್ನು docs/examples/
ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಕಾಣಬಹುದು.
ಸಮರ್ಥನೀಯ ಲಿಂಕ್ಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ನ್ಯಾವ್ಬಾರ್ ಅನ್ನು ರಚಿಸಿ. ತಲೆ ಎತ್ತಿ! ತುಂಬಾ ಸಫಾರಿ ಸ್ನೇಹಿ ಅಲ್ಲ.
ನಮ್ಮ ಡಾಕ್ಸ್ ಪ್ರಕಾರ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸುಲಭವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ .
ಬೂಟ್ಲಿಂಟ್ ಅಧಿಕೃತ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ HTML ಲಿಂಟರ್ ಸಾಧನವಾಗಿದೆ. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸಾಕಷ್ಟು "ವೆನಿಲ್ಲಾ" ರೀತಿಯಲ್ಲಿ ಬಳಸುತ್ತಿರುವ ವೆಬ್ಪುಟಗಳಲ್ಲಿ ಹಲವಾರು ಸಾಮಾನ್ಯ HTML ತಪ್ಪುಗಳನ್ನು ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ. ವೆನಿಲ್ಲಾ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಘಟಕಗಳು/ವಿಜೆಟ್ಗಳು ಕೆಲವು ರಚನೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ DOM ನ ತಮ್ಮ ಭಾಗಗಳನ್ನು ಬಯಸುತ್ತವೆ. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳ ನಿದರ್ಶನಗಳು ಸರಿಯಾಗಿ-ರಚನಾತ್ಮಕ HTML ಅನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಬೂಟ್ಲಿಂಟ್ ಪರಿಶೀಲಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್ ಟೂಲ್ಚೇನ್ಗೆ ಬೂಟ್ಲಿಂಟ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ ಇದರಿಂದ ಯಾವುದೇ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ನಿಮ್ಮ ಯೋಜನೆಯ ಅಭಿವೃದ್ಧಿಯನ್ನು ನಿಧಾನಗೊಳಿಸುವುದಿಲ್ಲ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅಭಿವೃದ್ಧಿಯ ಕುರಿತು ನವೀಕೃತವಾಗಿರಿ ಮತ್ತು ಈ ಸಹಾಯಕ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಸಮುದಾಯವನ್ನು ತಲುಪಿ.
irc.freenode.net
ಸರ್ವರ್ನಲ್ಲಿ IRC ಬಳಸಿಕೊಂಡು ಸಹವರ್ತಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪರ್ಗಳೊಂದಿಗೆ ಚಾಟ್ ಮಾಡಿ .twitter-bootstrap-3
ನಲ್ಲಿ ಕೇಳಿ .bootstrap
ಅಥವಾ ಅಂತಹುದೇ ವಿತರಣಾ ಕಾರ್ಯವಿಧಾನಗಳ ಮೂಲಕ ವಿತರಿಸುವಾಗ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕಾರ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವ ಅಥವಾ ಸೇರಿಸುವ ಪ್ಯಾಕೇಜ್ಗಳಲ್ಲಿ ಡೆವಲಪರ್ಗಳು ಕೀವರ್ಡ್ ಅನ್ನು ಬಳಸಬೇಕು .ನೀವು ಇತ್ತೀಚಿನ ಗಾಸಿಪ್ ಮತ್ತು ಅದ್ಭುತವಾದ ಸಂಗೀತ ವೀಡಿಯೊಗಳಿಗಾಗಿ Twitter ನಲ್ಲಿ @getbootstrap ಅನ್ನು ಸಹ ಅನುಸರಿಸಬಹುದು .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ನಿಮ್ಮ ಪುಟಗಳನ್ನು ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಳವಡಿಸುತ್ತದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಹೇಗೆ ಎಂಬುದು ಇಲ್ಲಿದೆ ಆದ್ದರಿಂದ ನಿಮ್ಮ ಪುಟವು ಈ ಪ್ರತಿಕ್ರಿಯೆಯಿಲ್ಲದ ಉದಾಹರಣೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ .
<meta>
ಉಲ್ಲೇಖಿಸಲಾದ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಿwidth
ಆನ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸಿ, ಉದಾಹರಣೆಗೆ ಇದು ಡೀಫಾಲ್ಟ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ CSS ನಂತರ ಬರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗಳು ಅಥವಾ ಕೆಲವು ಸೆಲೆಕ್ಟರ್-ಫು ಮೂಲಕ ತಪ್ಪಿಸಬಹುದು..container
width: 970px !important;
!important
.col-xs-*
ಮಧ್ಯಮ/ದೊಡ್ಡದಕ್ಕೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಅಥವಾ ಬದಲಿಗೆ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಚಿಂತಿಸಬೇಡಿ, ಎಲ್ಲಾ ನಿರ್ಣಯಗಳಿಗೆ ಹೆಚ್ಚುವರಿ-ಸಣ್ಣ ಸಾಧನ ಗ್ರಿಡ್ ಮಾಪಕಗಳು.IE8 ಗಾಗಿ ನಿಮಗೆ ಇನ್ನೂ Respond.js ಅಗತ್ಯವಿರುತ್ತದೆ (ನಮ್ಮ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಇನ್ನೂ ಇವೆ ಮತ್ತು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬೇಕಾಗಿದೆ). ಇದು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ "ಮೊಬೈಲ್ ಸೈಟ್" ಅಂಶಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ನಾವು ಈ ಹಂತಗಳನ್ನು ಉದಾಹರಣೆಗಾಗಿ ಅನ್ವಯಿಸಿದ್ದೇವೆ. ನಿರ್ದಿಷ್ಟ ಬದಲಾವಣೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲು ಅದರ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಓದಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಹಳೆಯ ಆವೃತ್ತಿಯಿಂದ v3.x ಗೆ ಸ್ಥಳಾಂತರಿಸಲು ನೋಡುತ್ತಿರುವಿರಾ? ನಮ್ಮ ವಲಸೆ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಪರಿಶೀಲಿಸಿ .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಇತ್ತೀಚಿನ ಡೆಸ್ಕ್ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ನಿರ್ಮಿಸಲಾಗಿದೆ, ಅಂದರೆ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳು ವಿಭಿನ್ನ ಶೈಲಿಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು, ಆದರೂ ಸಂಪೂರ್ಣವಾಗಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿದ್ದರೂ, ಕೆಲವು ಘಟಕಗಳ ರೆಂಡರಿಂಗ್ಗಳು.
ನಿರ್ದಿಷ್ಟವಾಗಿ, ನಾವು ಈ ಕೆಳಗಿನ ಬ್ರೌಸರ್ಗಳು ಮತ್ತು ಪ್ಲಾಟ್ಫಾರ್ಮ್ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತೇವೆ.
WebKit, Blink, ಅಥವಾ Gecko ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುವ ಪರ್ಯಾಯ ಬ್ರೌಸರ್ಗಳು, ನೇರವಾಗಿ ಅಥವಾ ಪ್ಲಾಟ್ಫಾರ್ಮ್ನ ವೆಬ್ ವೀಕ್ಷಣೆ API ಮೂಲಕ, ಸ್ಪಷ್ಟವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ (ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ) ಈ ಬ್ರೌಸರ್ಗಳಲ್ಲಿಯೂ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕು ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು. ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟ ಬೆಂಬಲ ಮಾಹಿತಿಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.
ಸಾಮಾನ್ಯವಾಗಿ ಹೇಳುವುದಾದರೆ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರತಿ ಪ್ರಮುಖ ಪ್ಲಾಟ್ಫಾರ್ಮ್ನ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಪ್ರಾಕ್ಸಿ ಬ್ರೌಸರ್ಗಳು (ಒಪೇರಾ ಮಿನಿ, ಒಪೇರಾ ಮೊಬೈಲ್ನ ಟರ್ಬೊ ಮೋಡ್, ಯುಸಿ ಬ್ರೌಸರ್ ಮಿನಿ, ಅಮೆಜಾನ್ ಸಿಲ್ಕ್) ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ಕ್ರೋಮ್ | ಫೈರ್ಫಾಕ್ಸ್ | ಸಫಾರಿ | |
---|---|---|---|
ಆಂಡ್ರಾಯ್ಡ್ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಎನ್ / ಎ |
ಐಒಎಸ್ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ |
ಅಂತೆಯೇ, ಹೆಚ್ಚಿನ ಡೆಸ್ಕ್ಟಾಪ್ ಬ್ರೌಸರ್ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳು ಬೆಂಬಲಿತವಾಗಿದೆ.
ಕ್ರೋಮ್ | ಫೈರ್ಫಾಕ್ಸ್ | ಅಂತರ್ಜಾಲ ಶೋಧಕ | ಒಪೆರಾ | ಸಫಾರಿ | |
---|---|---|---|---|---|
ಮ್ಯಾಕ್ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಎನ್ / ಎ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ |
ವಿಂಡೋಸ್ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿತವಾಗಿದೆ | ಬೆಂಬಲಿಸುವುದಿಲ್ಲ |
Windows ನಲ್ಲಿ, ನಾವು Internet Explorer 8-11 ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತೇವೆ .
Firefox ಗಾಗಿ, ಇತ್ತೀಚಿನ ಸಾಮಾನ್ಯ ಸ್ಥಿರ ಬಿಡುಗಡೆಯ ಜೊತೆಗೆ, ನಾವು Firefox ನ ಇತ್ತೀಚಿನ ವಿಸ್ತೃತ ಬೆಂಬಲ ಬಿಡುಗಡೆ (ESR) ಆವೃತ್ತಿಯನ್ನು ಸಹ ಬೆಂಬಲಿಸುತ್ತೇವೆ.
ಅನಧಿಕೃತವಾಗಿ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಲಿನಕ್ಸ್ಗಾಗಿ ಕ್ರೋಮಿಯಂ ಮತ್ತು ಕ್ರೋಮ್, ಲಿನಕ್ಸ್ಗಾಗಿ ಫೈರ್ಫಾಕ್ಸ್ ಮತ್ತು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 7, ಹಾಗೆಯೇ ಮೈಕ್ರೋಸಾಫ್ಟ್ ಎಡ್ಜ್ನಲ್ಲಿ ಸಾಕಷ್ಟು ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ ಮತ್ತು ವರ್ತಿಸಬೇಕು, ಆದರೂ ಅವುಗಳು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕೆಲವು ಬ್ರೌಸರ್ ದೋಷಗಳ ಪಟ್ಟಿಗಾಗಿ, ನಮ್ಮ ಬ್ರೌಸರ್ ದೋಷಗಳ ಗೋಡೆಯನ್ನು ನೋಡಿ .
Internet Explorer 8 ಮತ್ತು 9 ಸಹ ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದಾಗ್ಯೂ, ಕೆಲವು CSS3 ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು HTML5 ಅಂಶಗಳನ್ನು ಈ ಬ್ರೌಸರ್ಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 8 ಗೆ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆ ಬೆಂಬಲವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು Respond.js ಅನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಿದೆ.
ವೈಶಿಷ್ಟ್ಯ | ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 8 | ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 9 |
---|---|---|
border-radius |
ಬೆಂಬಲಿಸುವುದಿಲ್ಲ | ಬೆಂಬಲಿತವಾಗಿದೆ |
box-shadow |
ಬೆಂಬಲಿಸುವುದಿಲ್ಲ | ಬೆಂಬಲಿತವಾಗಿದೆ |
transform |
ಬೆಂಬಲಿಸುವುದಿಲ್ಲ | -ms ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ಬೆಂಬಲಿತವಾಗಿದೆ |
transition |
ಬೆಂಬಲಿಸುವುದಿಲ್ಲ | |
placeholder |
ಬೆಂಬಲಿಸುವುದಿಲ್ಲ |
CSS3 ಮತ್ತು HTML5 ವೈಶಿಷ್ಟ್ಯಗಳ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ವಿವರಗಳಿಗಾಗಿ ನಾನು ಬಳಸಬಹುದೇ... ಅನ್ನು ಭೇಟಿ ಮಾಡಿ.
Internet Explorer 8 ಗಾಗಿ ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ Respond.js ಅನ್ನು ಬಳಸುವಾಗ ಈ ಕೆಳಗಿನ ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ ಎಚ್ಚರದಿಂದಿರಿ.
ವಿಭಿನ್ನ (ಉಪ) ಡೊಮೇನ್ನಲ್ಲಿ (ಉದಾಹರಣೆಗೆ, CDN ನಲ್ಲಿ) ಹೋಸ್ಟ್ ಮಾಡಲಾದ CSS ನೊಂದಿಗೆ Respond.js ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಹೆಚ್ಚುವರಿ ಸೆಟಪ್ ಅಗತ್ಯವಿದೆ. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.
file://
ಬ್ರೌಸರ್ ಭದ್ರತಾ ನಿಯಮಗಳ ಕಾರಣದಿಂದಾಗಿ, ಪ್ರೋಟೋಕಾಲ್ ಮೂಲಕ ವೀಕ್ಷಿಸಲಾದ ಪುಟಗಳೊಂದಿಗೆ Respond.js ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ file://
(ಸ್ಥಳೀಯ HTML ಫೈಲ್ ತೆರೆಯುವಾಗ). IE8 ನಲ್ಲಿ ಸ್ಪಂದಿಸುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು, ನಿಮ್ಮ ಪುಟಗಳನ್ನು HTTP(S) ಮೂಲಕ ವೀಕ್ಷಿಸಿ. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.
@import
ಮೂಲಕ ಉಲ್ಲೇಖಿಸಲಾದ CSS ನೊಂದಿಗೆ Respond.js ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ @import
. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಕೆಲವು Drupal ಸಂರಚನೆಗಳನ್ನು ಬಳಸಲು ತಿಳಿದಿದೆ @import
. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.
, , , ಅಥವಾ box-sizing: border-box;
ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ IE8 ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ . ಆ ಕಾರಣಕ್ಕಾಗಿ, v3.0.1 ರಂತೆ, ನಾವು ಇನ್ನು ಮುಂದೆ s ನಲ್ಲಿ ಬಳಸುವುದಿಲ್ಲ .min-width
max-width
min-height
max-height
max-width
.container
@font-face
ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ IE8 ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದೆ :before
. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅದರ ಗ್ಲಿಫಿಕಾನ್ಗಳೊಂದಿಗೆ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಪುಟವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದರೆ ಮತ್ತು ವಿಂಡೋದ ಮೇಲೆ ಮೌಸ್ ಇಲ್ಲದೆ ಲೋಡ್ ಮಾಡಿದರೆ (ಅಂದರೆ ರಿಫ್ರೆಶ್ ಬಟನ್ ಒತ್ತಿರಿ ಅಥವಾ ಐಫ್ರೇಮ್ನಲ್ಲಿ ಏನನ್ನಾದರೂ ಲೋಡ್ ಮಾಡಿ) ನಂತರ ಫಾಂಟ್ ಲೋಡ್ ಆಗುವ ಮೊದಲು ಪುಟವು ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಪುಟದ (ದೇಹ) ಮೇಲೆ ಸುಳಿದಾಡುವುದು ಕೆಲವು ಐಕಾನ್ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಉಳಿದ ಐಕಾನ್ಗಳ ಮೇಲೆ ಸುಳಿದಾಡುವುದು ಅವುಗಳನ್ನು ಸಹ ತೋರಿಸುತ್ತದೆ. ವಿವರಗಳಿಗಾಗಿ ಸಂಚಿಕೆ #13863 ನೋಡಿ .
ಹಳೆಯ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಹೊಂದಾಣಿಕೆ ವಿಧಾನಗಳಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ನೀವು IE ಗಾಗಿ ಇತ್ತೀಚಿನ ರೆಂಡರಿಂಗ್ ಮೋಡ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, <meta>
ನಿಮ್ಮ ಪುಟಗಳಲ್ಲಿ ಸೂಕ್ತವಾದ ಟ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಂತೆ ಪರಿಗಣಿಸಿ:
ಡೀಬಗ್ ಮಾಡುವ ಪರಿಕರಗಳನ್ನು ತೆರೆಯುವ ಮೂಲಕ ಡಾಕ್ಯುಮೆಂಟ್ ಮೋಡ್ ಅನ್ನು ದೃಢೀಕರಿಸಿ: F12"ಡಾಕ್ಯುಮೆಂಟ್ ಮೋಡ್" ಅನ್ನು ಒತ್ತಿ ಮತ್ತು ಪರಿಶೀಲಿಸಿ.
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನ ಪ್ರತಿ ಬೆಂಬಲಿತ ಆವೃತ್ತಿಯಲ್ಲಿ ಸಾಧ್ಯವಾದಷ್ಟು ಉತ್ತಮವಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಎಲ್ಲಾ ದಾಖಲಾತಿಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳಲ್ಲಿ ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ.
ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಈ StackOverflow ಪ್ರಶ್ನೆಯನ್ನು ನೋಡಿ .
Internet Explorer 10 ಸಾಧನದ ಅಗಲವನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದಿಂದ ಪ್ರತ್ಯೇಕಿಸುವುದಿಲ್ಲ ಮತ್ತು ಹೀಗಾಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ CSS ನಲ್ಲಿ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸರಿಯಾಗಿ ಅನ್ವಯಿಸುವುದಿಲ್ಲ. ಇದನ್ನು ಸರಿಪಡಿಸಲು ನೀವು ಸಾಮಾನ್ಯವಾಗಿ CSS ನ ತ್ವರಿತ ತುಣುಕನ್ನು ಸೇರಿಸಬಹುದು:
ಆದಾಗ್ಯೂ, ಅಪ್ಡೇಟ್ 3 (ಅಕಾ GDR3) ಗಿಂತ ಹಳೆಯದಾದ Windows Phone 8 ಆವೃತ್ತಿಗಳನ್ನು ಚಾಲನೆ ಮಾಡುವ ಸಾಧನಗಳಿಗೆ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ , ಏಕೆಂದರೆ ಇದು ಕಿರಿದಾದ "ಫೋನ್" ವೀಕ್ಷಣೆಗೆ ಬದಲಾಗಿ ಅಂತಹ ಸಾಧನಗಳು ಹೆಚ್ಚಾಗಿ ಡೆಸ್ಕ್ಟಾಪ್ ವೀಕ್ಷಣೆಯನ್ನು ತೋರಿಸಲು ಕಾರಣವಾಗುತ್ತದೆ. ಇದನ್ನು ಪರಿಹರಿಸಲು , ದೋಷದ ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಲು ನೀವು ಕೆಳಗಿನ CSS ಮತ್ತು JavaScript ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ .
ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗಾಗಿ, ವಿಂಡೋಸ್ ಫೋನ್ 8 ಮತ್ತು ಸಾಧನ-ಅಗಲವನ್ನು ಓದಿ .
ಪ್ರಮುಖವಾಗಿ, ನಾವು ಇದನ್ನು ಎಲ್ಲಾ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ದಸ್ತಾವೇಜನ್ನು ಮತ್ತು ಉದಾಹರಣೆಗಳಲ್ಲಿ ಪ್ರದರ್ಶನವಾಗಿ ಸೇರಿಸುತ್ತೇವೆ.
OS X ಗಾಗಿ v7.1 ಮತ್ತು iOS v8.0 ಗಾಗಿ Safari ಗಿಂತ ಮೊದಲಿನ Safari ಆವೃತ್ತಿಗಳ ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್ ನಮ್ಮ .col-*-1
ಗ್ರಿಡ್ ತರಗತಿಗಳಲ್ಲಿ ಬಳಸಲಾದ ದಶಮಾಂಶ ಸ್ಥಾನಗಳ ಸಂಖ್ಯೆಯಲ್ಲಿ ಕೆಲವು ತೊಂದರೆಗಳನ್ನು ಹೊಂದಿದೆ. ಆದ್ದರಿಂದ ನೀವು 12 ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಕಾಲಮ್ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಇತರ ಸಾಲುಗಳ ಕಾಲಮ್ಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಅವು ಚಿಕ್ಕದಾಗಿರುವುದನ್ನು ನೀವು ಗಮನಿಸಬಹುದು. ಸಫಾರಿ/ಐಒಎಸ್ ಅನ್ನು ಅಪ್ಗ್ರೇಡ್ ಮಾಡುವುದರ ಜೊತೆಗೆ, ಪರಿಹಾರಕ್ಕಾಗಿ ನಿಮಗೆ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ:
.pull-right
ಹಾರ್ಡ್-ರೈಟ್ ಜೋಡಣೆಯನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ಕೊನೆಯ ಗ್ರಿಡ್ ಕಾಲಮ್ಗೆ ಸೇರಿಸಿಐಒಎಸ್ ಮತ್ತು ಆಂಡ್ರಾಯ್ಡ್ನಲ್ಲಿ ಅಂಶಕ್ಕೆ ಬೆಂಬಲವು ಸಾಕಷ್ಟು overflow: hidden
ಸೀಮಿತವಾಗಿದೆ . <body>
ಆ ನಿಟ್ಟಿನಲ್ಲಿ, ಆ ಸಾಧನಗಳ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ನೀವು ಮೋಡಲ್ನ ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ, <body>
ವಿಷಯವು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. Chrome ದೋಷ #175502 (Chrome v40 ನಲ್ಲಿ ಪರಿಹರಿಸಲಾಗಿದೆ) ಮತ್ತು WebKit ದೋಷ #153852 ಅನ್ನು ನೋಡಿ .
<input>
iOS 9.3 ರಂತೆ, ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ, ಸ್ಕ್ರಾಲ್ ಗೆಸ್ಚರ್ನ ಆರಂಭಿಕ ಸ್ಪರ್ಶವು ಪಠ್ಯ ಅಥವಾ a ನ ಗಡಿಯೊಳಗೆ ಇದ್ದರೆ, <textarea>
ಮಾದರಿಯ <body>
ಕೆಳಗಿರುವ ವಿಷಯವನ್ನು ಮಾದರಿಯ ಬದಲಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಲಾಗುತ್ತದೆ. WebKit ಬಗ್ #153856 ನೋಡಿ .
ಅಲ್ಲದೆ, ನೀವು ಸ್ಥಿರ ನ್ಯಾವ್ಬಾರ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಅಥವಾ ಮೋಡಲ್ನಲ್ಲಿ ಇನ್ಪುಟ್ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ವರ್ಚುವಲ್ ಕೀಬೋರ್ಡ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದಾಗ ಸ್ಥಿರ ಅಂಶಗಳ ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸದ ರೆಂಡರಿಂಗ್ ದೋಷವನ್ನು iOS ಹೊಂದಿದೆ. ಇದಕ್ಕಾಗಿ ಕೆಲವು ಪರಿಹಾರೋಪಾಯಗಳು ನಿಮ್ಮ ಅಂಶಗಳನ್ನು ಪರಿವರ್ತಿಸುವುದು position: absolute
ಅಥವಾ ಸ್ಥಾನೀಕರಣವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸರಿಪಡಿಸಲು ಪ್ರಯತ್ನಿಸಲು ಫೋಕಸ್ನಲ್ಲಿ ಟೈಮರ್ ಅನ್ನು ಆಹ್ವಾನಿಸುವುದು. ಇದನ್ನು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ನಿರ್ವಹಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗೆ ಯಾವ ಪರಿಹಾರವು ಉತ್ತಮವಾಗಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ನಿಮಗೆ ಬಿಟ್ಟದ್ದು.
.dropdown-backdrop
z-ಇಂಡೆಕ್ಸಿಂಗ್ನ ಸಂಕೀರ್ಣತೆಯ ಕಾರಣದಿಂದಾಗಿ NAV ನಲ್ಲಿ iOS ನಲ್ಲಿ ಅಂಶವನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ . ಹೀಗಾಗಿ, ನ್ಯಾವ್ಬಾರ್ಗಳಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ಮುಚ್ಚಲು, ನೀವು ನೇರವಾಗಿ ಡ್ರಾಪ್ಡೌನ್ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬೇಕು (ಅಥವಾ ಐಒಎಸ್ನಲ್ಲಿ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಹಾರಿಸುವ ಯಾವುದೇ ಇತರ ಅಂಶ ).
ಪುಟ ಝೂಮಿಂಗ್ ಅನಿವಾರ್ಯವಾಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ವೆಬ್ನ ಉಳಿದ ಭಾಗಗಳಲ್ಲಿ ಕೆಲವು ಘಟಕಗಳಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಕಲಾಕೃತಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಮಸ್ಯೆಯನ್ನು ಅವಲಂಬಿಸಿ, ನಾವು ಅದನ್ನು ಸರಿಪಡಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ (ಮೊದಲು ಹುಡುಕಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ). ಆದಾಗ್ಯೂ, ನಾವು ಇವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತೇವೆ ಏಕೆಂದರೆ ಅವುಗಳು ಹ್ಯಾಕಿ ಪರಿಹಾರಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದೇ ನೇರ ಪರಿಹಾರವನ್ನು ಹೊಂದಿಲ್ಲ.
:hover
_:focus
ಹೆಚ್ಚಿನ ಟಚ್ಸ್ಕ್ರೀನ್ಗಳಲ್ಲಿ ನಿಜವಾದ ತೂಗಾಡುವಿಕೆ ಸಾಧ್ಯವಾಗದಿದ್ದರೂ, ಹೆಚ್ಚಿನ ಮೊಬೈಲ್ ಬ್ರೌಸರ್ಗಳು ತೂಗಾಡುವ ಬೆಂಬಲವನ್ನು ಅನುಕರಿಸುತ್ತದೆ ಮತ್ತು :hover
"ಜಿಗುಟಾದ" ಮಾಡುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, :hover
ಒಂದು ಅಂಶವನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿದ ನಂತರ ಶೈಲಿಗಳು ಅನ್ವಯಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ ಮತ್ತು ಬಳಕೆದಾರನು ಕೆಲವು ಅಂಶಗಳನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ ಅನ್ವಯಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಇದು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ :hover
ಸ್ಥಿತಿಗಳು ಅಂತಹ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಅನಪೇಕ್ಷಿತವಾಗಿ "ಅಂಟಿಕೊಳ್ಳುವಂತೆ" ಮಾಡಬಹುದು. ಕೆಲವು ಮೊಬೈಲ್ ಬ್ರೌಸರ್ಗಳು ಸಹ :focus
ಇದೇ ರೀತಿ ಅಂಟಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತವೆ. ಅಂತಹ ಶೈಲಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕುವುದನ್ನು ಹೊರತುಪಡಿಸಿ ಈ ಸಮಸ್ಯೆಗಳಿಗೆ ಪ್ರಸ್ತುತ ಯಾವುದೇ ಸರಳ ಪರಿಹಾರವಿಲ್ಲ.
ಕೆಲವು ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿಯೂ ಸಹ, ಮುದ್ರಣವು ಚಮತ್ಕಾರಿಯಾಗಿರಬಹುದು.
ನಿರ್ದಿಷ್ಟವಾಗಿ ಹೇಳುವುದಾದರೆ, Chrome v32 ರಂತೆ ಮತ್ತು ಅಂಚು ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ, ವೆಬ್ಪುಟವನ್ನು ಮುದ್ರಿಸುವಾಗ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಪರಿಹರಿಸುವಾಗ ಭೌತಿಕ ಕಾಗದದ ಗಾತ್ರಕ್ಕಿಂತ ಗಮನಾರ್ಹವಾಗಿ ಕಿರಿದಾದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಗಲವನ್ನು Chrome ಬಳಸುತ್ತದೆ. ಇದು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಹೆಚ್ಚುವರಿ-ಸಣ್ಣ ಗ್ರಿಡ್ ಅನ್ನು ಮುದ್ರಿಸುವಾಗ ಅನಿರೀಕ್ಷಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲು ಕಾರಣವಾಗಬಹುದು. ಕೆಲವು ವಿವರಗಳಿಗಾಗಿ ಸಂಚಿಕೆ #12078 ಮತ್ತು Chrome ಬಗ್ #273306 ಅನ್ನು ನೋಡಿ. ಸೂಚಿಸಿದ ಪರಿಹಾರೋಪಾಯಗಳು:
@screen-*
ಇದರಿಂದ ನಿಮ್ಮ ಪ್ರಿಂಟರ್ ಪೇಪರ್ ಅನ್ನು ಚಿಕ್ಕದಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.ಅಲ್ಲದೆ, Safari v8.0 ನಂತೆ, ಸ್ಥಿರ-ಅಗಲ .container
ಗಳು ಸಫಾರಿಯು ಮುದ್ರಣ ಮಾಡುವಾಗ ಅಸಾಮಾನ್ಯವಾಗಿ ಚಿಕ್ಕದಾದ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬಳಸಲು ಕಾರಣವಾಗಬಹುದು. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ # 14868 ಮತ್ತು WebKit ಬಗ್ #138192 ನೋಡಿ. ಇದಕ್ಕಾಗಿ ಒಂದು ಸಂಭಾವ್ಯ ಪರಿಹಾರವೆಂದರೆ ಕೆಳಗಿನ CSS ಅನ್ನು ಸೇರಿಸುವುದು:
ಬಾಕ್ಸ್ನ ಹೊರಗೆ, Android 4.1 (ಮತ್ತು ಕೆಲವು ಹೊಸ ಬಿಡುಗಡೆಗಳು ಸ್ಪಷ್ಟವಾಗಿ) ಬ್ರೌಸರ್ ಅಪ್ಲಿಕೇಶನ್ನೊಂದಿಗೆ ಆಯ್ಕೆಯ ಡೀಫಾಲ್ಟ್ ವೆಬ್ ಬ್ರೌಸರ್ನಂತೆ (Chrome ಗೆ ವಿರುದ್ಧವಾಗಿ) ರವಾನಿಸುತ್ತದೆ. ದುರದೃಷ್ಟವಶಾತ್, ಬ್ರೌಸರ್ ಅಪ್ಲಿಕೇಶನ್ ಸಾಮಾನ್ಯವಾಗಿ CSS ನೊಂದಿಗೆ ಸಾಕಷ್ಟು ದೋಷಗಳು ಮತ್ತು ಅಸಂಗತತೆಗಳನ್ನು ಹೊಂದಿದೆ.
<select>
ಅಂಶಗಳಲ್ಲಿ, Android ಸ್ಟಾಕ್ ಬ್ರೌಸರ್ ಒಂದು border-radius
ಮತ್ತು/ಅಥವಾ border
ಅನ್ವಯಿಸಿದ್ದರೆ ಅಡ್ಡ ನಿಯಂತ್ರಣಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ . (ವಿವರಗಳಿಗಾಗಿ ಈ StackOverflow ಪ್ರಶ್ನೆಯನ್ನು ನೋಡಿ .) ಆಕ್ಷೇಪಾರ್ಹ CSS ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಕೆಳಗಿನ ಕೋಡ್ನ ತುಣುಕನ್ನು ಬಳಸಿ ಮತ್ತು <select>
Android ಸ್ಟಾಕ್ ಬ್ರೌಸರ್ನಲ್ಲಿ ಶೈಲಿಯಿಲ್ಲದ ಅಂಶವಾಗಿ ನಿರೂಪಿಸಿ. ಬಳಕೆದಾರ ಏಜೆಂಟ್ ಸ್ನಿಫಿಂಗ್ Chrome, Safari ಮತ್ತು Mozilla ಬ್ರೌಸರ್ಗಳೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪವನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡಲು ಬಯಸುವಿರಾ? ಈ JS ಬಿನ್ ಡೆಮೊವನ್ನು ಪರಿಶೀಲಿಸಿ.
ಹಳೆಯ ಮತ್ತು ದೋಷಯುಕ್ತ ಬ್ರೌಸರ್ಗಳಿಗೆ ಉತ್ತಮವಾದ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಸಲುವಾಗಿ, ಬ್ರೌಸರ್ಗಳಲ್ಲಿನ ದೋಷಗಳ ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಲು ಕೆಲವು ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಿಗೆ ವಿಶೇಷ CSS ಅನ್ನು ಗುರಿಯಾಗಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಹಲವಾರು ಸ್ಥಳಗಳಲ್ಲಿ CSS ಬ್ರೌಸರ್ ಹ್ಯಾಕ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಹ್ಯಾಕ್ಗಳು ಸಿಎಸ್ಎಸ್ ವ್ಯಾಲಿಡೇಟರ್ಗಳು ಅಮಾನ್ಯವಾಗಿದೆ ಎಂದು ದೂರಲು ಕಾರಣವಾಗುತ್ತವೆ. ಒಂದೆರಡು ಸ್ಥಳಗಳಲ್ಲಿ, ನಾವು ಇನ್ನೂ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಮಾಣೀಕರಿಸದ ಬ್ಲೀಡಿಂಗ್-ಎಡ್ಜ್ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸುತ್ತೇವೆ, ಆದರೆ ಇವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
ನಮ್ಮ CSS ನ ಹ್ಯಾಕಿ ಅಲ್ಲದ ಭಾಗವು ಸಂಪೂರ್ಣವಾಗಿ ಮೌಲ್ಯೀಕರಿಸುವುದರಿಂದ ಮತ್ತು ಹ್ಯಾಕಿ ಭಾಗಗಳು ಹ್ಯಾಕಿ ಅಲ್ಲದ ಭಾಗದ ಸರಿಯಾದ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲಿ ಮಧ್ಯಪ್ರವೇಶಿಸುವುದಿಲ್ಲವಾದ್ದರಿಂದ ಈ ಮೌಲ್ಯೀಕರಣ ಎಚ್ಚರಿಕೆಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಈ ನಿರ್ದಿಷ್ಟ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ನಿರ್ಲಕ್ಷಿಸುತ್ತೇವೆ.
ನಮ್ಮ HTML ಡಾಕ್ಸ್ ಅಂತೆಯೇ ಕೆಲವು ಕ್ಷುಲ್ಲಕ ಮತ್ತು ಅಸಮಂಜಸವಾದ HTML ಮೌಲ್ಯೀಕರಣ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಹೊಂದಿದೆ ಏಕೆಂದರೆ ಒಂದು ನಿರ್ದಿಷ್ಟ ಫೈರ್ಫಾಕ್ಸ್ ದೋಷಕ್ಕೆ ಪರಿಹಾರವನ್ನು ನಾವು ಸೇರಿಸಿದ್ದೇವೆ .
ನಾವು ಯಾವುದೇ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಪ್ಲಗಿನ್ಗಳು ಅಥವಾ ಆಡ್-ಆನ್ಗಳನ್ನು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿಸದಿದ್ದರೂ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡಲು ನಾವು ಕೆಲವು ಉಪಯುಕ್ತ ಸಲಹೆಗಳನ್ನು ನೀಡುತ್ತೇವೆ.
Google ನಕ್ಷೆಗಳು ಮತ್ತು Google ಕಸ್ಟಮ್ ಸರ್ಚ್ ಇಂಜಿನ್ ಸೇರಿದಂತೆ ಕೆಲವು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸಾಫ್ಟ್ವೇರ್, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ಘರ್ಷಣೆಯ ಕಾರಣದಿಂದಾಗಿ * { box-sizing: border-box; }
, ಒಂದು ನಿಯಮವು padding
ಅಂಶದ ಅಂತಿಮ ಕಂಪ್ಯೂಟೆಡ್ ಅಗಲದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. CSS ಟ್ರಿಕ್ಸ್ ನಲ್ಲಿ ಬಾಕ್ಸ್ ಮಾದರಿ ಮತ್ತು ಗಾತ್ರದ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .
ಸಂದರ್ಭಕ್ಕೆ ಅನುಗುಣವಾಗಿ, ನೀವು ಅಗತ್ಯವಿರುವಂತೆ (ಆಯ್ಕೆ 1) ಅತಿಕ್ರಮಿಸಬಹುದು ಅಥವಾ ಸಂಪೂರ್ಣ ಪ್ರದೇಶಗಳಿಗೆ ಬಾಕ್ಸ್ ಗಾತ್ರವನ್ನು ಮರುಹೊಂದಿಸಬಹುದು (ಆಯ್ಕೆ 2).
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಮಾನ್ಯ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು-ಕನಿಷ್ಠ ಹೆಚ್ಚುವರಿ ಪ್ರಯತ್ನದೊಂದಿಗೆ- AT ಅನ್ನು ಬಳಸುವವರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ಸೈಟ್ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು .
ನಿಮ್ಮ ನ್ಯಾವಿಗೇಶನ್ ಅನೇಕ ಲಿಂಕ್ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು DOM ನಲ್ಲಿ ಮುಖ್ಯ ವಿಷಯಕ್ಕಿಂತ ಮೊದಲು ಬಂದರೆ Skip to main content
, ನ್ಯಾವಿಗೇಷನ್ಗೆ ಮೊದಲು ಲಿಂಕ್ ಅನ್ನು ಸೇರಿಸಿ (ಸರಳ ವಿವರಣೆಗಾಗಿ, ಸ್ಕಿಪ್ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳ ಕುರಿತು ಈ A11Y ಪ್ರಾಜೆಕ್ಟ್ ಲೇಖನವನ್ನು ನೋಡಿ ). ವರ್ಗವನ್ನು ಬಳಸುವುದರಿಂದ .sr-only
ಸ್ಕಿಪ್ ಲಿಂಕ್ ಅನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು .sr-only-focusable
ಒಮ್ಮೆ ಕೇಂದ್ರೀಕರಿಸಿದ ನಂತರ ಲಿಂಕ್ ಗೋಚರಿಸುತ್ತದೆ ಎಂದು ವರ್ಗವು ಖಚಿತಪಡಿಸುತ್ತದೆ (ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ).
Chrome ನಲ್ಲಿ ದೀರ್ಘಕಾಲದ ನ್ಯೂನತೆಗಳು/ಬಗ್ಗಳ ಕಾರಣ ( Chromium ಬಗ್ ಟ್ರ್ಯಾಕರ್ನಲ್ಲಿ ಸಂಚಿಕೆ 262171 ಅನ್ನು ನೋಡಿ ) ಮತ್ತು Internet Explorer (ಇನ್-ಪೇಜ್ ಲಿಂಕ್ಗಳಲ್ಲಿ ಈ ಲೇಖನವನ್ನು ನೋಡಿ ಮತ್ತು ಫೋಕಸ್ ಆರ್ಡರ್ ), ನಿಮ್ಮ ಸ್ಕಿಪ್ ಲಿಂಕ್ನ ಗುರಿಯನ್ನು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು ಸೇರಿಸುವ ಮೂಲಕ ಕನಿಷ್ಠ ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದಾಗಿದೆ tabindex="-1"
.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಗುರಿಯ ಮೇಲೆ ಗೋಚರಿಸುವ ಫೋಕಸ್ ಸೂಚನೆಯನ್ನು ನೀವು ಸ್ಪಷ್ಟವಾಗಿ ನಿಗ್ರಹಿಸಲು ಬಯಸಬಹುದು (ವಿಶೇಷವಾಗಿ Chrome ಪ್ರಸ್ತುತವಾಗಿ tabindex="-1"
ಮೌಸ್ನೊಂದಿಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಂಶಗಳ ಮೇಲೆ ಗಮನವನ್ನು ಹೊಂದಿಸುತ್ತದೆ) ಜೊತೆಗೆ #content:focus { outline: none; }
.
ಈ ದೋಷವು ನಿಮ್ಮ ಸೈಟ್ ಬಳಸುತ್ತಿರುವ ಯಾವುದೇ ಇತರ ಪುಟದ ಲಿಂಕ್ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ, ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಅವುಗಳನ್ನು ಅನುಪಯುಕ್ತಗೊಳಿಸುತ್ತದೆ. ಲಿಂಕ್ ಟಾರ್ಗೆಟ್ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಎಲ್ಲಾ ಇತರ ಹೆಸರಿನ ಆಂಕರ್ಗಳು / ಫ್ರಾಗ್ಮೆಂಟ್ ಐಡೆಂಟಿಫೈಯರ್ಗಳಿಗೆ ಇದೇ ರೀತಿಯ ಸ್ಟಾಪ್-ಗ್ಯಾಪ್ ಫಿಕ್ಸ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ನೀವು ಪರಿಗಣಿಸಬಹುದು.
ಗೂಡುಕಟ್ಟುವ ಶಿರೋನಾಮೆಗಳು ( <h1>
- <h6>
), ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಡಾಕ್ಯುಮೆಂಟ್ ಹೆಡರ್ ಒಂದು ಆಗಿರಬೇಕು <h1>
. ನಂತರದ ಶೀರ್ಷಿಕೆಗಳು ತಾರ್ಕಿಕವಾಗಿ ಬಳಸಬೇಕು <h2>
- <h6>
ಅಂದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳು ನಿಮ್ಮ ಪುಟಗಳಿಗಾಗಿ ವಿಷಯಗಳ ಕೋಷ್ಟಕವನ್ನು ರಚಿಸಬಹುದು.
HTML CodeSniffer ಮತ್ತು Penn State's AccessAbility ನಲ್ಲಿ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .
ಪ್ರಸ್ತುತ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಕೆಲವು ಡೀಫಾಲ್ಟ್ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು (ಉದಾಹರಣೆಗೆ ವಿವಿಧ ಶೈಲಿಯ ಬಟನ್ ವರ್ಗಗಳು, ಮೂಲ ಕೋಡ್ ಬ್ಲಾಕ್ಗಳಿಗೆ ಬಳಸುವ ಕೆಲವು ಕೋಡ್ ಹೈಲೈಟ್ ಮಾಡುವ ಬಣ್ಣಗಳು , .bg-primary
ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆ ಸಹಾಯಕ ವರ್ಗ ಮತ್ತು ಬಿಳಿ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸಿದಾಗ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಬಣ್ಣ) ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಹೊಂದಿರುತ್ತದೆ ( ಶಿಫಾರಸು ಮಾಡಿದ ಅನುಪಾತ 4.5:1 ಕ್ಕಿಂತ ಕಡಿಮೆ ). ಇದು ಕಡಿಮೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಅಥವಾ ಬಣ್ಣ ಕುರುಡು ಬಳಕೆದಾರರಿಗೆ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಈ ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳು ಅವುಗಳ ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಸ್ಪಷ್ಟತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಮಾರ್ಪಡಿಸಬೇಕಾಗಬಹುದು.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು MIT ಪರವಾನಗಿ ಅಡಿಯಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಇದು 2016 ಟ್ವಿಟರ್ನ ಹಕ್ಕುಸ್ವಾಮ್ಯವಾಗಿದೆ. ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ಕುದಿಸಿ, ಇದನ್ನು ಈ ಕೆಳಗಿನ ಷರತ್ತುಗಳೊಂದಿಗೆ ವಿವರಿಸಬಹುದು.
ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪೂರ್ಣ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಪರವಾನಗಿಯು ಪ್ರಾಜೆಕ್ಟ್ ರೆಪೊಸಿಟರಿಯಲ್ಲಿದೆ .
ಸಮುದಾಯದ ಸದಸ್ಯರು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ದಾಖಲಾತಿಯನ್ನು ವಿವಿಧ ಭಾಷೆಗಳಿಗೆ ಅನುವಾದಿಸಿದ್ದಾರೆ. ಯಾವುದೂ ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಮತ್ತು ಅವುಗಳು ಯಾವಾಗಲೂ ನವೀಕೃತವಾಗಿರದೇ ಇರಬಹುದು.
ಅನುವಾದಗಳನ್ನು ಸಂಘಟಿಸಲು ಅಥವಾ ಹೋಸ್ಟ್ ಮಾಡಲು ನಾವು ಸಹಾಯ ಮಾಡುವುದಿಲ್ಲ, ನಾವು ಅವುಗಳನ್ನು ಲಿಂಕ್ ಮಾಡುತ್ತೇವೆ.
ಹೊಸ ಅಥವಾ ಉತ್ತಮ ಅನುವಾದವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ್ದೀರಾ? ಅದನ್ನು ನಮ್ಮ ಪಟ್ಟಿಗೆ ಸೇರಿಸಲು ಪುಲ್ ವಿನಂತಿಯನ್ನು ತೆರೆಯಿರಿ.