ਪਹੁੰਚ

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

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

ਸੰਖੇਪ

ਅਸੀਂ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਵਿੱਚ ਹੋਰ ਡੁਬਕੀ ਲਗਾਵਾਂਗੇ, ਪਰ ਉੱਚ ਪੱਧਰ 'ਤੇ, ਇੱਥੇ ਉਹ ਹੈ ਜੋ ਸਾਡੀ ਪਹੁੰਚ ਦੀ ਅਗਵਾਈ ਕਰਦਾ ਹੈ।

• ਭਾਗ ਜਵਾਬਦੇਹ ਅਤੇ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ
• ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬੇਸ ਕਲਾਸ ਨਾਲ ਬਣਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਵਧਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ
• ਕੰਪੋਨੈਂਟ ਰਾਜਾਂ ਨੂੰ ਇੱਕ ਆਮ z-ਇੰਡੈਕਸ ਸਕੇਲ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, JavaScript ਉੱਤੇ ਇੱਕ HTML ਅਤੇ CSS ਲਾਗੂਕਰਨ ਨੂੰ ਤਰਜੀਹ ਦਿਓ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਕਸਟਮ ਸਟਾਈਲ ਉੱਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਸਖ਼ਤ HTML ਲੋੜਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਬਚੋ (ਬੱਚਿਆਂ ਦੇ ਚੋਣਕਾਰ)

ਜਵਾਬਦੇਹ

ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਜਵਾਬਦੇਹ ਸ਼ੈਲੀਆਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਪਹੁੰਚ ਜਿਸ ਨੂੰ ਅਕਸਰ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਕਿਹਾ ਜਾਂਦਾ ਹੈ । ਅਸੀਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇਸ ਸ਼ਬਦ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਅਤੇ ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਇਸ ਨਾਲ ਸਹਿਮਤ ਹੁੰਦੇ ਹਾਂ, ਪਰ ਕਈ ਵਾਰ ਇਹ ਬਹੁਤ ਵਿਆਪਕ ਹੋ ਸਕਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹਰੇਕ ਭਾਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਹ ਜਵਾਬਦੇਹ ਪਹੁੰਚ ਤੁਹਾਨੂੰ ਸਟਾਈਲ ਜੋੜਨ ਲਈ ਧੱਕ ਕੇ CSS ਓਵਰਰਾਈਡਾਂ ਨੂੰ ਘਟਾਉਣ ਬਾਰੇ ਹੈ ਕਿਉਂਕਿ ਵਿਊਪੋਰਟ ਵੱਡਾ ਹੁੰਦਾ ਜਾਂਦਾ ਹੈ।

ਪੂਰੇ ਬੂਟਸਟਰੈਪ ਵਿੱਚ, ਤੁਸੀਂ ਇਸਨੂੰ ਸਾਡੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਸਪਸ਼ਟ ਰੂਪ ਵਿੱਚ ਦੇਖੋਗੇ। ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਅਸੀਂ ਉਹਨਾਂ min-widthਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਇੱਕ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਲਾਗੂ ਹੋਣੀਆਂ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ ਉੱਚੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੱਕ ਪਹੁੰਚਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਤੋਂ ਅਨੰਤ .d-noneਤੱਕ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। min-width: 0ਦੂਜੇ ਪਾਸੇ, ਇੱਕ .d-md-noneਮੱਧਮ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਉੱਪਰ ਤੋਂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।

ਕਦੇ-ਕਦਾਈਂ ਅਸੀਂ ਉਦੋਂ ਵਰਤਾਂਗੇ max-widthਜਦੋਂ ਕਿਸੇ ਹਿੱਸੇ ਦੀ ਅੰਦਰੂਨੀ ਗੁੰਝਲਤਾ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਕਦੇ-ਕਦਾਈਂ, ਇਹ ਓਵਰਰਾਈਡ ਸਾਡੇ ਭਾਗਾਂ ਤੋਂ ਮੁੱਖ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਮੁੜ ਲਿਖਣ ਨਾਲੋਂ ਲਾਗੂ ਕਰਨ ਅਤੇ ਸਮਰਥਨ ਕਰਨ ਲਈ ਕਾਰਜਸ਼ੀਲ ਅਤੇ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਸਪੱਸ਼ਟ ਹੁੰਦੇ ਹਨ। ਅਸੀਂ ਇਸ ਪਹੁੰਚ ਨੂੰ ਸੀਮਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਪਰ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਇਸਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।

ਕਲਾਸਾਂ

ਸਾਡੇ ਰੀਬੂਟ ਤੋਂ ਇਲਾਵਾ, ਇੱਕ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਧਾਰਣਕਰਨ ਸਟਾਈਲਸ਼ੀਟ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਸ਼ੈਲੀਆਂ ਦਾ ਉਦੇਸ਼ ਕਲਾਸਾਂ ਨੂੰ ਚੋਣਕਾਰ ਵਜੋਂ ਵਰਤਣਾ ਹੈ। input[type="text"]ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕਿਸਮ ਦੇ ਚੋਣਕਾਰਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਅਤੇ ਬਾਹਰੀ ਮੂਲ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਤੋਂ ਸਟੀਅਰਿੰਗ ਸਾਫ਼ ਕਰਨਾ .parent .childਜੋ ਸਟਾਈਲ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਬਹੁਤ ਖਾਸ ਬਣਾਉਂਦੇ ਹਨ।

ਇਸ ਤਰ੍ਹਾਂ, ਕੰਪੋਨੈਂਟਸ ਇੱਕ ਬੇਸ ਕਲਾਸ ਦੇ ਨਾਲ ਬਣਾਏ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ ਜਿਸ ਵਿੱਚ ਆਮ, ਓਵਰਰਾਈਡ ਨਾ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਜਾਇਦਾਦ-ਮੁੱਲ ਦੇ ਜੋੜੇ ਹੋਣ। ਉਦਾਹਰਨ ਲਈ, .btnਅਤੇ .btn-primary. ਅਸੀਂ .btnਸਾਰੀਆਂ ਆਮ ਸ਼ੈਲੀਆਂ ਜਿਵੇਂ ਕਿ display, padding, ਅਤੇ ਲਈ ਵਰਤਦੇ ਹਾਂ border-width। ਫਿਰ ਅਸੀਂ ਮੋਡੀਫਾਇਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜਿਵੇਂ .btn-primaryਕਿ ਰੰਗ, ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ, ਬਾਰਡਰ-ਰੰਗ, ਆਦਿ ਸ਼ਾਮਲ ਕਰਨਾ।

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

z-ਇੰਡੈਕਸ ਸਕੇਲ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਦੋ z-indexਸਕੇਲ ਹੁੰਦੇ ਹਨ — ਇੱਕ ਕੰਪੋਨੈਂਟ ਅਤੇ ਓਵਰਲੇ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਤੱਤ।

ਕੰਪੋਨੈਂਟ ਤੱਤ

• ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕੁਝ ਭਾਗਾਂ ਨੂੰ borderਸੰਪੱਤੀ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਡਬਲ ਬਾਰਡਰ ਨੂੰ ਰੋਕਣ ਲਈ ਓਵਰਲੈਪਿੰਗ ਤੱਤਾਂ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਬਟਨ ਸਮੂਹ, ਇਨਪੁਟ ਸਮੂਹ, ਅਤੇ ਪੰਨਾਬੰਦੀ।
• ਇਹ ਹਿੱਸੇ ਦੁਆਰਾ ਦੇ ਇੱਕ ਮਿਆਰੀ z-indexਸਕੇਲ ਨੂੰ ਸਾਂਝਾ ਕਰਦੇ ਹਨ ।03
• 0ਡਿਫਾਲਟ ਹੈ (ਸ਼ੁਰੂਆਤੀ), 1is :hover, 2is :active/ .active, ਅਤੇ 3is :focus.
• ਇਹ ਪਹੁੰਚ ਸਭ ਤੋਂ ਵੱਧ ਉਪਭੋਗਤਾ ਤਰਜੀਹ ਦੀਆਂ ਸਾਡੀਆਂ ਉਮੀਦਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ। ਜੇਕਰ ਕੋਈ ਤੱਤ ਕੇਂਦਰਿਤ ਹੈ, ਤਾਂ ਇਹ ਦੇਖਣ ਵਿੱਚ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ ਦੇ ਧਿਆਨ ਵਿੱਚ ਹੈ। ਕਿਰਿਆਸ਼ੀਲ ਤੱਤ ਦੂਜੇ ਨੰਬਰ 'ਤੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਹੋਵਰ ਤੀਜੇ ਨੰਬਰ 'ਤੇ ਹੈ ਕਿਉਂਕਿ ਇਹ ਉਪਭੋਗਤਾ ਦੇ ਇਰਾਦੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਪਰ ਲਗਭਗ ਕੁਝ ਵੀ ਹੋਵਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਓਵਰਲੇ ਕੰਪੋਨੈਂਟ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਈ ਭਾਗ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿਸੇ ਕਿਸਮ ਦੇ ਓਵਰਲੇਅ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ, ਸਭ ਤੋਂ ਉੱਚੇ z-index, ਡ੍ਰੌਪਡਾਊਨ, ਸਥਿਰ ਅਤੇ ਸਟਿੱਕੀ ਨੇਵਬਾਰ, ਮਾਡਲ, ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਸ਼ਾਮਲ ਹਨ। ਇਹਨਾਂ ਹਿੱਸਿਆਂ ਦਾ ਆਪਣਾ z-indexਪੈਮਾਨਾ ਹੈ ਜੋ ਕਿ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ 1000। ਇਹ ਸ਼ੁਰੂਆਤੀ ਨੰਬਰ ਆਪਹੁਦਰੇ ਢੰਗ ਨਾਲ ਚੁਣਿਆ ਗਿਆ ਸੀ ਅਤੇ ਸਾਡੀ ਸ਼ੈਲੀਆਂ ਅਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਕਸਟਮ ਸਟਾਈਲਾਂ ਵਿਚਕਾਰ ਇੱਕ ਛੋਟੇ ਬਫਰ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ।

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

z-indexਸਾਡੇ ਲੇਆਉਟ ਪੰਨੇ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।

ਜੇਐਸ ਉੱਤੇ HTML ਅਤੇ CSS

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਅਸੀਂ JavaScript ਉੱਤੇ HTML ਅਤੇ CSS ਲਿਖਣਾ ਪਸੰਦ ਕਰਦੇ ਹਾਂ। ਆਮ ਤੌਰ 'ਤੇ, HTML ਅਤੇ CSS ਵਧੇਰੇ ਲਾਭਕਾਰੀ ਅਤੇ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਅਨੁਭਵ ਪੱਧਰਾਂ ਦੇ ਹੋਰ ਲੋਕਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਹਨ। HTML ਅਤੇ CSS ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਨਾਲੋਂ ਤੇਜ਼ ਹਨ, ਅਤੇ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਇਹ ਸਿਧਾਂਤ dataਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਾਡਾ ਪਹਿਲਾ-ਕਲਾਸ JavaScript API ਹੈ। ਸਾਡੇ JavaScript ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਲਗਭਗ ਕੋਈ ਵੀ JavaScript ਲਿਖਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, HTML ਲਿਖੋ। ਸਾਡੇ JavaScript ਸੰਖੇਪ ਪੰਨੇ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।

ਅੰਤ ਵਿੱਚ, ਸਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਆਮ ਵੈਬ ਤੱਤਾਂ ਦੇ ਬੁਨਿਆਦੀ ਵਿਹਾਰਾਂ 'ਤੇ ਬਣਾਉਂਦੀਆਂ ਹਨ। ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਅਸੀਂ ਬਰਾਊਜ਼ਰ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਚੀਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ .btnਲਗਭਗ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਾਸ ਲਗਾ ਸਕਦੇ ਹੋ, ਪਰ ਜ਼ਿਆਦਾਤਰ ਐਲੀਮੈਂਟਸ ਕੋਈ ਵੀ ਅਰਥ ਮੁੱਲ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਇਸ ਲਈ ਇਸ ਦੀ ਬਜਾਏ, ਅਸੀਂ <button>s ਅਤੇ <a>s ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਇਹੀ ਹੋਰ ਗੁੰਝਲਦਾਰ ਹਿੱਸਿਆਂ ਲਈ ਜਾਂਦਾ ਹੈ. ਜਦੋਂ ਕਿ ਅਸੀਂ ਇੱਕ ਇਨਪੁਟ ਦੀ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਮੂਲ ਤੱਤ ਵਿੱਚ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ ਆਪਣਾ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਪਲੱਗਇਨ ਲਿਖ ਸਕਦੇ ਹਾਂ, ਇਸ ਤਰ੍ਹਾਂ ਸਾਨੂੰ ਟੈਕਸਟ ਨੂੰ ਲਾਲ ਕਹਿਣ ਦੀ ਸ਼ੈਲੀ ਦੇਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਅਸੀਂ ਹਰ ਬ੍ਰਾਉਜ਼ਰ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ :valid/ ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਾਂ।:invalid

ਸਹੂਲਤ

ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ - ਪਹਿਲਾਂ ਬੂਟਸਟਰੈਪ 3 ਵਿੱਚ ਸਹਾਇਕ - CSS ਬਲੋਟ ਅਤੇ ਖਰਾਬ ਪੇਜ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਮੁਕਾਬਲਾ ਕਰਨ ਵਿੱਚ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਹਿਯੋਗੀ ਹਨ। ਇੱਕ ਉਪਯੋਗਤਾ ਸ਼੍ਰੇਣੀ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਸਿੰਗਲ, ਅਟੱਲ ਜਾਇਦਾਦ-ਮੁੱਲ ਜੋੜੀ ਹੁੰਦੀ ਹੈ ਜੋ ਇੱਕ ਕਲਾਸ ਦੇ ਰੂਪ ਵਿੱਚ ਦਰਸਾਈ ਜਾਂਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, .d-blockਨੁਮਾਇੰਦਗੀ ਕਰਦਾ ਹੈ display: block;)। ਉਹਨਾਂ ਦੀ ਪ੍ਰਾਇਮਰੀ ਅਪੀਲ HTML ਲਿਖਣ ਵੇਲੇ ਵਰਤੋਂ ਦੀ ਗਤੀ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਲਿਖਣ ਲਈ ਕਸਟਮ CSS ਦੀ ਮਾਤਰਾ ਨੂੰ ਸੀਮਿਤ ਕਰਨਾ ਹੈ।

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

ਲਚਕਦਾਰ HTML

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

ਕੋਡ ਸੰਮੇਲਨ

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

ਅਸੀਂ ਆਪਣੇ Sass/CSS ਵਿੱਚ ਇਹਨਾਂ ਮਿਆਰਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸਟਾਈਲਿੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਸਾਡੀ ਕਸਟਮ ਸਟਾਈਲਿੰਟ ਸੰਰਚਨਾ ਓਪਨ ਸੋਰਸ ਹੈ ਅਤੇ ਦੂਜਿਆਂ ਲਈ ਵਰਤਣ ਅਤੇ ਵਧਾਉਣ ਲਈ ਉਪਲਬਧ ਹੈ।

ਅਸੀਂ ਮਿਆਰੀ ਅਤੇ ਅਰਥਪੂਰਨ HTML ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਨਾਲ-ਨਾਲ ਆਮ ਗਲਤੀਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ vnu-jar ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।