ਡਾਊਨਲੋਡ ਕਰੋ

ਬੂਟਸਟਰੈਪ (ਵਰਤਮਾਨ ਵਿੱਚ v3.3.7) ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਕੁਝ ਆਸਾਨ ਤਰੀਕੇ ਹਨ, ਹਰ ਇੱਕ ਇੱਕ ਵੱਖਰੇ ਹੁਨਰ ਪੱਧਰ ਅਤੇ ਵਰਤੋਂ ਦੇ ਮਾਮਲੇ ਨੂੰ ਆਕਰਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਦੇਖਣ ਲਈ ਪੜ੍ਹੋ ਕਿ ਤੁਹਾਡੀਆਂ ਖਾਸ ਲੋੜਾਂ ਕੀ ਹਨ।

ਬੂਟਸਟਰੈਪ CDN

jsDelivr 'ਤੇ ਲੋਕ ਕਿਰਪਾ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਲਈ CDN ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਬਸ ਇਹਨਾਂ ਬੂਟਸਟਰੈਪ CDN ਲਿੰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

ਬੋਵਰ ਨਾਲ ਸਥਾਪਿਤ ਕਰੋ

ਤੁਸੀਂ Bower ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਦੇ ਲੈਸ, CSS, ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਅਤੇ ਫੌਂਟਾਂ ਨੂੰ ਵੀ ਸਥਾਪਿਤ ਅਤੇ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦੇ ਹੋ :

$ bower install bootstrap

npm ਨਾਲ ਇੰਸਟਾਲ ਕਰੋ

ਤੁਸੀਂ npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਵੀ ਸਥਾਪਿਤ ਕਰ ਸਕਦੇ ਹੋ :

$ npm install bootstrap@3

require('bootstrap')ਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ jQuery ਪਲੱਗਇਨਾਂ ਨੂੰ jQuery ਆਬਜੈਕਟ ਉੱਤੇ ਲੋਡ ਕਰੇਗਾ। bootstrapਮੋਡੀਊਲ ਖੁਦ ਕੁਝ ਵੀ ਨਿਰਯਾਤ ਨਹੀਂ ਕਰਦਾ ਹੈ । /js/*.jsਤੁਸੀਂ ਪੈਕੇਜ ਦੀ ਉੱਚ-ਪੱਧਰੀ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅਧੀਨ ਫਾਈਲਾਂ ਨੂੰ ਲੋਡ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਦੇ jQuery ਪਲੱਗਇਨਾਂ ਨੂੰ ਹੱਥੀਂ ਲੋਡ ਕਰ ਸਕਦੇ ਹੋ ।

Bootstrap's package.jsonਵਿੱਚ ਹੇਠ ਲਿਖੀਆਂ ਕੁੰਜੀਆਂ ਦੇ ਅਧੀਨ ਕੁਝ ਵਾਧੂ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਹਨ:

• less- ਬੂਟਸਟਰੈਪ ਦੀ ਮੁੱਖ ਘੱਟ ਸਰੋਤ ਫਾਈਲ ਦਾ ਮਾਰਗ
• style- ਬੂਟਸਟਰੈਪ ਦੇ ਗੈਰ-ਮਿਨੀਫਾਈਡ CSS ਦਾ ਮਾਰਗ ਜੋ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਹਿਲਾਂ ਤੋਂ ਕੰਪਾਇਲ ਕੀਤਾ ਗਿਆ ਹੈ (ਕੋਈ ਅਨੁਕੂਲਿਤ ਨਹੀਂ)

ਕੰਪੋਜ਼ਰ ਨਾਲ ਇੰਸਟਾਲ ਕਰੋ

ਤੁਸੀਂ ਕੰਪੋਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਦੇ ਲੈਸ, CSS, ਜਾਵਾ ਸਕ੍ਰਿਪਟ, ਅਤੇ ਫੌਂਟਾਂ ਨੂੰ ਵੀ ਸਥਾਪਿਤ ਅਤੇ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦੇ ਹੋ :

$ composer require twbs/bootstrap

ਘੱਟ/ਸਾਸ ਲਈ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਲੋੜ ਹੈ

ਬੂਟਸਟਰੈਪ CSS ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸ ਨਾਲ ਨਜਿੱਠਣ ਲਈ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ । ਜੇਕਰ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਨੂੰ ਇਸ ਦੇ Less/Sass ਸਰੋਤ ਤੋਂ ਕੰਪਾਇਲ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਸਾਡੀ Gruntfile ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਨੂੰ ਆਪਣੀ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਖੁਦ ਜੋੜਨਾ ਪਵੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਪ੍ਰੀ-ਕੰਪਾਈਲਡ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਸਾਡੀ ਗਰੰਟਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਸ ਬਾਰੇ ਚਿੰਤਾ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਪਹਿਲਾਂ ਹੀ ਸਾਡੀ ਗਰੰਟਫਾਈਲ ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਹੈ।

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਬੂਟਸਟਰੈਪ ਦੋ ਰੂਪਾਂ ਵਿੱਚ ਡਾਉਨਲੋਡ ਕਰਨ ਯੋਗ ਹੈ, ਜਿਸ ਵਿੱਚ ਤੁਹਾਨੂੰ ਹੇਠ ਲਿਖੀਆਂ ਡਾਇਰੈਕਟਰੀਆਂ ਅਤੇ ਫਾਈਲਾਂ ਮਿਲਣਗੀਆਂ, ਆਮ ਸਰੋਤਾਂ ਨੂੰ ਤਰਕਸੰਗਤ ਰੂਪ ਵਿੱਚ ਸਮੂਹਿਕ ਕਰਨਾ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੇ ਅਤੇ ਛੋਟੇ ਰੂਪਾਂ ਦੋਵਾਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਨਾ।

ਪ੍ਰੀ-ਕੰਪਾਈਲਡ ਬੂਟਸਟਰੈਪ

ਇੱਕ ਵਾਰ ਡਾਉਨਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ, (ਕੰਪਾਈਲਡ) ਬੂਟਸਟਰੈਪ ਦੀ ਬਣਤਰ ਨੂੰ ਦੇਖਣ ਲਈ ਸੰਕੁਚਿਤ ਫੋਲਡਰ ਨੂੰ ਅਨਜ਼ਿਪ ਕਰੋ। ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਕੁਝ ਦੇਖੋਗੇ:

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, JavaScript, ਅਤੇ ਫੌਂਟ ਸੰਪਤੀਆਂ, ਸਰੋਤ ਘੱਟ, JavaScript, ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਨਾਲ ਸ਼ਾਮਲ ਹਨ। ਵਧੇਰੇ ਖਾਸ ਤੌਰ 'ਤੇ, ਇਸ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਅਤੇ ਹੋਰ ਵੀ ਸ਼ਾਮਲ ਹਨ:

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

, less/, js/ਅਤੇ fonts/ਸਾਡੇ CSS, JS, ਅਤੇ ਆਈਕਨ ਫੌਂਟਾਂ (ਕ੍ਰਮਵਾਰ) ਲਈ ਸਰੋਤ ਕੋਡ ਹਨ। dist/ਫੋਲਡਰ ਵਿੱਚ ਉਪਰੋਕਤ ਪ੍ਰੀ-ਕੰਪਾਈਲਡ ਡਾਉਨਲੋਡ ਸੈਕਸ਼ਨ ਵਿੱਚ ਸੂਚੀਬੱਧ ਸਭ ਕੁਝ ਸ਼ਾਮਲ ਹੈ । ਫੋਲਡਰ ਵਿੱਚ docs/ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਸਰੋਤ ਕੋਡ ਅਤੇ examples/ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕੋਈ ਵੀ ਹੋਰ ਸ਼ਾਮਲ ਕੀਤੀ ਫਾਈਲ ਪੈਕੇਜਾਂ, ਲਾਇਸੈਂਸ ਜਾਣਕਾਰੀ, ਅਤੇ ਵਿਕਾਸ ਲਈ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।

CSS ਅਤੇ JavaScript ਕੰਪਾਇਲ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਫਰੇਮਵਰਕ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਿਆਂ ਨਾਲ, ਇਸਦੇ ਬਿਲਡ ਸਿਸਟਮ ਲਈ ਗਰੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦੇ ਹਾਂ, ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਂਦੇ ਹਾਂ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਕਰਦੇ ਹਾਂ।

ਗਰੰਟ ਸਥਾਪਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

Grunt ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ node.js (ਜਿਸ ਵਿੱਚ npm ਸ਼ਾਮਲ ਹੈ) ਨੂੰ ਡਾਊਨਲੋਡ ਅਤੇ ਸਥਾਪਿਤ ਕਰਨਾ ਪਵੇਗਾ। npm ਦਾ ਅਰਥ ਹੈ ਨੋਡ ਪੈਕ ਕੀਤੇ ਮੋਡੀਊਲ ਅਤੇ node.js ਦੁਆਰਾ ਵਿਕਾਸ ਨਿਰਭਰਤਾ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ।

1. grunt-cliਨਾਲ ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਸਥਾਪਿਤ ਕਰੋ npm install -g grunt-cli.
2. ਰੂਟ /bootstrap/ਡਾਇਰੈਕਟਰੀ 'ਤੇ ਜਾਓ, ਫਿਰ ਚਲਾਓ npm install। npm ਫਾਈਲ ਨੂੰ ਵੇਖੇਗਾ package.jsonਅਤੇ ਉੱਥੇ ਸੂਚੀਬੱਧ ਲੋੜੀਂਦੀਆਂ ਸਥਾਨਕ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸਥਾਪਿਤ ਕਰੇਗਾ।

ਪੂਰਾ ਹੋਣ 'ਤੇ, ਤੁਸੀਂ ਕਮਾਂਡ ਲਾਈਨ ਤੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਵੱਖ-ਵੱਖ ਗਰੰਟ ਕਮਾਂਡਾਂ ਨੂੰ ਚਲਾਉਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।

ਉਪਲਬਧ ਗਰੰਟ ਕਮਾਂਡਾਂ

grunt dist(ਸਿਰਫ CSS ਅਤੇ JavaScript ਕੰਪਾਇਲ ਕਰੋ)

/dist/ਸੰਕਲਿਤ ਅਤੇ ਮਿੰਨੀਫਾਈਡ CSS ਅਤੇ JavaScript ਫਾਈਲਾਂ ਨਾਲ ਡਾਇਰੈਕਟਰੀ ਨੂੰ ਮੁੜ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਇੱਕ ਬੂਟਸਟਰੈਪ ਉਪਭੋਗਤਾ ਵਜੋਂ, ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਉਹ ਕਮਾਂਡ ਹੈ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ।

grunt watch(ਦੇਖੋ)

ਘੱਟ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਦੇਖਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਕੋਈ ਬਦਲਾਅ ਸੁਰੱਖਿਅਤ ਕਰਦੇ ਹੋ ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ CSS ਵਿੱਚ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰ ਦਿੰਦਾ ਹੈ।

grunt test(ਟੈਸਟ ਚਲਾਓ)

JSHint ਚਲਾਉਂਦਾ ਹੈ ਅਤੇ PhantomJS ਵਿੱਚ QUnit ਟੈਸਟਾਂ ਨੂੰ ਬਿਨਾਂ ਸਿਰ ਦੇ ਚਲਾਉਂਦਾ ਹੈ ।

grunt docs(ਡੌਕਸ ਸੰਪਤੀਆਂ ਨੂੰ ਬਣਾਓ ਅਤੇ ਟੈਸਟ ਕਰੋ)

CSS, JavaScript, ਅਤੇ ਹੋਰ ਸੰਪਤੀਆਂ ਨੂੰ ਬਣਾਉਂਦਾ ਅਤੇ ਟੈਸਟ ਕਰਦਾ ਹੈ ਜੋ ਕਿ ਦੁਆਰਾ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਚਲਾਉਣ ਵੇਲੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ bundle exec jekyll serve।

grunt(ਬਿਲਕੁਲ ਸਭ ਕੁਝ ਬਣਾਓ ਅਤੇ ਟੈਸਟ ਚਲਾਓ)

CSS ਅਤੇ JavaScript ਨੂੰ ਕੰਪਾਇਲ ਅਤੇ ਮਿਨੀਫਾਈ ਕਰਦਾ ਹੈ, ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਵੈੱਬਸਾਈਟ ਬਣਾਉਂਦਾ ਹੈ, ਡੌਕਸ ਦੇ ਵਿਰੁੱਧ HTML5 ਵੈਲੀਡੇਟਰ ਚਲਾਉਂਦਾ ਹੈ, ਕਸਟਮਾਈਜ਼ਰ ਸੰਪਤੀਆਂ ਨੂੰ ਮੁੜ-ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ। ਜੇਕੀਲ ਦੀ ਲੋੜ ਹੈ । ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਖੁਦ ਬੂਟਸਟਰੈਪ 'ਤੇ ਹੈਕ ਕਰ ਰਹੇ ਹੋ।

ਸਮੱਸਿਆ ਨਿਪਟਾਰਾ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰਨ ਜਾਂ Grunt ਕਮਾਂਡਾਂ ਨੂੰ ਚਲਾਉਣ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਤਾਂ ਪਹਿਲਾਂ /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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ਉਦਾਹਰਨਾਂ

ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸਿਆਂ ਦੇ ਨਾਲ ਉੱਪਰ ਦਿੱਤੇ ਮੂਲ ਟੈਪਲੇਟ 'ਤੇ ਬਣਾਓ। ਅਸੀਂ ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਨੂੰ ਤੁਹਾਡੇ ਵਿਅਕਤੀਗਤ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਦੇ ਅਨੁਕੂਲ ਬਣਾਉਣ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ।

ਬੂਟਸਟਰੈਪ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੀ ਹਰੇਕ ਉਦਾਹਰਣ ਲਈ ਸਰੋਤ ਕੋਡ ਪ੍ਰਾਪਤ ਕਰੋ । docs/examples/ਉਦਾਹਰਨਾਂ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਮਿਲ ਸਕਦੀਆਂ ਹਨ ।

ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

ਸਟਾਰਟਰ ਟੈਮਪਲੇਟ

ਬੇਸਿਕਸ ਤੋਂ ਇਲਾਵਾ ਕੁਝ ਨਹੀਂ: ਕੰਟੇਨਰ ਦੇ ਨਾਲ ਕੰਪਾਇਲ ਕੀਤਾ CSS ਅਤੇ JavaScript.

ਬੂਟਸਟਰੈਪ ਥੀਮ

ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਅਨੁਭਵ ਲਈ ਵਿਕਲਪਿਕ ਬੂਟਸਟਰੈਪ ਥੀਮ ਨੂੰ ਲੋਡ ਕਰੋ।

ਗਰਿੱਡ

ਸਾਰੇ ਚਾਰ ਪੱਧਰਾਂ, ਨੇਸਟਿੰਗ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਨਾਲ ਗਰਿੱਡ ਲੇਆਉਟ ਦੀਆਂ ਕਈ ਉਦਾਹਰਨਾਂ।

ਜੰਬੋਟ੍ਰੋਨ

ਇੱਕ ਨਵਬਾਰ ਅਤੇ ਕੁਝ ਬੁਨਿਆਦੀ ਗਰਿੱਡ ਕਾਲਮਾਂ ਨਾਲ ਜੰਬੋਟ੍ਰੋਨ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਬਣਾਓ।

ਤੰਗ ਜੰਬੋਟ੍ਰੋਨ

ਡਿਫੌਲਟ ਕੰਟੇਨਰ ਅਤੇ ਜੰਬੋਟ੍ਰੋਨ ਨੂੰ ਸੰਕੁਚਿਤ ਕਰਕੇ ਇੱਕ ਹੋਰ ਕਸਟਮ ਪੰਨਾ ਬਣਾਓ।

ਕਾਰਵਾਈ ਵਿੱਚ ਨਵਬਾਰ

ਨਵਬਾਰ

ਸੁਪਰ ਬੇਸਿਕ ਟੈਂਪਲੇਟ ਜਿਸ ਵਿੱਚ ਕੁਝ ਵਾਧੂ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਨਵਬਾਰ ਵੀ ਸ਼ਾਮਲ ਹੈ।

ਸਥਿਰ ਸਿਖਰ ਨਵਬਾਰ

ਕੁਝ ਵਾਧੂ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕ ਸਥਿਰ ਚੋਟੀ ਦੇ ਨਵਬਾਰ ਦੇ ਨਾਲ ਸੁਪਰ ਬੇਸਿਕ ਟੈਂਪਲੇਟ।

ਸਥਿਰ ਨਵਬਾਰ

ਕੁਝ ਵਾਧੂ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕ ਸਥਿਰ ਚੋਟੀ ਦੇ ਨਵਬਾਰ ਦੇ ਨਾਲ ਸੁਪਰ ਬੇਸਿਕ ਟੈਂਪਲੇਟ।

ਕਸਟਮ ਭਾਗ

ਕਵਰ

ਸਧਾਰਨ ਅਤੇ ਸੁੰਦਰ ਹੋਮ ਪੇਜ ਬਣਾਉਣ ਲਈ ਇੱਕ-ਪੰਨੇ ਦਾ ਟੈਂਪਲੇਟ।

ਕੈਰੋਸਲ

ਨਵਬਾਰ ਅਤੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ, ਫਿਰ ਕੁਝ ਨਵੇਂ ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ।

ਬਲੌਗ

ਕਸਟਮ ਨੈਵੀਗੇਸ਼ਨ, ਸਿਰਲੇਖ ਅਤੇ ਕਿਸਮ ਦੇ ਨਾਲ ਸਧਾਰਨ ਦੋ-ਕਾਲਮ ਬਲੌਗ ਖਾਕਾ।

ਡੈਸ਼ਬੋਰਡ

ਫਿਕਸਡ ਸਾਈਡਬਾਰ ਅਤੇ ਨਵਬਾਰ ਦੇ ਨਾਲ ਇੱਕ ਐਡਮਿਨ ਡੈਸ਼ਬੋਰਡ ਲਈ ਬੁਨਿਆਦੀ ਢਾਂਚਾ।

ਸਾਈਨ-ਇਨ ਪੰਨਾ

ਸਧਾਰਨ ਸਾਈਨ ਇਨ ਫਾਰਮ ਲਈ ਕਸਟਮ ਫਾਰਮ ਲੇਆਉਟ ਅਤੇ ਡਿਜ਼ਾਈਨ।

ਜਾਇਜ਼ ਨੈਵ

ਜਾਇਜ਼ ਲਿੰਕਾਂ ਦੇ ਨਾਲ ਇੱਕ ਕਸਟਮ ਨਵਬਾਰ ਬਣਾਓ। ਸਿਰ! ਬਹੁਤ ਸਫਾਰੀ ਦੋਸਤਾਨਾ ਨਹੀਂ.

ਸਟਿੱਕੀ ਫੁੱਟਰ

ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫੁੱਟਰ ਨੱਥੀ ਕਰੋ ਜਦੋਂ ਸਮੱਗਰੀ ਇਸ ਤੋਂ ਛੋਟੀ ਹੋਵੇ।

ਨਵਬਾਰ ਦੇ ਨਾਲ ਸਟਿੱਕੀ ਫੁੱਟਰ

ਸਿਖਰ 'ਤੇ ਇੱਕ ਸਥਿਰ ਨਵਬਾਰ ਦੇ ਨਾਲ ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫੁੱਟਰ ਨੱਥੀ ਕਰੋ।

ਪ੍ਰਯੋਗ

ਗੈਰ-ਜਵਾਬਦੇਹ ਬੂਟਸਟਰੈਪ

ਸਾਡੇ ਡੌਕਸ ਪ੍ਰਤੀ ਬੂਟਸਟਰੈਪ ਦੀ ਜਵਾਬਦੇਹੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਅਸਮਰੱਥ ਕਰੋ ।

ਆਫ-ਕੈਨਵਸ

ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ ਵਰਤਣ ਲਈ ਇੱਕ ਟੌਗਲ ਕਰਨ ਯੋਗ ਆਫ-ਕੈਨਵਸ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਬਣਾਓ।

ਸੰਦ

ਬੂਟਲਿੰਟ

Bootlint ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ HTML ਲਿੰਟਰ ਟੂਲ ਹੈ। ਇਹ ਆਪਣੇ ਆਪ ਹੀ ਵੈਬਪੇਜਾਂ ਵਿੱਚ ਕਈ ਆਮ HTML ਗਲਤੀਆਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ "ਵਨੀਲਾ" ਤਰੀਕੇ ਨਾਲ ਵਰਤ ਰਹੇ ਹਨ। ਵਨੀਲਾ ਬੂਟਸਟਰੈਪ ਦੇ ਕੰਪੋਨੈਂਟ/ਵਿਜੇਟਸ ਨੂੰ ਕੁਝ ਢਾਂਚੇ ਦੇ ਅਨੁਕੂਲ ਹੋਣ ਲਈ DOM ਦੇ ਉਹਨਾਂ ਦੇ ਹਿੱਸਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਬੂਟਲਿੰਟ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਬੂਟਸਟਰੈਪ ਕੰਪੋਨੈਂਟਸ ਦੇ HTML ਸਹੀ ਢੰਗ ਨਾਲ ਸਟ੍ਰਕਚਰ ਕੀਤੇ ਗਏ ਹਨ। ਆਪਣੇ ਬੂਟਸਟਰੈਪ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਚੇਨ ਵਿੱਚ ਬੂਟਲਿੰਟ ਨੂੰ ਜੋੜਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ਤਾਂ ਕਿ ਕੋਈ ਵੀ ਆਮ ਗਲਤੀ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਵਿਕਾਸ ਨੂੰ ਹੌਲੀ ਨਾ ਕਰੇ।

ਭਾਈਚਾਰਾ

ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਕਾਸ 'ਤੇ ਅੱਪ ਟੂ ਡੇਟ ਰਹੋ ਅਤੇ ਇਹਨਾਂ ਮਦਦਗਾਰ ਸਰੋਤਾਂ ਨਾਲ ਭਾਈਚਾਰੇ ਤੱਕ ਪਹੁੰਚੋ।

• ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਬਲੌਗ ਨੂੰ ਪੜ੍ਹੋ ਅਤੇ ਗਾਹਕ ਬਣੋ ।
• ##bootstrap ਚੈਨਲirc.freenode.net ਵਿੱਚ ਸਰਵਰ ਵਿੱਚ IRC ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਾਥੀ ਬੂਟਸਟਰੈਪਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰੋ ।
• ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਲਈ, ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ StackOverflowtwitter-bootstrap-3 'ਤੇ ਪੁੱਛੋ ।
• ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਪੈਕੇਜਾਂ 'ਤੇ ਕੀਵਰਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਵੱਧ ਤੋਂ ਵੱਧ ਖੋਜਯੋਗਤਾ ਲਈ npm ਜਾਂ ਸਮਾਨ ਡਿਲੀਵਰੀ ਵਿਧੀ bootstrapਰਾਹੀਂ ਵੰਡਣ ਵੇਲੇ ਬੂਟਸਟਰੈਪ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਜਾਂ ਜੋੜਦੇ ਹਨ ।
• ਬੂਟਸਟਰੈਪ ਐਕਸਪੋ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨਾਲ ਬਣਾਉਣ ਵਾਲੇ ਲੋਕਾਂ ਦੀਆਂ ਪ੍ਰੇਰਨਾਦਾਇਕ ਉਦਾਹਰਣਾਂ ਲੱਭੋ ।

ਤੁਸੀਂ ਨਵੀਨਤਮ ਗੱਪਾਂ ਅਤੇ ਸ਼ਾਨਦਾਰ ਸੰਗੀਤ ਵੀਡੀਓਜ਼ ਲਈ ਟਵਿੱਟਰ 'ਤੇ @getbootstrap ਨੂੰ ਵੀ ਫਾਲੋ ਕਰ ਸਕਦੇ ਹੋ ।

ਜਵਾਬਦੇਹੀ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਇਆ ਜਾ ਰਿਹਾ ਹੈ

ਬੂਟਸਟਰੈਪ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਲਈ ਆਪਣੇ ਆਪ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ। ਇੱਥੇ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਦੱਸਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਤੁਹਾਡਾ ਪੰਨਾ ਇਸ ਗੈਰ-ਜਵਾਬਦੇਹ ਉਦਾਹਰਨ ਵਾਂਗ ਕੰਮ ਕਰੇ ।

ਪੰਨੇ ਦੀ ਜਵਾਬਦੇਹੀ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕਦਮ

1. CSS ਡੌਕਸ<meta> ਵਿੱਚ ਜ਼ਿਕਰ ਕੀਤੇ ਵਿਊਪੋਰਟ ਨੂੰ ਛੱਡ ਦਿਓ
2. ਇੱਕ ਸਿੰਗਲ ਚੌੜਾਈ ਦੇ ਨਾਲ ਹਰੇਕ ਗਰਿੱਡ ਟੀਅਰ ਲਈ widthਉੱਤੇ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ , ਉਦਾਹਰਨ ਲਈ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਡਿਫੌਲਟ ਬੂਟਸਟਰੈਪ CSS ਤੋਂ ਬਾਅਦ ਆਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਜਾਂ ਕੁਝ ਚੋਣਕਾਰ-ਫੂ ਨਾਲ ਬਚ ਸਕਦੇ ਹੋ।.containerwidth: 970px !important;!important
3. ਜੇਕਰ ਨਵਬਾਰ ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ ਸਾਰੇ ਨਵਬਾਰ ਸਮੇਟਣ ਅਤੇ ਵਿਸਤਾਰ ਕਰਨ ਵਾਲੇ ਵਿਵਹਾਰ ਨੂੰ ਹਟਾਓ।
4. ਗਰਿੱਡ ਲੇਆਉਟ .col-xs-*ਲਈ, ਮੱਧਮ/ਵੱਡੇ ਲੇਆਉਟਸ ਦੇ ਨਾਲ, ਜਾਂ ਉਹਨਾਂ ਦੀ ਥਾਂ 'ਤੇ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਚਿੰਤਾ ਨਾ ਕਰੋ, ਵਾਧੂ-ਛੋਟੇ ਜੰਤਰ ਗਰਿੱਡ ਸਾਰੇ ਰੈਜ਼ੋਲੂਸ਼ਨ ਤੱਕ ਸਕੇਲ.

ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ IE8 ਲਈ Respond.js ਦੀ ਲੋੜ ਪਵੇਗੀ (ਕਿਉਂਕਿ ਸਾਡੀਆਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਅਜੇ ਵੀ ਉੱਥੇ ਹਨ ਅਤੇ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਦੀ ਲੋੜ ਹੈ)। ਇਹ ਬੂਟਸਟਰੈਪ ਦੇ "ਮੋਬਾਈਲ ਸਾਈਟ" ਪਹਿਲੂਆਂ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।

ਜਵਾਬਦੇਹੀ ਅਯੋਗ ਵਾਲਾ ਬੂਟਸਟਰੈਪ ਟੈਮਪਲੇਟ

ਅਸੀਂ ਇਹਨਾਂ ਕਦਮਾਂ ਨੂੰ ਇੱਕ ਉਦਾਹਰਨ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਹੈ। ਲਾਗੂ ਕੀਤੀਆਂ ਗਈਆਂ ਖਾਸ ਤਬਦੀਲੀਆਂ ਨੂੰ ਦੇਖਣ ਲਈ ਇਸਦਾ ਸਰੋਤ ਕੋਡ ਪੜ੍ਹੋ।

ਗੈਰ-ਜਵਾਬਦੇਹ ਉਦਾਹਰਨ ਦੇਖੋ

ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਡਿਵਾਈਸ ਸਪੋਰਟ

ਬੂਟਸਟਰੈਪ ਨਵੀਨਤਮ ਡੈਸਕਟੌਪ ਅਤੇ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਮਤਲਬ ਕਿ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਸਟਾਈਲ ਦਿਖਾ ਸਕਦੇ ਹਨ, ਹਾਲਾਂਕਿ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਜਸ਼ੀਲ, ਕੁਝ ਭਾਗਾਂ ਦੇ ਰੈਂਡਰਿੰਗ।

ਸਮਰਥਿਤ ਬ੍ਰਾਊਜ਼ਰ

ਖਾਸ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ ਦੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ।

ਵੈਬਕਿੱਟ, ਬਲਿੰਕ, ਜਾਂ ਗੇਕੋ ਦੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਵਿਕਲਪਿਕ ਬ੍ਰਾਊਜ਼ਰ, ਭਾਵੇਂ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਜਾਂ ਪਲੇਟਫਾਰਮ ਦੇ ਵੈੱਬ ਵਿਊ API ਰਾਹੀਂ, ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ। ਹਾਲਾਂਕਿ, ਬੂਟਸਟਰੈਪ (ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ) ਇਹਨਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਵੀ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਅਤੇ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਵਧੇਰੇ ਖਾਸ ਸਹਾਇਤਾ ਜਾਣਕਾਰੀ ਹੇਠਾਂ ਦਿੱਤੀ ਗਈ ਹੈ।

ਮੋਬਾਈਲ ਉਪਕਰਣ

ਆਮ ਤੌਰ 'ਤੇ, ਬੂਟਸਟਰੈਪ ਹਰੇਕ ਪ੍ਰਮੁੱਖ ਪਲੇਟਫਾਰਮ ਦੇ ਡਿਫੌਲਟ ਬ੍ਰਾਉਜ਼ਰਾਂ ਦੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਪ੍ਰੌਕਸੀ ਬ੍ਰਾਊਜ਼ਰ (ਜਿਵੇਂ ਕਿ ਓਪੇਰਾ ਮਿਨੀ, ਓਪੇਰਾ ਮੋਬਾਈਲ ਦਾ ਟਰਬੋ ਮੋਡ, ਯੂਸੀ ਬ੍ਰਾਊਜ਼ਰ ਮਿਨੀ, ਐਮਾਜ਼ਾਨ ਸਿਲਕ) ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਡੈਸਕਟਾਪ ਬ੍ਰਾਊਜ਼ਰ

ਇਸੇ ਤਰ੍ਹਾਂ, ਜ਼ਿਆਦਾਤਰ ਡੈਸਕਟਾਪ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣ ਸਮਰਥਿਤ ਹਨ।

ਵਿੰਡੋਜ਼ 'ਤੇ, ਅਸੀਂ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8-11 ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ ।

ਫਾਇਰਫਾਕਸ ਲਈ, ਨਵੀਨਤਮ ਸਧਾਰਣ ਸਥਿਰ ਰੀਲੀਜ਼ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ ਫਾਇਰਫਾਕਸ ਦੇ ਨਵੀਨਤਮ ਐਕਸਟੈਂਡਡ ਸਪੋਰਟ ਰੀਲੀਜ਼ (ESR) ਸੰਸਕਰਣ ਦਾ ਵੀ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ।

ਅਣਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ, ਬੂਟਸਟਰੈਪ ਨੂੰ ਕ੍ਰੋਮੀਅਮ ਅਤੇ ਲੀਨਕਸ ਲਈ ਕ੍ਰੋਮ, ਲੀਨਕਸ ਲਈ ਫਾਇਰਫਾਕਸ, ਅਤੇ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 7, ਅਤੇ ਨਾਲ ਹੀ ਮਾਈਕ੍ਰੋਸਾੱਫਟ ਐਜ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਦੇਖਣਾ ਅਤੇ ਵਿਵਹਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਹਾਲਾਂਕਿ ਇਹ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਬੱਗਾਂ ਦੀ ਸੂਚੀ ਲਈ ਜਿਨ੍ਹਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਜੂਝਣਾ ਪੈਂਦਾ ਹੈ, ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਬੱਗਾਂ ਦੀ ਕੰਧ ਦੇਖੋ ।

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ 9

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ 9 ਵੀ ਸਮਰਥਿਤ ਹਨ, ਹਾਲਾਂਕਿ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਕੁਝ CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ HTML5 ਤੱਤ ਇਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਨੂੰ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਸਮਰਥਨ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ Respond.js ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ।

CSS3 ਅਤੇ HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਬਾਰੇ ਵੇਰਵਿਆਂ ਲਈ ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ... 'ਤੇ ਜਾਓ ।

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ Respond.js

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 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

Respond.js CSS ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ ਜਿਸਦਾ ਹਵਾਲਾ @import. ਖਾਸ ਤੌਰ 'ਤੇ, ਕੁਝ ਡਰੂਪਲ ਸੰਰਚਨਾਵਾਂ ਨੂੰ ਵਰਤਣ ਲਈ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ @import। ਵੇਰਵਿਆਂ ਲਈ Respond.js ਡੌਕਸ ਦੇਖੋ।

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ ਬਾਕਸ-ਸਾਈਜ਼ਿੰਗ

IE8 , , , ਜਾਂ box-sizing: border-box;ਨਾਲ ਜੋੜਨ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਹਿਯੋਗ ਨਹੀਂ ਦਿੰਦਾ । ਇਸ ਕਾਰਨ ਕਰਕੇ, v3.0.1 ਦੇ ਰੂਪ ਵਿੱਚ, ਅਸੀਂ ਹੁਣ s 'ਤੇ ਨਹੀਂ ਵਰਤਦੇ ਹਾਂ।min-widthmax-widthmin-heightmax-heightmax-width.container

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ @ਫੋਂਟ-ਫੇਸ

IE8 ਦੇ ਨਾਲ @font-faceਮਿਲਾ ਕੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਹਨ :before। ਬੂਟਸਟਰੈਪ ਆਪਣੇ ਗਲਾਈਫਿਕਨਾਂ ਨਾਲ ਉਸ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਪੰਨਾ ਕੈਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਵਿੰਡੋ ਉੱਤੇ ਮਾਊਸ ਤੋਂ ਬਿਨਾਂ ਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਭਾਵ ਰਿਫਰੈਸ਼ ਬਟਨ ਨੂੰ ਦਬਾਓ ਜਾਂ ਕਿਸੇ ਆਈਫ੍ਰੇਮ ਵਿੱਚ ਕੁਝ ਲੋਡ ਕਰੋ) ਤਾਂ ਪੰਨਾ ਫੌਂਟ ਲੋਡ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਰੈਂਡਰ ਹੋ ਜਾਂਦਾ ਹੈ। ਪੰਨੇ (ਬਾਡੀ) ਉੱਤੇ ਹੋਵਰ ਕਰਨ ਨਾਲ ਕੁਝ ਆਈਕਨ ਦਿਖਾਈ ਦੇਣਗੇ ਅਤੇ ਬਾਕੀ ਦੇ ਆਈਕਨਾਂ ਉੱਤੇ ਹੋਵਰ ਕਰਨ ਨਾਲ ਉਹ ਵੀ ਦਿਖਾਈ ਦੇਣਗੇ। ਵੇਰਵਿਆਂ ਲਈ ਅੰਕ #13863 ਦੇਖੋ।

IE ਅਨੁਕੂਲਤਾ ਮੋਡ

ਪੁਰਾਣੇ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਅਨੁਕੂਲਤਾ ਮੋਡਾਂ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਸੀਂ IE ਲਈ ਨਵੀਨਤਮ ਰੈਂਡਰਿੰਗ ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, <meta>ਆਪਣੇ ਪੰਨਿਆਂ ਵਿੱਚ ਉਚਿਤ ਟੈਗ ਸ਼ਾਮਲ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ:

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

ਡੀਬਗਿੰਗ ਟੂਲ ਖੋਲ੍ਹ ਕੇ ਦਸਤਾਵੇਜ਼ ਮੋਡ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ: F12"ਦਸਤਾਵੇਜ਼ ਮੋਡ" ਨੂੰ ਦਬਾਓ ਅਤੇ ਚੈੱਕ ਕਰੋ।

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਹਰੇਕ ਸਮਰਥਿਤ ਸੰਸਕਰਣ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਰੈਂਡਰਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇਹ ਟੈਗ ਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ ਦਸਤਾਵੇਜ਼ਾਂ ਅਤੇ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਸਟੈਕਓਵਰਫਲੋ ਸਵਾਲ ਦੇਖੋ ।

ਵਿੰਡੋਜ਼ 8 ਅਤੇ ਵਿੰਡੋਜ਼ ਫੋਨ 8 ਵਿੱਚ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10 ਡਿਵਾਈਸ ਦੀ ਚੌੜਾਈ ਨੂੰ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਤੋਂ ਵੱਖ ਨਹੀਂ ਕਰਦਾ ਹੈ , ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਵਿੱਚ ਮੀਡੀਆ ਸਵਾਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਸਨੂੰ ਠੀਕ ਕਰਨ ਲਈ CSS ਦਾ ਇੱਕ ਤੇਜ਼ ਸਨਿੱਪਟ ਸ਼ਾਮਲ ਕਰੋਗੇ:

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

ਹਾਲਾਂਕਿ, ਇਹ ਅੱਪਡੇਟ 3 (ਉਰਫ਼ GDR3) ਤੋਂ ਪੁਰਾਣੇ ਵਿੰਡੋਜ਼ ਫ਼ੋਨ 8 ਸੰਸਕਰਣਾਂ ਨੂੰ ਚਲਾਉਣ ਵਾਲੀਆਂ ਡਿਵਾਈਸਾਂ ਲਈ ਕੰਮ ਨਹੀਂ ਕਰਦਾ ਹੈ , ਕਿਉਂਕਿ ਇਹ ਅਜਿਹੇ ਡਿਵਾਈਸਾਂ ਨੂੰ ਤੰਗ "ਫੋਨ" ਦ੍ਰਿਸ਼ ਦੀ ਬਜਾਏ ਜਿਆਦਾਤਰ ਡੈਸਕਟੌਪ ਦ੍ਰਿਸ਼ ਦਿਖਾਉਣ ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਬੱਗ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਕੰਮ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ CSS ਅਤੇ JavaScript ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ।

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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 ਤੋਂ ਪਹਿਲਾਂ Safari ਦੇ ਸੰਸਕਰਣਾਂ ਦੇ ਰੈਂਡਰਿੰਗ ਇੰਜਣ ਅਤੇ iOS v8.0 ਲਈ Safari ਨੂੰ ਸਾਡੀਆਂ .col-*-1ਗਰਿੱਡ ਕਲਾਸਾਂ ਵਿੱਚ ਵਰਤੇ ਗਏ ਦਸ਼ਮਲਵ ਸਥਾਨਾਂ ਦੀ ਸੰਖਿਆ ਨਾਲ ਕੁਝ ਸਮੱਸਿਆ ਸੀ। ਇਸ ਲਈ ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ 12 ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਕਾਲਮ ਸਨ, ਤਾਂ ਤੁਸੀਂ ਵੇਖੋਗੇ ਕਿ ਉਹ ਕਾਲਮਾਂ ਦੀਆਂ ਹੋਰ ਕਤਾਰਾਂ ਦੇ ਮੁਕਾਬਲੇ ਛੋਟੇ ਸਨ। Safari/iOS ਨੂੰ ਅੱਪਗ੍ਰੇਡ ਕਰਨ ਤੋਂ ਇਲਾਵਾ, ਤੁਹਾਡੇ ਕੋਲ ਹੱਲ ਲਈ ਕੁਝ ਵਿਕਲਪ ਹਨ:

• .pull-rightਸਖ਼ਤ-ਸੱਜੇ ਅਲਾਈਨਮੈਂਟ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਆਪਣੇ ਆਖਰੀ ਗਰਿੱਡ ਕਾਲਮ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
• Safari (ਪਹਿਲੇ ਵਿਕਲਪ ਨਾਲੋਂ ਵਧੇਰੇ ਮੁਸ਼ਕਲ) ਲਈ ਸੰਪੂਰਨ ਰਾਊਂਡਿੰਗ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਆਪਣੇ ਪ੍ਰਤੀਸ਼ਤਾਂ ਨੂੰ ਹੱਥੀਂ ਬਦਲੋ।

ਮਾਡਲ, ਨੇਵਬਾਰ, ਅਤੇ ਵਰਚੁਅਲ ਕੀਬੋਰਡ

ਓਵਰਫਲੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ

overflow: hiddenਆਈਓਐਸ ਅਤੇ ਐਂਡਰੌਇਡ ਵਿੱਚ ਐਲੀਮੈਂਟ ਲਈ ਸਮਰਥਨ <body>ਕਾਫ਼ੀ ਸੀਮਤ ਹੈ। ਇਸ ਲਈ, ਜਦੋਂ ਤੁਸੀਂ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਡਿਵਾਈਸ ਦੇ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਇੱਕ ਮਾਡਲ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਤਾਂ <body>ਸਮੱਗਰੀ ਸਕ੍ਰੋਲ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦੇਵੇਗੀ। ਕਰੋਮ ਬੱਗ #175502 ( Chrome v40 ਵਿੱਚ ਹੱਲ) ਅਤੇ WebKit ਬੱਗ #153852 ਦੇਖੋ ।

iOS ਟੈਕਸਟ ਖੇਤਰ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ

ਆਈਓਐਸ 9.3 ਦੇ ਅਨੁਸਾਰ, ਜਦੋਂ ਇੱਕ ਮਾਡਲ ਖੁੱਲ੍ਹਾ ਹੁੰਦਾ ਹੈ, ਜੇਕਰ ਇੱਕ ਸਕ੍ਰੌਲ ਸੰਕੇਤ ਦਾ ਸ਼ੁਰੂਆਤੀ ਛੋਹ ਇੱਕ ਟੈਕਸਟ <input>ਜਾਂ ਇੱਕ ਦੀ ਸੀਮਾ ਦੇ ਅੰਦਰ ਹੈ <textarea>, <body>ਤਾਂ ਮਾਡਲ ਦੇ ਹੇਠਾਂ ਸਮੱਗਰੀ ਨੂੰ ਮਾਡਲ ਦੀ ਬਜਾਏ ਸਕ੍ਰੋਲ ਕੀਤਾ ਜਾਵੇਗਾ। ਵੈਬਕਿੱਟ ਬੱਗ #153856 ਵੇਖੋ ।

ਵਰਚੁਅਲ ਕੀਬੋਰਡ

ਨਾਲ ਹੀ, ਨੋਟ ਕਰੋ ਕਿ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਸਥਿਰ ਨਵਬਾਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਇੱਕ ਮਾਡਲ ਦੇ ਅੰਦਰ ਇਨਪੁਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ iOS ਵਿੱਚ ਇੱਕ ਰੈਂਡਰਿੰਗ ਬੱਗ ਹੈ ਜੋ ਵਰਚੁਅਲ ਕੀਬੋਰਡ ਦੇ ਚਾਲੂ ਹੋਣ 'ਤੇ ਸਥਿਰ ਤੱਤਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਸਦੇ ਲਈ ਕੁਝ ਹੱਲਾਂ ਵਿੱਚ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਬਦਲਣਾ position: absoluteਜਾਂ ਸਥਿਤੀ ਨੂੰ ਹੱਥੀਂ ਠੀਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਫੋਕਸ 'ਤੇ ਟਾਈਮਰ ਲਗਾਉਣਾ ਸ਼ਾਮਲ ਹੈ। ਇਹ ਬੂਟਸਟਰੈਪ ਦੁਆਰਾ ਸੰਭਾਲਿਆ ਨਹੀਂ ਜਾਂਦਾ ਹੈ, ਇਸਲਈ ਇਹ ਫੈਸਲਾ ਕਰਨਾ ਤੁਹਾਡੇ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਕਿਹੜਾ ਹੱਲ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ।

ਨਵਬਾਰ ਡ੍ਰੌਪਡਾਊਨ

.dropdown-backdropz-ਇੰਡੈਕਸਿੰਗ ਦੀ ਗੁੰਝਲਤਾ ਦੇ ਕਾਰਨ ਆਈਓਐਸ 'ਤੇ ਤੱਤ ਦੀ ਵਰਤੋਂ nav ਵਿੱਚ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ । ਇਸ ਤਰ੍ਹਾਂ, navbars ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਡ੍ਰੌਪਡਾਉਨ ਐਲੀਮੈਂਟ (ਜਾਂ ਕੋਈ ਹੋਰ ਐਲੀਮੈਂਟ ਜੋ iOS ਵਿੱਚ ਇੱਕ ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਫਾਇਰ ਕਰੇਗਾ ) ਨੂੰ ਸਿੱਧਾ ਕਲਿੱਕ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।

ਬ੍ਰਾਊਜ਼ਰ ਜ਼ੂਮ ਕਰਨਾ

ਪੰਨਾ ਜ਼ੂਮ ਕਰਨਾ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਬੂਟਸਟਰੈਪ ਅਤੇ ਬਾਕੀ ਵੈੱਬ ਦੋਵਾਂ ਵਿੱਚ, ਕੁਝ ਹਿੱਸਿਆਂ ਵਿੱਚ ਰੈਂਡਰਿੰਗ ਕਲਾਤਮਕ ਚੀਜ਼ਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਮੁੱਦੇ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਇਸਨੂੰ ਠੀਕ ਕਰਨ ਦੇ ਯੋਗ ਹੋ ਸਕਦੇ ਹਾਂ (ਪਹਿਲਾਂ ਖੋਜ ਕਰੋ ਅਤੇ ਫਿਰ ਲੋੜ ਪੈਣ 'ਤੇ ਸਮੱਸਿਆ ਨੂੰ ਖੋਲ੍ਹੋ)। ਹਾਲਾਂਕਿ, ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਦੇ ਹਾਂ ਕਿਉਂਕਿ ਉਹਨਾਂ ਕੋਲ ਅਕਸਰ ਹੈਕੀ ਹੱਲ ਤੋਂ ਇਲਾਵਾ ਕੋਈ ਸਿੱਧਾ ਹੱਲ ਨਹੀਂ ਹੁੰਦਾ।

ਸਟਿੱਕੀ :hover/ :focusਮੋਬਾਈਲ 'ਤੇ

ਹਾਲਾਂਕਿ ਜ਼ਿਆਦਾਤਰ ਟੱਚਸਕ੍ਰੀਨਾਂ 'ਤੇ ਅਸਲ ਹੋਵਰਿੰਗ ਸੰਭਵ ਨਹੀਂ ਹੈ, ਜ਼ਿਆਦਾਤਰ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰ ਹੋਵਰਿੰਗ ਸਮਰਥਨ ਦੀ ਨਕਲ ਕਰਦੇ ਹਨ ਅਤੇ :hover"ਸਟਿੱਕੀ" ਬਣਾਉਂਦੇ ਹਨ। ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ, :hoverਸਟਾਈਲ ਇੱਕ ਤੱਤ ਨੂੰ ਟੈਪ ਕਰਨ ਤੋਂ ਬਾਅਦ ਲਾਗੂ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹਨ ਅਤੇ ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨੂੰ ਟੈਪ ਕਰਨ ਤੋਂ ਬਾਅਦ ਹੀ ਲਾਗੂ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਨ। ਇਹ :hoverਅਜਿਹੇ ਬ੍ਰਾਊਜ਼ਰਾਂ 'ਤੇ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਅਣਚਾਹੇ ਤੌਰ 'ਤੇ "ਸਟੱਕ" ਕਰਨ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ। ਕੁਝ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰ ਵੀ :focusਇਸੇ ਤਰ੍ਹਾਂ ਸਟਿੱਕੀ ਬਣਾਉਂਦੇ ਹਨ। ਅਜਿਹੀਆਂ ਸਟਾਈਲਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾਉਣ ਤੋਂ ਇਲਾਵਾ ਇਹਨਾਂ ਮੁੱਦਿਆਂ ਲਈ ਵਰਤਮਾਨ ਵਿੱਚ ਕੋਈ ਸਧਾਰਨ ਹੱਲ ਨਹੀਂ ਹੈ।

ਛਪਾਈ

ਇੱਥੋਂ ਤੱਕ ਕਿ ਕੁਝ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ, ਪ੍ਰਿੰਟਿੰਗ ਵਿਅੰਗਾਤਮਕ ਹੋ ਸਕਦੀ ਹੈ।

ਖਾਸ ਤੌਰ 'ਤੇ, Chrome v32 ਦੇ ਰੂਪ ਵਿੱਚ ਅਤੇ ਹਾਸ਼ੀਏ ਦੀਆਂ ਸੈਟਿੰਗਾਂ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ, Chrome ਇੱਕ ਵੈੱਬਪੇਜ ਨੂੰ ਪ੍ਰਿੰਟ ਕਰਦੇ ਸਮੇਂ ਮੀਡੀਆ ਸਵਾਲਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਵੇਲੇ ਭੌਤਿਕ ਕਾਗਜ਼ ਦੇ ਆਕਾਰ ਤੋਂ ਕਾਫ਼ੀ ਘੱਟ ਇੱਕ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਬੂਟਸਟਰੈਪ ਦੇ ਵਾਧੂ-ਛੋਟੇ ਗਰਿੱਡ ਨੂੰ ਛਾਪਣ ਵੇਲੇ ਅਚਾਨਕ ਸਰਗਰਮ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਕੁਝ ਵੇਰਵਿਆਂ ਲਈ ਮੁੱਦਾ #12078 ਅਤੇ ਕਰੋਮ ਬੱਗ #273306 ਦੇਖੋ। ਸੁਝਾਏ ਗਏ ਹੱਲ:

• ਵਾਧੂ-ਛੋਟੇ ਗਰਿੱਡ ਨੂੰ ਗਲੇ ਲਗਾਓ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ ਪੰਨਾ ਇਸਦੇ ਅਧੀਨ ਸਵੀਕਾਰਯੋਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
• ਘੱਟ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ @screen-*ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰਿੰਟਰ ਪੇਪਰ ਨੂੰ ਵਾਧੂ-ਛੋਟੇ ਨਾਲੋਂ ਵੱਡਾ ਮੰਨਿਆ ਜਾਵੇ।
• ਸਿਰਫ਼ ਪ੍ਰਿੰਟ ਮੀਡੀਆ ਲਈ ਗਰਿੱਡ ਆਕਾਰ ਬ੍ਰੇਕਪੁਆਇੰਟ ਨੂੰ ਬਦਲਣ ਲਈ ਕਸਟਮ ਮੀਡੀਆ ਸਵਾਲ ਸ਼ਾਮਲ ਕਰੋ।

ਨਾਲ ਹੀ, Safari v8.0 ਦੇ ਰੂਪ ਵਿੱਚ, ਫਿਕਸਡ-ਚੌੜਾਈ .containers ਸਫਾਰੀ ਨੂੰ ਛਾਪਣ ਵੇਲੇ ਇੱਕ ਅਸਧਾਰਨ ਤੌਰ 'ਤੇ ਛੋਟੇ ਫੌਂਟ ਆਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੀ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ #14868 ਅਤੇ ਵੈਬਕਿੱਟ ਬੱਗ #138192 ਦੇਖੋ। ਇਸਦੇ ਲਈ ਇੱਕ ਸੰਭਾਵੀ ਹੱਲ ਹੇਠਾਂ ਦਿੱਤੇ CSS ਨੂੰ ਜੋੜ ਰਿਹਾ ਹੈ:

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

ਐਂਡਰਾਇਡ ਸਟਾਕ ਬ੍ਰਾਊਜ਼ਰ

ਬਾਕਸ ਤੋਂ ਬਾਹਰ, ਐਂਡਰੌਇਡ 4.1 (ਅਤੇ ਜ਼ਾਹਰ ਤੌਰ 'ਤੇ ਕੁਝ ਨਵੇਂ ਰੀਲੀਜ਼ ਵੀ) ਬ੍ਰਾਊਜ਼ਰ ਐਪ ਦੇ ਨਾਲ ਪਸੰਦ ਦੇ ਡਿਫੌਲਟ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਤੌਰ 'ਤੇ ਭੇਜਦੇ ਹਨ (Chrome ਦੇ ਉਲਟ)। ਬਦਕਿਸਮਤੀ ਨਾਲ, ਬ੍ਰਾਊਜ਼ਰ ਐਪ ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ CSS ਨਾਲ ਬਹੁਤ ਸਾਰੇ ਬੱਗ ਅਤੇ ਅਸੰਗਤਤਾਵਾਂ ਹਨ।

ਮੀਨੂ ਚੁਣੋ

ਐਲੀਮੈਂਟਸ ' <select>ਤੇ, ਐਂਡਰੌਇਡ ਸਟਾਕ ਬ੍ਰਾਊਜ਼ਰ ਸਾਈਡ ਕੰਟਰੋਲ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕਰੇਗਾ ਜੇਕਰ ਕੋਈ border-radiusਅਤੇ/ਜਾਂ borderਲਾਗੂ ਹੁੰਦਾ ਹੈ। ( ਵੇਰਵਿਆਂ ਲਈ ਇਹ ਸਟੈਕਓਵਰਫਲੋ ਸਵਾਲ ਦੇਖੋ।) ਅਪਮਾਨਜਨਕ CSS ਨੂੰ ਹਟਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਦੇ ਸਨਿੱਪਟ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ <select>ਐਂਡਰੌਇਡ ਸਟਾਕ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਅਣ-ਸਟਾਈਲ ਐਲੀਮੈਂਟ ਵਜੋਂ ਰੈਂਡਰ ਕਰੋ। ਉਪਭੋਗਤਾ ਏਜੰਟ ਸੁੰਘਣ ਨਾਲ 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>

ਇੱਕ ਉਦਾਹਰਣ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਸ ਜੇਐਸ ਬਿਨ ਡੈਮੋ ਨੂੰ ਦੇਖੋ।

ਪ੍ਰਮਾਣਿਕਤਾ

ਪੁਰਾਣੇ ਅਤੇ ਬੱਗੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਸੰਭਵ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ, ਬੂਟਸਟਰੈਪ ਕਈ ਥਾਵਾਂ 'ਤੇ CSS ਬ੍ਰਾਊਜ਼ਰ ਹੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣਾਂ ਨੂੰ ਖਾਸ 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ਕਲਾਸ ਇਹ ਯਕੀਨੀ ਬਣਾਏਗੀ ਕਿ ਲਿੰਕ ਇੱਕ ਵਾਰ ਫੋਕਸ ਕੀਤੇ ਜਾਣ 'ਤੇ ਦਿਖਾਈ ਦੇਵੇਗਾ (ਦੇਖਣ ਵਾਲੇ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ)।

<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 ਦੇ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੇ ਅਨੁਪਾਤ ਤੋਂ ਹੇਠਾਂ ) ਹੈ। ਇਹ ਘੱਟ ਨਜ਼ਰ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਜਾਂ ਜੋ ਰੰਗ ਅੰਨ੍ਹੇ ਹਨ ਉਹਨਾਂ ਲਈ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਡਿਫੌਲਟ ਰੰਗਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਵਿਪਰੀਤਤਾ ਅਤੇ ਸਪਸ਼ਟਤਾ ਨੂੰ ਵਧਾਉਣ ਲਈ ਸੋਧਣ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਵਾਧੂ ਸਰੋਤ

• ਪਹੁੰਚਯੋਗਤਾ ਸਮੱਸਿਆਵਾਂ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ "HTML Codesniffer" ਬੁੱਕਮਾਰਕਲੇਟ
• Chrome ਦੀ ਪਹੁੰਚਯੋਗਤਾ ਵਿਕਾਸਕਾਰ ਟੂਲ ਐਕਸਟੈਂਸ਼ਨ
• ਰੰਗ ਕੰਟ੍ਰਾਸਟ ਐਨਾਲਾਈਜ਼ਰ
• A11Y ਪ੍ਰੋਜੈਕਟ
• MDN ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼

ਲਾਇਸੰਸ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

ਬੂਟਸਟਰੈਪ ਐਮਆਈਟੀ ਲਾਇਸੰਸ ਦੇ ਤਹਿਤ ਜਾਰੀ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਕਾਪੀਰਾਈਟ 2016 ਟਵਿੱਟਰ ਹੈ। ਛੋਟੇ ਟੁਕੜਿਆਂ ਤੱਕ ਉਬਾਲੇ ਹੋਏ, ਇਸ ਨੂੰ ਹੇਠ ਲਿਖੀਆਂ ਸ਼ਰਤਾਂ ਨਾਲ ਦਰਸਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਇਹ ਤੁਹਾਨੂੰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:

• ਲਾਇਸੰਸ ਅਤੇ ਕਾਪੀਰਾਈਟ ਨੋਟਿਸ ਨੂੰ ਬੂਟਸਟਰੈਪ ਦੀਆਂ CSS ਅਤੇ JavaScript ਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਰੱਖੋ ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਕੰਮਾਂ ਵਿੱਚ ਵਰਤਦੇ ਹੋ

ਇਹ ਤੁਹਾਨੂੰ ਇਹ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ:

• ਨਿੱਜੀ, ਨਿੱਜੀ, ਕੰਪਨੀ ਦੇ ਅੰਦਰੂਨੀ, ਜਾਂ ਵਪਾਰਕ ਉਦੇਸ਼ਾਂ ਲਈ, ਪੂਰੇ ਜਾਂ ਅੰਸ਼ਕ ਰੂਪ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਨੂੰ ਮੁਫਤ ਵਿੱਚ ਡਾਊਨਲੋਡ ਅਤੇ ਵਰਤੋਂ
• ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਪੈਕੇਜਾਂ ਜਾਂ ਡਿਸਟਰੀਬਿਊਸ਼ਨਾਂ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰੋ
• ਸਰੋਤ ਕੋਡ ਨੂੰ ਸੋਧੋ
• ਬੂਟਸਟਰੈਪ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਤੀਜੀਆਂ ਧਿਰਾਂ ਨੂੰ ਵੰਡਣ ਲਈ ਉਪ-ਲਾਇਸੈਂਸ ਦਿਓ ਜੋ ਲਾਇਸੰਸ ਵਿੱਚ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ

ਇਹ ਤੁਹਾਨੂੰ ਮਨ੍ਹਾ ਕਰਦਾ ਹੈ:

• ਲੇਖਕਾਂ ਅਤੇ ਲਾਇਸੈਂਸ ਮਾਲਕਾਂ ਨੂੰ ਨੁਕਸਾਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਠਹਿਰਾਓ ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਬਿਨਾਂ ਵਾਰੰਟੀ ਦੇ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
• ਬੂਟਸਟਰੈਪ ਦੇ ਸਿਰਜਣਹਾਰਾਂ ਜਾਂ ਕਾਪੀਰਾਈਟ ਧਾਰਕਾਂ ਨੂੰ ਜ਼ਿੰਮੇਵਾਰ ਠਹਿਰਾਓ
• ਬੂਟਸਟਰੈਪ ਦੇ ਕਿਸੇ ਵੀ ਟੁਕੜੇ ਨੂੰ ਸਹੀ ਵਿਸ਼ੇਸ਼ਤਾ ਤੋਂ ਬਿਨਾਂ ਮੁੜ ਵੰਡੋ
• ਟਵਿੱਟਰ ਦੀ ਮਲਕੀਅਤ ਵਾਲੇ ਕਿਸੇ ਵੀ ਚਿੰਨ੍ਹ ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਕਰੋ ਜੋ ਇਹ ਦੱਸ ਸਕਦਾ ਹੈ ਜਾਂ ਇਹ ਸੰਕੇਤ ਕਰ ਸਕਦਾ ਹੈ ਕਿ ਟਵਿੱਟਰ ਤੁਹਾਡੀ ਵੰਡ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ
• ਟਵਿੱਟਰ ਦੀ ਮਲਕੀਅਤ ਵਾਲੇ ਕਿਸੇ ਵੀ ਨਿਸ਼ਾਨ ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਕਰੋ ਜੋ ਦੱਸ ਸਕਦਾ ਹੈ ਜਾਂ ਇਹ ਸੰਕੇਤ ਕਰ ਸਕਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਸਵਾਲ ਵਿੱਚ ਟਵਿੱਟਰ ਸੌਫਟਵੇਅਰ ਬਣਾਇਆ ਹੈ

ਤੁਹਾਨੂੰ ਇਹ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ:

• ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਤੁਹਾਡੇ ਦੁਆਰਾ ਇਸ ਵਿੱਚ ਕੀਤੇ ਗਏ ਕਿਸੇ ਵੀ ਸੰਸ਼ੋਧਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ, ਕਿਸੇ ਵੀ ਮੁੜ-ਵੰਡ ਵਿੱਚ ਜੋ ਤੁਸੀਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
• ਜੋ ਤਬਦੀਲੀਆਂ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਰਦੇ ਹੋ ਉਹ ਵਾਪਸ ਬੂਟਸਟਰੈਪ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਜਮ੍ਹਾਂ ਕਰੋ (ਹਾਲਾਂਕਿ ਅਜਿਹੇ ਫੀਡਬੈਕ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)

ਪੂਰਾ ਬੂਟਸਟਰੈਪ ਲਾਇਸੰਸ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਪ੍ਰੋਜੈਕਟ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ ਸਥਿਤ ਹੈ ।

ਅਨੁਵਾਦ

ਕਮਿਊਨਿਟੀ ਮੈਂਬਰਾਂ ਨੇ ਬੂਟਸਟਰੈਪ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਦਾ ਵੱਖ-ਵੱਖ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਅਨੁਵਾਦ ਕੀਤਾ ਹੈ। ਕੋਈ ਵੀ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਉਹ ਹਮੇਸ਼ਾ ਅੱਪ ਟੂ ਡੇਟ ਨਾ ਹੋਣ।

• ਬੂਟਸਟਰੈਪ 中文文档 (ਚੀਨੀ)
• ਬੂਟਸਟਰੈਪ 3 中文手冊 (ਚੀਨੀ (ਰਵਾਇਤੀ))
• ਬੂਟਸਟਰੈਪ på ਡੈਨਸਕ (ਡੈਨਿਸ਼)
• Bootstrap en Français (ਫਰਾਂਸੀਸੀ)
• Bootstrap auf Deutsch (ਜਰਮਨ)
• ਇਟਾਲੀਅਨ (ਇਤਾਲਵੀ) ਵਿੱਚ ਬੂਟਸਟਰੈਪ
• ਬੂਟਸਟਰੈਪ 한국어 (ਕੋਰੀਆਈ)
• ਬੂਟਸਟਰੈਪ em Português do Brasil (ਬ੍ਰਾਜ਼ੀਲੀਅਨ ਪੁਰਤਗਾਲੀ)
• ਬੂਟਸਟਰੈਪ по-русски (ਰੂਸੀ)
• ਬੂਟਸਟਰੈਪ en Español (ਸਪੇਨੀ)
• ਤੁਰਕੀ ਬੂਟਸਟਰੈਪ (ਤੁਰਕੀ)
• ਬੂਟਸਟਰੈਪ українською (ਯੂਕਰੇਨੀ)
• ਬੂਟਸਟਰੈਪ ਵੀਅਤਨਾਮੀ (ਵੀਅਤਨਾਮੀ)

ਅਸੀਂ ਅਨੁਵਾਦਾਂ ਨੂੰ ਸੰਗਠਿਤ ਜਾਂ ਮੇਜ਼ਬਾਨੀ ਕਰਨ ਵਿੱਚ ਮਦਦ ਨਹੀਂ ਕਰਦੇ, ਅਸੀਂ ਸਿਰਫ਼ ਉਹਨਾਂ ਨਾਲ ਲਿੰਕ ਕਰਦੇ ਹਾਂ।

ਨਵਾਂ ਜਾਂ ਬਿਹਤਰ ਅਨੁਵਾਦ ਪੂਰਾ ਕੀਤਾ? ਇਸ ਨੂੰ ਸਾਡੀ ਸੂਚੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਇੱਕ ਪੁੱਲ ਬੇਨਤੀ ਖੋਲ੍ਹੋ।