ಪ್ರಾರಂಭಿಸಲಾಗುತ್ತಿದೆ · ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕನ್ನಡದಲ್ಲಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ (ಪ್ರಸ್ತುತ v3.4.1) ತ್ವರಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಲು ಕೆಲವು ಸುಲಭ ಮಾರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟ ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕೆ ಮನವಿ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಯಾವುದು ಸರಿಹೊಂದುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಓದಿ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್

CSS, JavaScript ಮತ್ತು ಫಾಂಟ್‌ಗಳನ್ನು ಸಂಕಲಿಸಲಾಗಿದೆ ಮತ್ತು ಕಡಿಮೆಗೊಳಿಸಲಾಗಿದೆ. ಯಾವುದೇ ಡಾಕ್ಸ್ ಅಥವಾ ಮೂಲ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಸೇರಿಸಲಾಗಿಲ್ಲ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಮೂಲ ಕೋಡ್

ನಮ್ಮ ಡಾಕ್ಸ್ ಜೊತೆಗೆ ಮೂಲ ಕಡಿಮೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ ಫೈಲ್‌ಗಳು. ಕಡಿಮೆ ಕಂಪೈಲರ್ ಮತ್ತು ಕೆಲವು ಸೆಟಪ್ ಅಗತ್ಯವಿದೆ.

ಮೂಲವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಸಾಸ್

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

ಸಾಸ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

jsDelivr

jsDelivr ನಲ್ಲಿರುವ ಜನರು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ CDN ಬೆಂಬಲವನ್ನು ದಯೆಯಿಂದ ಒದಗಿಸುತ್ತಾರೆ. ಈ jsDelivr ಲಿಂಕ್‌ಗಳನ್ನು ಬಳಸಿ.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

ಬೋವರ್ನೊಂದಿಗೆ ಸ್ಥಾಪಿಸಿ

ಬೋವರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಲೆಸ್, ಸಿಎಸ್‌ಎಸ್, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಬಹುದು ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದು :

bower install bootstrap

npm ನೊಂದಿಗೆ ಸ್ಥಾಪಿಸಿ

ನೀವು npm ಬಳಸಿಕೊಂಡು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸಹ ಸ್ಥಾಪಿಸಬಹುದು :

npm install bootstrap@3

require('bootstrap')ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಲ್ಲಾ jQuery ಪ್ಲಗಿನ್‌ಗಳನ್ನು jQuery ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಮಾಡ್ಯೂಲ್ bootstrapಸ್ವತಃ ಏನನ್ನೂ ರಫ್ತು ಮಾಡುವುದಿಲ್ಲ. /js/*.jsಪ್ಯಾಕೇಜ್‌ನ ಉನ್ನತ ಮಟ್ಟದ ಡೈರೆಕ್ಟರಿಯ ಅಡಿಯಲ್ಲಿ ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ jQuery ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು .

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ package.jsonಕೆಳಗಿನ ಕೀಗಳ ಅಡಿಯಲ್ಲಿ ಕೆಲವು ಹೆಚ್ಚುವರಿ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿದೆ:

less- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮುಖ್ಯ ಕಡಿಮೆ ಮೂಲ ಫೈಲ್‌ಗೆ ಮಾರ್ಗ
style- ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರ್ವ ಸಂಕಲನ ಮಾಡಲಾದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ನಾನ್-ಮಿನಿಫೈಡ್ CSS ಗೆ ಮಾರ್ಗ (ಯಾವುದೇ ಗ್ರಾಹಕೀಕರಣವಿಲ್ಲ)

ಸಂಯೋಜಕನೊಂದಿಗೆ ಸ್ಥಾಪಿಸಿ

ಸಂಯೋಜಕವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕಡಿಮೆ, CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಬಹುದು ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದು :

composer require twbs/bootstrap

ಕಡಿಮೆ/ಸಾಸ್‌ಗೆ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅಗತ್ಯವಿದೆ

CSS ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ . ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಅದರ Less/Sass ಮೂಲದಿಂದ ಕಂಪೈಲ್ ಮಾಡುತ್ತಿದ್ದರೆ ಮತ್ತು ನಮ್ಮ Gruntfile ಅನ್ನು ಬಳಸದೇ ಇದ್ದರೆ, ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಗೆ ನೀವೇ ಸ್ವಯಂಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಅಗತ್ಯವಿದೆ. ನೀವು ಪೂರ್ವಸಂಯೋಜಿತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಅಥವಾ ನಮ್ಮ Gruntfile ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಇದರ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ ಏಕೆಂದರೆ Autoprefixer ಈಗಾಗಲೇ ನಮ್ಮ Gruntfile ಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಎರಡು ರೂಪಗಳಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು, ಅದರೊಳಗೆ ನೀವು ಈ ಕೆಳಗಿನ ಡೈರೆಕ್ಟರಿಗಳು ಮತ್ತು ಫೈಲ್‌ಗಳನ್ನು ಕಾಣಬಹುದು, ಸಾಮಾನ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತಾರ್ಕಿಕವಾಗಿ ಗುಂಪು ಮಾಡುವುದು ಮತ್ತು ಸಂಕಲಿಸಿದ ಮತ್ತು ಚಿಕ್ಕದಾದ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

jQuery ಅಗತ್ಯವಿದೆ

ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್‌ನಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳಿಗೆ jQuery ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ . jQuery ಯ ಯಾವ ಆವೃತ್ತಿಗಳು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಮ್ಮನ್ನು ಸಂಪರ್ಕಿಸಿ .bower.json

ಪೂರ್ವ ಸಂಕಲನ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ ನಂತರ, (ಕಂಪೈಲ್ ಮಾಡಿದ) ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ರಚನೆಯನ್ನು ನೋಡಲು ಸಂಕುಚಿತ ಫೋಲ್ಡರ್ ಅನ್ನು ಅನ್ಜಿಪ್ ಮಾಡಿ. ನೀವು ಈ ರೀತಿಯದನ್ನು ನೋಡುತ್ತೀರಿ:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಅತ್ಯಂತ ಮೂಲಭೂತ ರೂಪವಾಗಿದೆ: ಯಾವುದೇ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ತ್ವರಿತ ಡ್ರಾಪ್-ಇನ್ ಬಳಕೆಗಾಗಿ ಪೂರ್ವಸಂಯೋಜಿತ ಫೈಲ್‌ಗಳು. ನಾವು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಮತ್ತು JS ( bootstrap.*), ಹಾಗೆಯೇ ಕಂಪೈಲ್ ಮಾಡಿದ ಮತ್ತು ಮಿನಿಫೈಡ್ CSS ಮತ್ತು JS ( bootstrap.min.*) ಅನ್ನು ಒದಗಿಸುತ್ತೇವೆ. CSS ಮೂಲ ನಕ್ಷೆಗಳು ( bootstrap.*.map) ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳ ಡೆವಲಪರ್ ಪರಿಕರಗಳೊಂದಿಗೆ ಬಳಸಲು ಲಭ್ಯವಿದೆ. ಐಚ್ಛಿಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಥೀಮ್‌ನಂತೆ Glyphicons ನಿಂದ ಫಾಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲ ಕೋಡ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲ ಕೋಡ್ ಡೌನ್‌ಲೋಡ್ ಪೂರ್ವ ಕಂಪೈಲ್ ಮಾಡಿದ CSS, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ ಸ್ವತ್ತುಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಜೊತೆಗೆ ಮೂಲ ಕಡಿಮೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ದಾಖಲಾತಿ. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ, ಇದು ಕೆಳಗಿನ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒಳಗೊಂಡಿದೆ:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, 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 ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ ಮತ್ತು QUnit ಪರೀಕ್ಷೆಗಳನ್ನು ನೈಜ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ರನ್ ಮಾಡುತ್ತದೆ ಕರ್ಮಕ್ಕೆ ಧನ್ಯವಾದಗಳು .

`grunt docs`(ಡಾಕ್ಸ್ ಸ್ವತ್ತುಗಳನ್ನು ನಿರ್ಮಿಸಿ ಮತ್ತು ಪರೀಕ್ಷಿಸಿ)

ಮೂಲಕ ಸ್ಥಳೀಯವಾಗಿ ದಸ್ತಾವೇಜನ್ನು ಚಲಾಯಿಸುವಾಗ ಬಳಸಲಾಗುವ CSS, JavaScript, ಮತ್ತು ಇತರ ಸ್ವತ್ತುಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ ಮತ್ತು ಪರೀಕ್ಷಿಸುತ್ತದೆ bundle exec jekyll serve.

`grunt`(ಸಂಪೂರ್ಣವಾಗಿ ಎಲ್ಲವನ್ನೂ ನಿರ್ಮಿಸಿ ಮತ್ತು ಪರೀಕ್ಷೆಗಳನ್ನು ಚಲಾಯಿಸಿ)

CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಮಿನಿಫೈ ಮಾಡುತ್ತದೆ, ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ, ಡಾಕ್ಸ್ ವಿರುದ್ಧ HTML5 ವ್ಯಾಲಿಡೇಟರ್ ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ, ಕಸ್ಟಮೈಜರ್ ಸ್ವತ್ತುಗಳನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತದೆ ಮತ್ತು ಇನ್ನಷ್ಟು. ಜೆಕಿಲ್ ಅಗತ್ಯವಿದೆ . ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿಯೇ ಹ್ಯಾಕಿಂಗ್ ಮಾಡುತ್ತಿದ್ದರೆ ಮಾತ್ರ ಸಾಮಾನ್ಯವಾಗಿ ಅಗತ್ಯವಾಗಿರುತ್ತದೆ.

ದೋಷನಿವಾರಣೆ

ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸುವಲ್ಲಿ ಅಥವಾ ಗ್ರಂಟ್ ಆಜ್ಞೆಗಳನ್ನು ಚಲಾಯಿಸುವಲ್ಲಿ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಿದರೆ, ಮೊದಲು /node_modules/npm ನಿಂದ ರಚಿಸಲಾದ ಡೈರೆಕ್ಟರಿಯನ್ನು ಅಳಿಸಿ. ನಂತರ, ಮರುಚಾಲನೆ ಮಾಡಿ npm install.

ಈ ಮೂಲ HTML ಟೆಂಪ್ಲೇಟ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ ಅಥವಾ ಈ ಉದಾಹರಣೆಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ . ನಮ್ಮ ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತೀರಿ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ, ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ತಕ್ಕಂತೆ ಅವುಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಕನಿಷ್ಠ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡಾಕ್ಯುಮೆಂಟ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕೆಳಗಿನ HTML ಅನ್ನು ನಕಲಿಸಿ.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

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

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

ಚೌಕಟ್ಟನ್ನು ಬಳಸುವುದು

ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್

ಬೇಸಿಕ್ಸ್ ಹೊರತುಪಡಿಸಿ ಬೇರೇನೂ ಇಲ್ಲ: ಕಂಟೈನರ್ ಜೊತೆಗೆ CSS ಮತ್ತು JavaScript ಅನ್ನು ಸಂಕಲಿಸಲಾಗಿದೆ.

ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಥೀಮ್

ದೃಷ್ಟಿ ವರ್ಧಿತ ಅನುಭವಕ್ಕಾಗಿ ಐಚ್ಛಿಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಥೀಮ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಿ.

ಗ್ರಿಡ್‌ಗಳು

ಎಲ್ಲಾ ನಾಲ್ಕು ಹಂತಗಳು, ಗೂಡುಕಟ್ಟುವ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳ ಬಹು ಉದಾಹರಣೆಗಳು.

ಜಂಬೊಟ್ರಾನ್

ನ್ಯಾವ್‌ಬಾರ್ ಮತ್ತು ಕೆಲವು ಮೂಲ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಜಂಬೊಟ್ರಾನ್ ಸುತ್ತಲೂ ನಿರ್ಮಿಸಿ.

ಕಿರಿದಾದ ಜಂಬೊಟ್ರಾನ್

ಡೀಫಾಲ್ಟ್ ಕಂಟೇನರ್ ಮತ್ತು ಜಂಬೊಟ್ರಾನ್ ಅನ್ನು ಕಿರಿದಾಗಿಸುವ ಮೂಲಕ ಹೆಚ್ಚು ಕಸ್ಟಮ್ ಪುಟವನ್ನು ನಿರ್ಮಿಸಿ.

ಕ್ರಿಯೆಯಲ್ಲಿ ನವಬಾರ್‌ಗಳು

ನವಬಾರ್

ಕೆಲವು ಹೆಚ್ಚುವರಿ ವಿಷಯಗಳ ಜೊತೆಗೆ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಸೂಪರ್ ಬೇಸಿಕ್ ಟೆಂಪ್ಲೇಟ್.

ಸ್ಟ್ಯಾಟಿಕ್ ಟಾಪ್ ನ್ಯಾವ್‌ಬಾರ್

ಕೆಲವು ಹೆಚ್ಚುವರಿ ವಿಷಯಗಳ ಜೊತೆಗೆ ಸ್ಟ್ಯಾಟಿಕ್ ಟಾಪ್ ನ್ಯಾವ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಸೂಪರ್ ಬೇಸಿಕ್ ಟೆಂಪ್ಲೇಟ್.

ಸ್ಥಿರ navbar

ಕೆಲವು ಹೆಚ್ಚುವರಿ ವಿಷಯಗಳ ಜೊತೆಗೆ ಸ್ಥಿರ ಉನ್ನತ ನ್ಯಾವ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಸೂಪರ್ ಮೂಲ ಟೆಂಪ್ಲೇಟ್.

ಕಸ್ಟಮ್ ಘಟಕಗಳು

ಕವರ್

ಸರಳ ಮತ್ತು ಸುಂದರವಾದ ಮುಖಪುಟಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಪುಟದ ಟೆಂಪ್ಲೇಟ್.

ಏರಿಳಿಕೆ

ನ್ಯಾವ್ಬಾರ್ ಮತ್ತು ಏರಿಳಿಕೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ, ನಂತರ ಕೆಲವು ಹೊಸ ಘಟಕಗಳನ್ನು ಸೇರಿಸಿ.

ಬ್ಲಾಗ್

ಕಸ್ಟಮ್ ನ್ಯಾವಿಗೇಷನ್, ಹೆಡರ್ ಮತ್ತು ಪ್ರಕಾರದೊಂದಿಗೆ ಸರಳವಾದ ಎರಡು-ಕಾಲಮ್ ಬ್ಲಾಗ್ ಲೇಔಟ್.

ಡ್ಯಾಶ್‌ಬೋರ್ಡ್

ಸ್ಥಿರ ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ನ್ಯಾವ್‌ಬಾರ್‌ನೊಂದಿಗೆ ನಿರ್ವಾಹಕ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಮೂಲ ರಚನೆ.

ಸೈನ್-ಇನ್ ಪುಟ

ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಲೇಔಟ್ ಮತ್ತು ವಿನ್ಯಾಸದಲ್ಲಿ ಸರಳವಾದ ಚಿಹ್ನೆಗಾಗಿ ವಿನ್ಯಾಸ.

ಸಮರ್ಥನೀಯ ನ್ಯಾವಿ

ಸಮರ್ಥನೀಯ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ರಚಿಸಿ. ತಲೆ ಎತ್ತಿ! ತುಂಬಾ ಸಫಾರಿ ಸ್ನೇಹಿ ಅಲ್ಲ.

ಜಿಗುಟಾದ ಅಡಿಟಿಪ್ಪಣಿ

ವಿಷಯವು ಅದಕ್ಕಿಂತ ಚಿಕ್ಕದಾದಾಗ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನ ಕೆಳಭಾಗಕ್ಕೆ ಅಡಿಟಿಪ್ಪಣಿಯನ್ನು ಲಗತ್ತಿಸಿ.

ನ್ಯಾವ್ಬಾರ್ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಸ್ಟಿಕಿ ಅಡಿಟಿಪ್ಪಣಿ

ನ್ಯಾವ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಸ್ಟಿಕಿ ಅಡಿಟಿಪ್ಪಣಿ

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

ಪ್ರಯೋಗಗಳು

ಸ್ಪಂದಿಸದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್

ನಮ್ಮ ಡಾಕ್ಸ್ ಪ್ರಕಾರ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸುಲಭವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ .

ಆಫ್ ಕ್ಯಾನ್ವಾಸ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಬಳಸಲು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ ಆಫ್-ಕ್ಯಾನ್ವಾಸ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ನಿರ್ಮಿಸಿ.

ಬೂಟ್ಲಿಂಟ್

ಬೂಟ್ಲಿಂಟ್ ಅಧಿಕೃತ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ HTML ಲಿಂಟರ್ ಸಾಧನವಾಗಿದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸಾಕಷ್ಟು "ವೆನಿಲ್ಲಾ" ರೀತಿಯಲ್ಲಿ ಬಳಸುತ್ತಿರುವ ವೆಬ್‌ಪುಟಗಳಲ್ಲಿ ಹಲವಾರು ಸಾಮಾನ್ಯ HTML ತಪ್ಪುಗಳನ್ನು ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ. ವೆನಿಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಘಟಕಗಳು/ವಿಜೆಟ್‌ಗಳು ಕೆಲವು ರಚನೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ DOM ನ ತಮ್ಮ ಭಾಗಗಳನ್ನು ಬಯಸುತ್ತವೆ. ಬೂಟ್‌ಲಿಂಟ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳ ನಿದರ್ಶನಗಳು ಸರಿಯಾಗಿ-ರಚನಾತ್ಮಕ HTML ಅನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಟೂಲ್‌ಚೇನ್‌ಗೆ ಬೂಟ್‌ಲಿಂಟ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ ಇದರಿಂದ ಯಾವುದೇ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ನಿಮ್ಮ ಯೋಜನೆಯ ಅಭಿವೃದ್ಧಿಯನ್ನು ನಿಧಾನಗೊಳಿಸುವುದಿಲ್ಲ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಅಭಿವೃದ್ಧಿಯ ಕುರಿತು ನವೀಕೃತವಾಗಿರಿ ಮತ್ತು ಈ ಸಹಾಯಕ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಸಮುದಾಯವನ್ನು ತಲುಪಿ.

ಅಧಿಕೃತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬ್ಲಾಗ್ ಅನ್ನು ಓದಿ ಮತ್ತು ಚಂದಾದಾರರಾಗಿ .
##bootstrap ಚಾನಲ್‌ನಲ್ಲಿirc.freenode.net ಸರ್ವರ್‌ನಲ್ಲಿ IRC ಬಳಸಿಕೊಂಡು ಸಹವರ್ತಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪರ್‌ಗಳೊಂದಿಗೆ ಚಾಟ್ ಮಾಡಿ .
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವ ಸಹಾಯಕ್ಕಾಗಿ , ಟ್ಯಾಗ್ ಬಳಸಿ StackOverflowtwitter-bootstrap-3 ನಲ್ಲಿ ಕೇಳಿ .
ಗರಿಷ್ಠ ಅನ್ವೇಷಣೆಗಾಗಿ npmbootstrap ಅಥವಾ ಅಂತಹುದೇ ವಿತರಣಾ ಕಾರ್ಯವಿಧಾನಗಳ ಮೂಲಕ ವಿತರಿಸುವಾಗ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕಾರ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವ ಅಥವಾ ಸೇರಿಸುವ ಪ್ಯಾಕೇಜ್‌ಗಳಲ್ಲಿ ಡೆವಲಪರ್‌ಗಳು ಕೀವರ್ಡ್ ಅನ್ನು ಬಳಸಬೇಕು .
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಎಕ್ಸ್‌ಪೋದಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸುವ ಜನರ ಸ್ಪೂರ್ತಿದಾಯಕ ಉದಾಹರಣೆಗಳನ್ನು ಹುಡುಕಿ .

ನೀವು ಇತ್ತೀಚಿನ ಗಾಸಿಪ್ ಮತ್ತು ಅದ್ಭುತವಾದ ಸಂಗೀತ ವೀಡಿಯೊಗಳಿಗಾಗಿ Twitter ನಲ್ಲಿ @getbootstrap ಅನ್ನು ಸಹ ಅನುಸರಿಸಬಹುದು .

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

ಪುಟದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕ್ರಮಗಳು

CSS ಡಾಕ್ಸ್‌ನಲ್ಲಿ<meta> ಉಲ್ಲೇಖಿಸಲಾದ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಿ
ಒಂದೇ ಅಗಲದೊಂದಿಗೆ ಪ್ರತಿ ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಾಗಿ widthಆನ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸಿ, ಉದಾಹರಣೆಗೆ ಇದು ಡೀಫಾಲ್ಟ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS ನಂತರ ಬರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗಳು ಅಥವಾ ಕೆಲವು ಸೆಲೆಕ್ಟರ್-ಫು ಮೂಲಕ ತಪ್ಪಿಸಬಹುದು..containerwidth: 970px !important;!important
ನ್ಯಾವ್‌ಬಾರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಎಲ್ಲಾ ನ್ಯಾವ್‌ಬಾರ್ ಕುಸಿಯುತ್ತಿರುವ ಮತ್ತು ವಿಸ್ತರಿಸುವ ನಡವಳಿಕೆಯನ್ನು ತೆಗೆದುಹಾಕಿ.
ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ, .col-xs-*ಮಧ್ಯಮ/ದೊಡ್ಡದಕ್ಕೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಅಥವಾ ಬದಲಿಗೆ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಚಿಂತಿಸಬೇಡಿ, ಎಲ್ಲಾ ನಿರ್ಣಯಗಳಿಗೆ ಹೆಚ್ಚುವರಿ-ಸಣ್ಣ ಸಾಧನ ಗ್ರಿಡ್ ಮಾಪಕಗಳು.

IE8 ಗಾಗಿ ನಿಮಗೆ ಇನ್ನೂ Respond.js ಅಗತ್ಯವಿರುತ್ತದೆ (ನಮ್ಮ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಇನ್ನೂ ಇವೆ ಮತ್ತು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬೇಕಾದ ಕಾರಣ). ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ "ಮೊಬೈಲ್ ಸೈಟ್" ಅಂಶಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

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

ನಾವು ಈ ಹಂತಗಳನ್ನು ಉದಾಹರಣೆಗಾಗಿ ಅನ್ವಯಿಸಿದ್ದೇವೆ. ನಿರ್ದಿಷ್ಟ ಬದಲಾವಣೆಗಳನ್ನು ಜಾರಿಗೆ ತರಲು ಅದರ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಓದಿ.

ಪ್ರತಿಕ್ರಿಯಿಸದ ಉದಾಹರಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ

v2.x ನಿಂದ v3.x ಗೆ ಸ್ಥಳಾಂತರಗೊಳ್ಳುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಹಳೆಯ ಆವೃತ್ತಿಯಿಂದ v3.x ಗೆ ಸ್ಥಳಾಂತರಿಸಲು ನೋಡುತ್ತಿರುವಿರಾ? ನಮ್ಮ ವಲಸೆ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಪರಿಶೀಲಿಸಿ .

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

ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳು

ನಿರ್ದಿಷ್ಟವಾಗಿ, ನಾವು ಈ ಕೆಳಗಿನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತೇವೆ.

WebKit, Blink, ಅಥವಾ Gecko ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುವ ಪರ್ಯಾಯ ಬ್ರೌಸರ್‌ಗಳು ನೇರವಾಗಿ ಅಥವಾ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ವೆಬ್ ವೀಕ್ಷಣೆ API ಮೂಲಕ ಸ್ಪಷ್ಟವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ (ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ) ಈ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕು ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು. ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟ ಬೆಂಬಲ ಮಾಹಿತಿಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.

ಮೊಬೈಲ್ ಸಾಧನಗಳು

ಸಾಮಾನ್ಯವಾಗಿ ಹೇಳುವುದಾದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರತಿ ಪ್ರಮುಖ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್‌ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಪ್ರಾಕ್ಸಿ ಬ್ರೌಸರ್‌ಗಳು (ಒಪೇರಾ ಮಿನಿ, ಒಪೇರಾ ಮೊಬೈಲ್‌ನ ಟರ್ಬೊ ಮೋಡ್, ಯುಸಿ ಬ್ರೌಸರ್ ಮಿನಿ, ಅಮೆಜಾನ್ ಸಿಲ್ಕ್) ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

	ಕ್ರೋಮ್	ಫೈರ್‌ಫಾಕ್ಸ್	ಸಫಾರಿ
ಆಂಡ್ರಾಯ್ಡ್	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಎನ್ / ಎ
ಐಒಎಸ್	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ

ಡೆಸ್ಕ್ಟಾಪ್ ಬ್ರೌಸರ್ಗಳು

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

	ಕ್ರೋಮ್	ಫೈರ್‌ಫಾಕ್ಸ್	ಅಂತರ್ಜಾಲ ಶೋಧಕ	ಒಪೆರಾ	ಸಫಾರಿ
ಮ್ಯಾಕ್	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಎನ್ / ಎ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ
ವಿಂಡೋಸ್	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿತವಾಗಿದೆ	ಬೆಂಬಲಿಸುವುದಿಲ್ಲ

Windows ನಲ್ಲಿ, ನಾವು Internet Explorer 8-11 ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತೇವೆ .

Firefox ಗಾಗಿ, ಇತ್ತೀಚಿನ ಸಾಮಾನ್ಯ ಸ್ಥಿರ ಬಿಡುಗಡೆಯ ಜೊತೆಗೆ, ನಾವು Firefox ನ ಇತ್ತೀಚಿನ ವಿಸ್ತೃತ ಬೆಂಬಲ ಬಿಡುಗಡೆ (ESR) ಆವೃತ್ತಿಯನ್ನು ಸಹ ಬೆಂಬಲಿಸುತ್ತೇವೆ.

ಅನಧಿಕೃತವಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಲಿನಕ್ಸ್‌ಗಾಗಿ ಕ್ರೋಮಿಯಂ ಮತ್ತು ಕ್ರೋಮ್, ಲಿನಕ್ಸ್‌ಗಾಗಿ ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 7, ಹಾಗೆಯೇ ಮೈಕ್ರೋಸಾಫ್ಟ್ ಎಡ್ಜ್‌ನಲ್ಲಿ ಸಾಕಷ್ಟು ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ ಮತ್ತು ವರ್ತಿಸಬೇಕು, ಆದರೂ ಅವುಗಳು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕೆಲವು ಬ್ರೌಸರ್ ದೋಷಗಳ ಪಟ್ಟಿಗಾಗಿ, ನಮ್ಮ ಬ್ರೌಸರ್ ದೋಷಗಳ ಗೋಡೆಯನ್ನು ನೋಡಿ .

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ಮತ್ತು 9

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

Internet Explorer 8 ಗಾಗಿ ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ Respond.js ಅನ್ನು ಬಳಸುವಾಗ ಈ ಕೆಳಗಿನ ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ ಎಚ್ಚರದಿಂದಿರಿ.

Respond.js ಮತ್ತು ಕ್ರಾಸ್-ಡೊಮೇನ್ CSS

ವಿಭಿನ್ನ (ಉಪ) ಡೊಮೇನ್‌ನಲ್ಲಿ (ಉದಾಹರಣೆಗೆ, CDN ನಲ್ಲಿ) ಹೋಸ್ಟ್ ಮಾಡಲಾದ CSS ನೊಂದಿಗೆ Respond.js ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಹೆಚ್ಚುವರಿ ಸೆಟಪ್ ಅಗತ್ಯವಿದೆ. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.

Respond.js ಮತ್ತು`file://`

ಬ್ರೌಸರ್ ಭದ್ರತಾ ನಿಯಮಗಳ ಕಾರಣದಿಂದಾಗಿ, ಪ್ರೋಟೋಕಾಲ್ ಮೂಲಕ ವೀಕ್ಷಿಸಲಾದ ಪುಟಗಳೊಂದಿಗೆ Respond.js ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ file://(ಸ್ಥಳೀಯ HTML ಫೈಲ್ ಅನ್ನು ತೆರೆಯುವಾಗ). IE8 ನಲ್ಲಿ ಸ್ಪಂದಿಸುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು, ನಿಮ್ಮ ಪುಟಗಳನ್ನು HTTP(S) ಮೂಲಕ ವೀಕ್ಷಿಸಿ. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.

Respond.js ಮತ್ತು`@import`

ಮೂಲಕ ಉಲ್ಲೇಖಿಸಲಾದ CSS ನೊಂದಿಗೆ Respond.js ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ @import. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಕೆಲವು Drupal ಸಂರಚನೆಗಳನ್ನು ಬಳಸಲು ತಿಳಿದಿದೆ @import. ವಿವರಗಳಿಗಾಗಿ Respond.js ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ಮತ್ತು ಬಾಕ್ಸ್ ಗಾತ್ರ

, , , ಅಥವಾ box-sizing: border-box;ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ IE8 ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ . ಆ ಕಾರಣಕ್ಕಾಗಿ, v3.0.1 ರಂತೆ, ನಾವು ಇನ್ನು ಮುಂದೆ s ನಲ್ಲಿ ಬಳಸುವುದಿಲ್ಲ .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 ಮತ್ತು @font-face

@font-faceನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ IE8 ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದೆ :before. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅದರ ಗ್ಲಿಫಿಕಾನ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಪುಟವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದರೆ ಮತ್ತು ವಿಂಡೋದ ಮೇಲೆ ಮೌಸ್ ಇಲ್ಲದೆ ಲೋಡ್ ಮಾಡಿದರೆ (ಅಂದರೆ ರಿಫ್ರೆಶ್ ಬಟನ್ ಒತ್ತಿರಿ ಅಥವಾ ಐಫ್ರೇಮ್‌ನಲ್ಲಿ ಏನನ್ನಾದರೂ ಲೋಡ್ ಮಾಡಿ) ನಂತರ ಫಾಂಟ್ ಲೋಡ್ ಆಗುವ ಮೊದಲು ಪುಟವು ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಪುಟದ (ದೇಹ) ಮೇಲೆ ತೂಗಾಡುವುದರಿಂದ ಕೆಲವು ಐಕಾನ್‌ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಉಳಿದ ಐಕಾನ್‌ಗಳ ಮೇಲೆ ಸುಳಿದಾಡುವುದು ಅವುಗಳನ್ನು ಸಹ ತೋರಿಸುತ್ತದೆ. ವಿವರಗಳಿಗಾಗಿ ಸಂಚಿಕೆ #13863 ನೋಡಿ .

IE ಹೊಂದಾಣಿಕೆ ವಿಧಾನಗಳು

ಹಳೆಯ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಹೊಂದಾಣಿಕೆ ವಿಧಾನಗಳಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ನೀವು IE ಗಾಗಿ ಇತ್ತೀಚಿನ ರೆಂಡರಿಂಗ್ ಮೋಡ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, <meta>ನಿಮ್ಮ ಪುಟಗಳಲ್ಲಿ ಸೂಕ್ತವಾದ ಟ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಂತೆ ಪರಿಗಣಿಸಿ:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ಡೀಬಗ್ ಮಾಡುವ ಪರಿಕರಗಳನ್ನು ತೆರೆಯುವ ಮೂಲಕ ಡಾಕ್ಯುಮೆಂಟ್ ಮೋಡ್ ಅನ್ನು ದೃಢೀಕರಿಸಿ: F12"ಡಾಕ್ಯುಮೆಂಟ್ ಮೋಡ್" ಅನ್ನು ಒತ್ತಿ ಮತ್ತು ಪರಿಶೀಲಿಸಿ.

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

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಈ StackOverflow ಪ್ರಶ್ನೆಯನ್ನು ನೋಡಿ .

ವಿಂಡೋಸ್ 8 ಮತ್ತು ವಿಂಡೋಸ್ ಫೋನ್ 8 ನಲ್ಲಿ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 10

Internet Explorer 10 ಸಾಧನದ ಅಗಲವನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದಿಂದ ಪ್ರತ್ಯೇಕಿಸುವುದಿಲ್ಲ ಮತ್ತು ಹೀಗಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ನಲ್ಲಿ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸರಿಯಾಗಿ ಅನ್ವಯಿಸುವುದಿಲ್ಲ. ಇದನ್ನು ಸರಿಪಡಿಸಲು ನೀವು ಸಾಮಾನ್ಯವಾಗಿ CSS ನ ತ್ವರಿತ ತುಣುಕನ್ನು ಸೇರಿಸಬಹುದು:

@-ms-viewport       { width: device-width; }

ಆದಾಗ್ಯೂ, ಅಪ್‌ಡೇಟ್ 3 (ಅಕಾ GDR3) ಗಿಂತ ಹಳೆಯದಾದ Windows Phone 8 ಆವೃತ್ತಿಗಳನ್ನು ಚಾಲನೆ ಮಾಡುವ ಸಾಧನಗಳಿಗೆ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ , ಏಕೆಂದರೆ ಇದು ಕಿರಿದಾದ "ಫೋನ್" ವೀಕ್ಷಣೆಗೆ ಬದಲಾಗಿ ಅಂತಹ ಸಾಧನಗಳು ಹೆಚ್ಚಾಗಿ ಡೆಸ್ಕ್‌ಟಾಪ್ ವೀಕ್ಷಣೆಯನ್ನು ತೋರಿಸಲು ಕಾರಣವಾಗುತ್ತದೆ. ಇದನ್ನು ಪರಿಹರಿಸಲು , ದೋಷದ ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಲು ನೀವು ಕೆಳಗಿನ CSS ಮತ್ತು JavaScript ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗಾಗಿ, ವಿಂಡೋಸ್ ಫೋನ್ 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-backdropz-ಇಂಡೆಕ್ಸಿಂಗ್‌ನ ಸಂಕೀರ್ಣತೆಯ ಕಾರಣದಿಂದಾಗಿ NAV ನಲ್ಲಿ iOS ನಲ್ಲಿ ಅಂಶವನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ . ಹೀಗಾಗಿ, ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಮುಚ್ಚಲು, ನೀವು ನೇರವಾಗಿ ಡ್ರಾಪ್‌ಡೌನ್ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬೇಕು (ಅಥವಾ ಐಒಎಸ್‌ನಲ್ಲಿ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಹಾರಿಸುವ ಯಾವುದೇ ಇತರ ಅಂಶ ).

ಬ್ರೌಸರ್ ಜೂಮ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಪುಟ ಝೂಮಿಂಗ್ ಅನಿವಾರ್ಯವಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ವೆಬ್‌ನ ಉಳಿದ ಭಾಗಗಳಲ್ಲಿ ಕೆಲವು ಘಟಕಗಳಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಕಲಾಕೃತಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಮಸ್ಯೆಯನ್ನು ಅವಲಂಬಿಸಿ, ನಾವು ಅದನ್ನು ಸರಿಪಡಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ (ಮೊದಲು ಹುಡುಕಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ). ಆದಾಗ್ಯೂ, ನಾವು ಇವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತೇವೆ ಏಕೆಂದರೆ ಅವುಗಳು ಹ್ಯಾಕಿ ಪರಿಹಾರಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದೇ ನೇರ ಪರಿಹಾರವನ್ನು ಹೊಂದಿಲ್ಲ.

ಜಿಗುಟಾದ `:hover`/`:focus`ಮೊಬೈಲ್‌ನಲ್ಲಿ

ಹೆಚ್ಚಿನ ಟಚ್‌ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ನಿಜವಾದ ತೂಗಾಡುವಿಕೆ ಸಾಧ್ಯವಾಗದಿದ್ದರೂ, ಹೆಚ್ಚಿನ ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳು ತೂಗಾಡುವ ಬೆಂಬಲವನ್ನು ಅನುಕರಿಸುತ್ತದೆ ಮತ್ತು :hover"ಜಿಗುಟಾದ" ಮಾಡುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, :hoverಒಂದು ಅಂಶವನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿದ ನಂತರ ಶೈಲಿಗಳು ಅನ್ವಯಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ ಮತ್ತು ಬಳಕೆದಾರನು ಕೆಲವು ಅಂಶಗಳನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ ಅನ್ವಯಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ :hoverಸ್ಥಿತಿಗಳು ಅಂತಹ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅನಪೇಕ್ಷಿತವಾಗಿ "ಅಂಟಿಕೊಳ್ಳುವಂತೆ" ಮಾಡಬಹುದು. ಕೆಲವು ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳು ಸಹ :focusಇದೇ ರೀತಿ ಅಂಟಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತವೆ. ಅಂತಹ ಶೈಲಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕುವುದನ್ನು ಹೊರತುಪಡಿಸಿ ಈ ಸಮಸ್ಯೆಗಳಿಗೆ ಪ್ರಸ್ತುತ ಯಾವುದೇ ಸರಳ ಪರಿಹಾರವಿಲ್ಲ.

ಮುದ್ರಣ

ಕೆಲವು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸಹ, ಮುದ್ರಣವು ಚಮತ್ಕಾರಿಯಾಗಿರಬಹುದು.

ನಿರ್ದಿಷ್ಟವಾಗಿ ಹೇಳುವುದಾದರೆ, Chrome v32 ರಂತೆ ಮತ್ತು ಅಂಚು ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ, ವೆಬ್‌ಪುಟವನ್ನು ಮುದ್ರಿಸುವಾಗ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಪರಿಹರಿಸುವಾಗ ಭೌತಿಕ ಕಾಗದದ ಗಾತ್ರಕ್ಕಿಂತ ಗಮನಾರ್ಹವಾಗಿ ಕಿರಿದಾದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಗಲವನ್ನು Chrome ಬಳಸುತ್ತದೆ. ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಹೆಚ್ಚುವರಿ-ಸಣ್ಣ ಗ್ರಿಡ್ ಅನ್ನು ಮುದ್ರಿಸುವಾಗ ಅನಿರೀಕ್ಷಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲು ಕಾರಣವಾಗಬಹುದು. ಕೆಲವು ವಿವರಗಳಿಗಾಗಿ ಸಂಚಿಕೆ #12078 ಮತ್ತು Chrome ಬಗ್ #273306 ಅನ್ನು ನೋಡಿ. ಸೂಚಿಸಿದ ಪರಿಹಾರೋಪಾಯಗಳು:

ಹೆಚ್ಚುವರಿ-ಸಣ್ಣ ಗ್ರಿಡ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಪುಟವು ಅದರ ಅಡಿಯಲ್ಲಿ ಸ್ವೀಕಾರಾರ್ಹವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಮೌಲ್ಯಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ@screen-* ಇದರಿಂದ ನಿಮ್ಮ ಪ್ರಿಂಟರ್ ಪೇಪರ್ ಅನ್ನು ಚಿಕ್ಕದಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
ಮುದ್ರಣ ಮಾಧ್ಯಮಕ್ಕೆ ಮಾತ್ರ ಗ್ರಿಡ್ ಗಾತ್ರದ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಲು ಕಸ್ಟಮ್ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸೇರಿಸಿ.

ಅಲ್ಲದೆ, Safari v8.0 ನಂತೆ, ಸ್ಥಿರ-ಅಗಲ .containerಗಳು ಸಫಾರಿಯು ಮುದ್ರಣ ಮಾಡುವಾಗ ಅಸಾಮಾನ್ಯವಾಗಿ ಚಿಕ್ಕದಾದ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬಳಸಲು ಕಾರಣವಾಗಬಹುದು. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ # 14868 ಮತ್ತು WebKit ಬಗ್ #138192 ನೋಡಿ. ಇದಕ್ಕಾಗಿ ಒಂದು ಸಂಭಾವ್ಯ ಪರಿಹಾರವೆಂದರೆ ಕೆಳಗಿನ CSS ಅನ್ನು ಸೇರಿಸುವುದು:

@media print {
  .container {
    width: auto;
  }
}

ಆಂಡ್ರಾಯ್ಡ್ ಸ್ಟಾಕ್ ಬ್ರೌಸರ್

ಬಾಕ್ಸ್‌ನ ಹೊರಗೆ, Android 4.1 (ಮತ್ತು ಕೆಲವು ಹೊಸ ಬಿಡುಗಡೆಗಳು ಸ್ಪಷ್ಟವಾಗಿ) ಬ್ರೌಸರ್ ಅಪ್ಲಿಕೇಶನ್‌ನೊಂದಿಗೆ ಆಯ್ಕೆಯ ಡೀಫಾಲ್ಟ್ ವೆಬ್ ಬ್ರೌಸರ್‌ನಂತೆ (Chrome ಗೆ ವಿರುದ್ಧವಾಗಿ) ರವಾನಿಸುತ್ತದೆ. ದುರದೃಷ್ಟವಶಾತ್, ಬ್ರೌಸರ್ ಅಪ್ಲಿಕೇಶನ್ ಸಾಮಾನ್ಯವಾಗಿ CSS ನೊಂದಿಗೆ ಸಾಕಷ್ಟು ದೋಷಗಳು ಮತ್ತು ಅಸಂಗತತೆಗಳನ್ನು ಹೊಂದಿದೆ.

ಮೆನುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ

<select>ಅಂಶಗಳಲ್ಲಿ, Android ಸ್ಟಾಕ್ ಬ್ರೌಸರ್ ಒಂದು border-radiusಮತ್ತು/ಅಥವಾ borderಅನ್ವಯಿಸಿದ್ದರೆ ಅಡ್ಡ ನಿಯಂತ್ರಣಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ . (ವಿವರಗಳಿಗಾಗಿ ಈ StackOverflow ಪ್ರಶ್ನೆಯನ್ನು ನೋಡಿ .) ಆಕ್ಷೇಪಾರ್ಹ CSS ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಕೆಳಗಿನ ಕೋಡ್‌ನ ತುಣುಕನ್ನು ಬಳಸಿ ಮತ್ತು <select>Android ಸ್ಟಾಕ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಶೈಲಿಯಿಲ್ಲದ ಅಂಶವಾಗಿ ನಿರೂಪಿಸಿ. ಬಳಕೆದಾರ ಏಜೆಂಟ್ ಸ್ನಿಫಿಂಗ್ Chrome, Safari ಮತ್ತು Mozilla ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪವನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡಲು ಬಯಸುವಿರಾ? ಈ JS ಬಿನ್ ಡೆಮೊವನ್ನು ಪರಿಶೀಲಿಸಿ.

ಮೌಲ್ಯೀಕರಿಸುವವರು

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

ನಮ್ಮ CSS ನ ಹ್ಯಾಕಿ ಅಲ್ಲದ ಭಾಗವು ಸಂಪೂರ್ಣವಾಗಿ ಮೌಲ್ಯೀಕರಿಸುವುದರಿಂದ ಮತ್ತು ಹ್ಯಾಕಿ ಭಾಗಗಳು ಹ್ಯಾಕಿ ಅಲ್ಲದ ಭಾಗದ ಸರಿಯಾದ ಕಾರ್ಯನಿರ್ವಹಣೆಯಲ್ಲಿ ಮಧ್ಯಪ್ರವೇಶಿಸುವುದಿಲ್ಲವಾದ್ದರಿಂದ ಈ ಮೌಲ್ಯೀಕರಣ ಎಚ್ಚರಿಕೆಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಈ ನಿರ್ದಿಷ್ಟ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ನಿರ್ಲಕ್ಷಿಸುತ್ತೇವೆ.

ನಮ್ಮ HTML ಡಾಕ್ಸ್ ಅಂತೆಯೇ ಕೆಲವು ಕ್ಷುಲ್ಲಕ ಮತ್ತು ಅಸಮಂಜಸವಾದ HTML ಮೌಲ್ಯೀಕರಣ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಹೊಂದಿದೆ ಏಕೆಂದರೆ ಒಂದು ನಿರ್ದಿಷ್ಟ ಫೈರ್‌ಫಾಕ್ಸ್ ದೋಷಕ್ಕೆ ಪರಿಹಾರವನ್ನು ನಾವು ಸೇರಿಸಿದ್ದೇವೆ .

ನಾವು ಯಾವುದೇ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಪ್ಲಗಿನ್‌ಗಳು ಅಥವಾ ಆಡ್-ಆನ್‌ಗಳನ್ನು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿಸದಿದ್ದರೂ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡಲು ನಾವು ಕೆಲವು ಉಪಯುಕ್ತ ಸಲಹೆಗಳನ್ನು ನೀಡುತ್ತೇವೆ.

ಬಾಕ್ಸ್ ಗಾತ್ರ

Google ನಕ್ಷೆಗಳು ಮತ್ತು Google ಕಸ್ಟಮ್ ಸರ್ಚ್ ಇಂಜಿನ್ ಸೇರಿದಂತೆ ಕೆಲವು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸಾಫ್ಟ್‌ವೇರ್, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಘರ್ಷಣೆಯ ಕಾರಣದಿಂದಾಗಿ * { box-sizing: border-box; }, ಒಂದು ನಿಯಮವು paddingಅಂಶದ ಅಂತಿಮ ಕಂಪ್ಯೂಟೆಡ್ ಅಗಲದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. CSS ಟ್ರಿಕ್ಸ್ ನಲ್ಲಿ ಬಾಕ್ಸ್ ಮಾದರಿ ಮತ್ತು ಗಾತ್ರದ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .

ಸಂದರ್ಭಕ್ಕೆ ಅನುಗುಣವಾಗಿ, ನೀವು ಅಗತ್ಯವಿರುವಂತೆ (ಆಯ್ಕೆ 1) ಅತಿಕ್ರಮಿಸಬಹುದು ಅಥವಾ ಸಂಪೂರ್ಣ ಪ್ರದೇಶಗಳಿಗೆ ಬಾಕ್ಸ್ ಗಾತ್ರವನ್ನು ಮರುಹೊಂದಿಸಬಹುದು (ಆಯ್ಕೆ 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಮಾನ್ಯ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು-ಕನಿಷ್ಠ ಹೆಚ್ಚುವರಿ ಪ್ರಯತ್ನದೊಂದಿಗೆ- 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; }.

ಈ ದೋಷವು ನಿಮ್ಮ ಸೈಟ್ ಬಳಸುತ್ತಿರುವ ಯಾವುದೇ ಇತರ ಪುಟದ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ, ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಅವುಗಳನ್ನು ಅನುಪಯುಕ್ತಗೊಳಿಸುತ್ತದೆ. ಲಿಂಕ್ ಟಾರ್ಗೆಟ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಎಲ್ಲಾ ಇತರ ಹೆಸರಿನ ಆಂಕರ್‌ಗಳು / ಫ್ರಾಗ್ಮೆಂಟ್ ಐಡೆಂಟಿಫೈಯರ್‌ಗಳಿಗೆ ಇದೇ ರೀತಿಯ ಸ್ಟಾಪ್-ಗ್ಯಾಪ್ ಫಿಕ್ಸ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ನೀವು ಪರಿಗಣಿಸಬಹುದು.

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

ನೆಸ್ಟೆಡ್ ಶೀರ್ಷಿಕೆಗಳು

ಗೂಡುಕಟ್ಟುವ ಶಿರೋನಾಮೆಗಳು ( <h1>- <h6>), ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಡಾಕ್ಯುಮೆಂಟ್ ಹೆಡರ್ ಒಂದು ಆಗಿರಬೇಕು <h1>. ನಂತರದ ಶಿರೋನಾಮೆಗಳು ತಾರ್ಕಿಕವಾಗಿ ಬಳಸಬೇಕು <h2>- <h6>ಅಂದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ನಿಮ್ಮ ಪುಟಗಳಿಗಾಗಿ ವಿಷಯಗಳ ಕೋಷ್ಟಕವನ್ನು ರಚಿಸಬಹುದು.

HTML CodeSniffer ಮತ್ತು Penn State's AccessAbility ನಲ್ಲಿ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .

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

ಪ್ರಸ್ತುತ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಕೆಲವು ಡೀಫಾಲ್ಟ್ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು (ಉದಾಹರಣೆಗೆ ವಿವಿಧ ಶೈಲಿಯ ಬಟನ್ ವರ್ಗಗಳು, ಮೂಲ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಬಳಸುವ ಕೆಲವು ಕೋಡ್ ಹೈಲೈಟ್ ಮಾಡುವ ಬಣ್ಣಗಳು , .bg-primary ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆ ಸಹಾಯಕ ವರ್ಗ ಮತ್ತು ಬಿಳಿ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸಿದಾಗ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಬಣ್ಣ) ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಹೊಂದಿರುತ್ತದೆ ( ಶಿಫಾರಸು ಮಾಡಿದ ಅನುಪಾತ 4.5:1 ಕ್ಕಿಂತ ಕಡಿಮೆ ). ಇದು ಕಡಿಮೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಅಥವಾ ಬಣ್ಣ ಕುರುಡು ಬಳಕೆದಾರರಿಗೆ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಈ ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳು ಅವುಗಳ ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಸ್ಪಷ್ಟತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಮಾರ್ಪಡಿಸಬೇಕಾಗಬಹುದು.

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು MIT ಪರವಾನಗಿ ಅಡಿಯಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಹಕ್ಕುಸ್ವಾಮ್ಯ 2019 Twitter ಆಗಿದೆ. ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ಕುದಿಸಿ, ಇದನ್ನು ಈ ಕೆಳಗಿನ ಷರತ್ತುಗಳೊಂದಿಗೆ ವಿವರಿಸಬಹುದು.

ಇದು ನಿಮಗೆ ಅಗತ್ಯವಿರುತ್ತದೆ:

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ಕೃತಿಗಳಲ್ಲಿ ಬಳಸುವಾಗ ಪರವಾನಗಿ ಮತ್ತು ಹಕ್ಕುಸ್ವಾಮ್ಯ ಸೂಚನೆಯನ್ನು ಸೇರಿಸಿ

ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ:

ವೈಯಕ್ತಿಕ, ಖಾಸಗಿ, ಕಂಪನಿಯ ಆಂತರಿಕ ಅಥವಾ ವಾಣಿಜ್ಯ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಸಂಪೂರ್ಣವಾಗಿ ಅಥವಾ ಭಾಗಶಃ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಉಚಿತವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಬಳಸಿ
ನೀವು ರಚಿಸುವ ಪ್ಯಾಕೇಜ್‌ಗಳು ಅಥವಾ ವಿತರಣೆಗಳಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸಿ
ಮೂಲ ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಿ
ಪರವಾನಗಿಯಲ್ಲಿ ಸೇರಿಸದ ಮೂರನೇ ವ್ಯಕ್ತಿಗಳಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಲು ಮತ್ತು ವಿತರಿಸಲು ಉಪಪರವಾನಗಿಯನ್ನು ನೀಡಿ

ಇದು ನಿಮ್ಮನ್ನು ನಿಷೇಧಿಸುತ್ತದೆ:

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಖಾತರಿಯಿಲ್ಲದೆ ಒದಗಿಸಲ್ಪಟ್ಟಿರುವುದರಿಂದ ಲೇಖಕರು ಮತ್ತು ಪರವಾನಗಿ ಮಾಲೀಕರನ್ನು ಹಾನಿಗಳಿಗೆ ಹೊಣೆಗಾರರನ್ನಾಗಿ ಮಾಡಿ
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ರಚನೆಕಾರರು ಅಥವಾ ಹಕ್ಕುಸ್ವಾಮ್ಯ ಹೊಂದಿರುವವರನ್ನು ಹೊಣೆಗಾರರನ್ನಾಗಿ ಮಾಡಿ
ಸರಿಯಾದ ಗುಣಲಕ್ಷಣವಿಲ್ಲದೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಯಾವುದೇ ತುಣುಕನ್ನು ಮರುಹಂಚಿಕೆ ಮಾಡಿ
Twitter ನಿಮ್ಮ ವಿತರಣೆಯನ್ನು ಅನುಮೋದಿಸುತ್ತದೆ ಎಂದು ಹೇಳುವ ಅಥವಾ ಸೂಚಿಸುವ ಯಾವುದೇ ರೀತಿಯಲ್ಲಿ Twitter ಮಾಲೀಕತ್ವದ ಯಾವುದೇ ಗುರುತುಗಳನ್ನು ಬಳಸಿ
ಟ್ವಿಟರ್ ಮಾಲೀಕತ್ವದ ಯಾವುದೇ ಗುರುತುಗಳನ್ನು ಯಾವುದೇ ರೀತಿಯಲ್ಲಿ ಬಳಸಿ ಅಥವಾ ನೀವು ಪ್ರಶ್ನೆಯಲ್ಲಿರುವ Twitter ಸಾಫ್ಟ್‌ವೇರ್ ಅನ್ನು ರಚಿಸಿದ್ದೀರಿ ಎಂದು ಸೂಚಿಸಬಹುದು

ಇದು ನಿಮಗೆ ಅಗತ್ಯವಿಲ್ಲ:

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

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪೂರ್ಣ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪರವಾನಗಿಯು ಪ್ರಾಜೆಕ್ಟ್ ರೆಪೊಸಿಟರಿಯಲ್ಲಿದೆ .

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

ಅನುವಾದಗಳನ್ನು ಸಂಘಟಿಸಲು ಅಥವಾ ಹೋಸ್ಟ್ ಮಾಡಲು ನಾವು ಸಹಾಯ ಮಾಡುವುದಿಲ್ಲ, ನಾವು ಅವುಗಳನ್ನು ಲಿಂಕ್ ಮಾಡುತ್ತೇವೆ.

ಹೊಸ ಅಥವಾ ಉತ್ತಮ ಅನುವಾದವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ್ದೀರಾ? ಅದನ್ನು ನಮ್ಮ ಪಟ್ಟಿಗೆ ಸೇರಿಸಲು ಪುಲ್ ವಿನಂತಿಯನ್ನು ತೆರೆಯಿರಿ.

ಶುರುವಾಗುತ್ತಿದೆ

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ