ਜਾਣ-ਪਛਾਣ
jsDelivr ਅਤੇ ਇੱਕ ਟੈਂਪਲੇਟ ਸਟਾਰਟਰ ਪੰਨੇ ਦੇ ਨਾਲ, ਜਵਾਬਦੇਹ, ਮੋਬਾਈਲ-ਪਹਿਲੀ ਸਾਈਟਾਂ ਬਣਾਉਣ ਲਈ ਦੁਨੀਆ ਦਾ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਫਰੇਮਵਰਕ, Bootstrap ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ।
ਤੇਜ਼ ਸ਼ੁਰੂਆਤ
ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ? jsDelivr ਦੀ ਵਰਤੋਂ ਕਰੋ, ਇੱਕ ਮੁਫਤ ਓਪਨ ਸੋਰਸ CDN। ਇੱਕ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਡਾਉਨਲੋਡਸ ਪੰਨੇ 'ਤੇ ਜਾਓ ।
CSS
ਸਾਡੀ CSS ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਹੋਰ ਸਾਰੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਤੋਂ ਪਹਿਲਾਂ ਸਟਾਈਲਸ਼ੀਟ <link>
ਨੂੰ ਕਾਪੀ-ਪੇਸਟ ਕਰੋ ।<head>
ਜੇ.ਐਸ
ਸਾਡੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸਿਆਂ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਖਾਸ ਤੌਰ 'ਤੇ, ਉਹਨਾਂ ਨੂੰ jQuery , Popper.js , ਅਤੇ ਸਾਡੇ ਆਪਣੇ JavaScript ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਅਸੀਂ jQuery ਦੇ ਪਤਲੇ ਬਿਲਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਪਰ ਪੂਰਾ ਸੰਸਕਰਣ ਵੀ ਸਮਰਥਿਤ ਹੈ।
ਇਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨੂੰ<script>
ਆਪਣੇ ਪੰਨਿਆਂ ਦੇ ਅੰਤ ਦੇ ਨੇੜੇ, ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਤੋਂ ਠੀਕ ਪਹਿਲਾਂ ,</body>
ਉਹਨਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਰੱਖੋ । jQuery ਪਹਿਲਾਂ ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ, ਫਿਰ Popper.js, ਅਤੇ ਫਿਰ ਸਾਡੇ JavaScript ਪਲੱਗਇਨ।
ਬੰਡਲ
ਸਾਡੇ ਬੰਡਲ ਦੇ ਨਾਲ ਇੱਕ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੀ ਹਰ ਚੀਜ਼ ਸ਼ਾਮਲ ਕਰੋ। ਸਾਡਾ bootstrap.bundle.js
ਅਤੇ ਪੋਪਰbootstrap.bundle.min.js
ਸ਼ਾਮਲ ਹੈ, ਪਰ jQuery ਨਹੀਂ । ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕੀ ਸ਼ਾਮਲ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ ਸਾਡਾ ਸਮੱਗਰੀ ਭਾਗ ਵੇਖੋ।
ਵੱਖਰਾ
ਜੇਕਰ ਤੁਸੀਂ ਵੱਖਰੇ ਸਕ੍ਰਿਪਟਾਂ ਦੇ ਹੱਲ ਨਾਲ ਜਾਣ ਦਾ ਫੈਸਲਾ ਕਰਦੇ ਹੋ, ਤਾਂ Popper.js ਪਹਿਲਾਂ ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਸਾਡੇ JavaScript ਪਲੱਗਇਨ।
ਕੰਪੋਨੈਂਟਸ
ਉਤਸੁਕ ਹੈ ਕਿ ਕਿਹੜੇ ਭਾਗਾਂ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ jQuery, ਸਾਡੇ JS, ਅਤੇ Popper.js ਦੀ ਲੋੜ ਹੈ? ਹੇਠਾਂ ਸ਼ੋਅ ਕੰਪੋਨੈਂਟ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਪੰਨੇ ਦੀ ਬਣਤਰ ਬਾਰੇ ਯਕੀਨੀ ਨਹੀਂ ਹੋ, ਤਾਂ ਇੱਕ ਉਦਾਹਰਨ ਪੰਨਾ ਟੈਮਪਲੇਟ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ।
JavaScript ਦੀ ਲੋੜ ਵਾਲੇ ਭਾਗ ਦਿਖਾਓ
- ਖਾਰਜ ਕਰਨ ਲਈ ਚੇਤਾਵਨੀਆਂ
- ਟੌਗਲ ਕਰਨ ਵਾਲੀਆਂ ਸਥਿਤੀਆਂ ਅਤੇ ਚੈਕਬਾਕਸ/ਰੇਡੀਓ ਕਾਰਜਕੁਸ਼ਲਤਾ ਲਈ ਬਟਨ
- ਸਾਰੇ ਸਲਾਈਡ ਵਿਹਾਰਾਂ, ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਕੈਰੋਜ਼ਲ
- ਸਮੱਗਰੀ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਸਮੇਟੋ
- ਡਿਸਪਲੇਅ ਅਤੇ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ( Popper.js ਦੀ ਵੀ ਲੋੜ ਹੈ )
- ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ, ਸਥਿਤੀ, ਅਤੇ ਸਕ੍ਰੌਲ ਵਿਵਹਾਰ ਲਈ ਮਾਡਲ
- ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸਾਡੇ ਸੰਕੁਚਿਤ ਪਲੱਗਇਨ ਨੂੰ ਵਧਾਉਣ ਲਈ ਨਵਬਾਰ
- ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਅਤੇ ਖਾਰਜ ਕਰਨ ਲਈ ਟੋਸਟ
- ਡਿਸਪਲੇਅ ਅਤੇ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ (ਇਸ ਲਈ Popper.js ਦੀ ਵੀ ਲੋੜ ਹੈ )
- ਸਕ੍ਰੌਲ ਵਿਹਾਰ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਅੱਪਡੇਟ ਲਈ Scrollspy
ਸਟਾਰਟਰ ਟੈਮਪਲੇਟ
ਆਪਣੇ ਪੰਨਿਆਂ ਨੂੰ ਨਵੀਨਤਮ ਡਿਜ਼ਾਈਨ ਅਤੇ ਵਿਕਾਸ ਮਾਪਦੰਡਾਂ ਨਾਲ ਸਥਾਪਤ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ HTML5 ਡਾਕਟਾਈਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਅਤੇ ਸਹੀ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰਾਂ ਲਈ ਇੱਕ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕਰਨਾ। ਇਹ ਸਭ ਇਕੱਠੇ ਰੱਖੋ ਅਤੇ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:
ਸਮੁੱਚੀ ਪੰਨੇ ਦੀਆਂ ਲੋੜਾਂ ਲਈ ਤੁਹਾਨੂੰ ਬੱਸ ਇਹੀ ਲੋੜ ਹੈ। ਆਪਣੀ ਸਾਈਟ ਦੀ ਸਮੱਗਰੀ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਲੇਆਉਟ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਲੇਆਉਟ ਦਸਤਾਵੇਜ਼ਾਂ ਜਾਂ ਸਾਡੇ ਅਧਿਕਾਰਤ ਉਦਾਹਰਨਾਂ 'ਤੇ ਜਾਓ ।
ਮਹੱਤਵਪੂਰਨ ਗਲੋਬਲ
ਬੂਟਸਟਰੈਪ ਮੁੱਠੀ ਭਰ ਮਹੱਤਵਪੂਰਨ ਗਲੋਬਲ ਸਟਾਈਲਾਂ ਅਤੇ ਸੈਟਿੰਗਾਂ ਨੂੰ ਨਿਯੁਕਤ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤੁਹਾਨੂੰ ਇਸਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਸੁਚੇਤ ਹੋਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ, ਇਹ ਸਾਰੀਆਂ ਲਗਭਗ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਕ੍ਰਾਸ ਬ੍ਰਾਊਜ਼ਰ ਸਟਾਈਲ ਦੇ ਸਧਾਰਣਕਰਨ ਲਈ ਤਿਆਰ ਹਨ। ਆਓ ਅੰਦਰ ਡੁਬਕੀ ਕਰੀਏ।
HTML5 doctype
ਬੂਟਸਟਰੈਪ ਨੂੰ HTML5 doctype ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਤੋਂ ਬਿਨਾਂ, ਤੁਸੀਂ ਕੁਝ ਮਜ਼ੇਦਾਰ ਅਧੂਰੀ ਸਟਾਈਲਿੰਗ ਦੇਖੋਗੇ, ਪਰ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਨਾਲ ਕੋਈ ਬਹੁਤੀ ਹਿਚਕੀ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ।
ਜਵਾਬਦੇਹ ਮੈਟਾ ਟੈਗ
ਬੂਟਸਟਰੈਪ ਨੂੰ ਮੋਬਾਈਲ ਪਹਿਲਾਂ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਹੈ , ਇੱਕ ਰਣਨੀਤੀ ਜਿਸ ਵਿੱਚ ਅਸੀਂ ਪਹਿਲਾਂ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਲਈ ਕੋਡ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਫਿਰ CSS ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੋੜ ਅਨੁਸਾਰ ਭਾਗਾਂ ਨੂੰ ਸਕੇਲ ਕਰਦੇ ਹਾਂ। ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਲਈ ਸਹੀ ਰੈਂਡਰਿੰਗ ਅਤੇ ਟਚ ਜ਼ੂਮਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ, ਆਪਣੇ ਵਿੱਚ ਜਵਾਬਦੇਹ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ <head>
।
ਤੁਸੀਂ ਸਟਾਰਟਰ ਟੈਂਪਲੇਟ ਵਿੱਚ ਇਸਦੀ ਇੱਕ ਉਦਾਹਰਨ ਦੇਖ ਸਕਦੇ ਹੋ ।
ਬਾਕਸ-ਆਕਾਰ
CSS ਵਿੱਚ ਵਧੇਰੇ ਸਿੱਧੇ ਆਕਾਰ ਲਈ, ਅਸੀਂ ਗਲੋਬਲ box-sizing
ਮੁੱਲ ਨੂੰ ਤੋਂ content-box
ਵਿੱਚ ਬਦਲਦੇ ਹਾਂ border-box
। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ padding
ਹੈ ਕਿ ਕਿਸੇ ਤੱਤ ਦੀ ਅੰਤਿਮ ਗਣਨਾ ਕੀਤੀ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਭਾਵਤ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਇਹ Google ਨਕਸ਼ੇ ਅਤੇ Google ਕਸਟਮ ਖੋਜ ਇੰਜਣ ਵਰਗੇ ਕੁਝ ਤੀਜੀ ਧਿਰ ਦੇ ਸੌਫਟਵੇਅਰ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ।
ਦੁਰਲੱਭ ਮੌਕੇ 'ਤੇ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਹੇਠ ਲਿਖੀਆਂ ਚੀਜ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਉਪਰੋਕਤ ਸਨਿੱਪਟ ਦੇ ਨਾਲ, ਨੇਸਟਡ ਐਲੀਮੈਂਟਸ — ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀ ਸਮਗਰੀ ਸਮੇਤ — ::before
ਅਤੇ —ਸਭ ਉਸ ਲਈ ::after
ਨਿਸ਼ਚਿਤ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਗੇ ।box-sizing
.selector-for-some-widget
CSS ਟ੍ਰਿਕਸ 'ਤੇ ਬਾਕਸ ਮਾਡਲ ਅਤੇ ਆਕਾਰ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।
ਮੁੜ - ਚਾਲੂ
ਸੁਧਾਰੀ ਹੋਈ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ, ਅਸੀਂ ਆਮ HTML ਤੱਤਾਂ ਨੂੰ ਥੋੜ੍ਹੇ ਜ਼ਿਆਦਾ ਵਿਚਾਰ ਵਾਲੇ ਰੀਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਅਸੰਗਤਤਾਵਾਂ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਰੀਬੂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
ਭਾਈਚਾਰਾ
ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਕਾਸ 'ਤੇ ਅੱਪ ਟੂ ਡੇਟ ਰਹੋ ਅਤੇ ਇਹਨਾਂ ਮਦਦਗਾਰ ਸਰੋਤਾਂ ਨਾਲ ਭਾਈਚਾਰੇ ਤੱਕ ਪਹੁੰਚੋ।
- ਟਵਿੱਟਰ 'ਤੇ @getbootstrap ਦੀ ਪਾਲਣਾ ਕਰੋ ।
- ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਬਲੌਗ ਨੂੰ ਪੜ੍ਹੋ ਅਤੇ ਗਾਹਕ ਬਣੋ ।
- IRC ਵਿੱਚ ਸਾਥੀ ਬੂਟਸਟਰੈਪਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰੋ।
irc.freenode.net
ਸਰਵਰ ਉੱਤੇ, ਚੈਨਲ##bootstrap
ਵਿੱਚ। - ਸਟੈਕ ਓਵਰਫਲੋ (ਟੈਗ ਕੀਤੇ) 'ਤੇ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲ ਸਕਦੀ ਹੈ
bootstrap-4
। - ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਪੈਕੇਜਾਂ 'ਤੇ ਕੀਵਰਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਵੱਧ ਤੋਂ ਵੱਧ ਖੋਜਯੋਗਤਾ ਲਈ npm ਜਾਂ ਸਮਾਨ ਡਿਲੀਵਰੀ ਵਿਧੀ
bootstrap
ਰਾਹੀਂ ਵੰਡਣ ਵੇਲੇ ਬੂਟਸਟਰੈਪ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਜਾਂ ਜੋੜਦੇ ਹਨ ।
ਤੁਸੀਂ ਨਵੀਨਤਮ ਗੱਪਾਂ ਅਤੇ ਸ਼ਾਨਦਾਰ ਸੰਗੀਤ ਵੀਡੀਓਜ਼ ਲਈ ਟਵਿੱਟਰ 'ਤੇ @getbootstrap ਨੂੰ ਵੀ ਫਾਲੋ ਕਰ ਸਕਦੇ ਹੋ ।