ਥੀਮਿੰਗ ਬੂਟਸਟਰੈਪ
ਆਸਾਨ ਥੀਮਿੰਗ ਅਤੇ ਕੰਪੋਨੈਂਟ ਤਬਦੀਲੀਆਂ ਲਈ ਗਲੋਬਲ ਸਟਾਈਲ ਤਰਜੀਹਾਂ ਲਈ ਸਾਡੇ ਨਵੇਂ ਬਿਲਟ-ਇਨ ਸਾਸ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਬੂਟਸਟਰੈਪ 3 ਵਿੱਚ, ਥੀਮਿੰਗ ਨੂੰ ਜਿਆਦਾਤਰ ਘੱਟ, ਕਸਟਮ CSS, ਅਤੇ ਇੱਕ ਵੱਖਰੀ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡਾਂ ਦੁਆਰਾ ਚਲਾਇਆ ਗਿਆ ਸੀ ਜੋ ਅਸੀਂ ਆਪਣੀਆਂ dist
ਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ। ਕੁਝ ਕੋਸ਼ਿਸ਼ਾਂ ਨਾਲ, ਕੋਈ ਵੀ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਛੂਹਣ ਤੋਂ ਬਿਨਾਂ ਬੂਟਸਟਰੈਪ 3 ਦੀ ਦਿੱਖ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੁਬਾਰਾ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕਦਾ ਹੈ। ਬੂਟਸਟਰੈਪ 4 ਇੱਕ ਜਾਣੂ, ਪਰ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਹੁਣ, ਥੀਮਿੰਗ Sass ਵੇਰੀਏਬਲ, Sass ਨਕਸ਼ੇ, ਅਤੇ ਕਸਟਮ CSS ਦੁਆਰਾ ਪੂਰੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ ਕੋਈ ਹੋਰ ਸਮਰਪਿਤ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਗਰੇਡੀਐਂਟ, ਸ਼ੈਡੋ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਜੋੜਨ ਲਈ ਬਿਲਟ-ਇਨ ਥੀਮ ਨੂੰ ਸਮਰੱਥ ਕਰ ਸਕਦੇ ਹੋ।
ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਕਸਿਨ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਫਾਇਦਾ ਲੈਣ ਲਈ ਸਾਡੇ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਚੋ। ਸਾਸ ਲਈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੀ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਉਣਾ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਅਤੇ ਵਧਾ ਸਕੋ। ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ npm ਵਰਗੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਫਾਈਲ ਬਣਤਰ ਹੋਵੇਗੀ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:
ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਡਾਉਨਲੋਡ ਕੀਤਾ ਹੈ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਤੋਂ ਵੱਖ ਰੱਖਦੇ ਹੋਏ, ਉਸ ਢਾਂਚੇ ਦੇ ਸਮਾਨ ਕੁਝ ਦਸਤੀ ਸੈੱਟਅੱਪ ਕਰਨਾ ਚਾਹੋਗੇ।
ਤੁਹਾਡੇ ਵਿੱਚ custom.scss
, ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਫਾਈਲਾਂ ਨੂੰ ਆਯਾਤ ਕਰੋਗੇ। ਤੁਹਾਡੇ ਕੋਲ ਦੋ ਵਿਕਲਪ ਹਨ: ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਲੋੜੀਂਦੇ ਹਿੱਸੇ ਚੁਣੋ। ਅਸੀਂ ਬਾਅਦ ਵਾਲੇ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ, ਹਾਲਾਂਕਿ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਾਡੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਕੁਝ ਲੋੜਾਂ ਅਤੇ ਨਿਰਭਰਤਾਵਾਂ ਹਨ। ਤੁਹਾਨੂੰ ਸਾਡੇ ਪਲੱਗਇਨਾਂ ਲਈ ਕੁਝ JavaScript ਵੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।
ਉਸ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਵਿੱਚ ਕਿਸੇ ਵੀ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਸੋਧਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ custom.scss
। // Optional
ਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਸੈਕਸ਼ਨ ਦੇ ਤਹਿਤ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਜੋੜਨਾ ਵੀ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ । bootstrap.scss
ਅਸੀਂ ਤੁਹਾਡੇ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਸਾਡੀ ਫਾਈਲ ਤੋਂ ਪੂਰੇ ਆਯਾਤ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ।
ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਹਰੇਕ Sass ਵੇਰੀਏਬਲ ਵਿੱਚ !default
ਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਤੁਹਾਡੇ ਆਪਣੇ Sass ਵਿੱਚ ਵੇਰੀਏਬਲ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਲੋੜ ਅਨੁਸਾਰ ਵੇਰੀਏਬਲ ਨੂੰ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰੋ, ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸੋਧੋ, ਅਤੇ !default
ਫਲੈਗ ਨੂੰ ਹਟਾਓ। ਜੇਕਰ ਇੱਕ ਵੇਰੀਏਬਲ ਪਹਿਲਾਂ ਹੀ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੁਆਰਾ ਮੁੜ-ਸਾਈਨ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਉਸੇ Sass ਫਾਈਲ ਦੇ ਅੰਦਰ ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡ ਡਿਫੌਲਟ ਵੇਰੀਏਬਲ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਆ ਸਕਦੇ ਹਨ। ਹਾਲਾਂਕਿ, ਜਦੋਂ Sass ਫਾਈਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ Sass ਫਾਈਲਾਂ ਨੂੰ ਆਯਾਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਓਵਰਰਾਈਡ ਆਉਣੇ ਚਾਹੀਦੇ ਹਨ।
ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ npm ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਅਤੇ ਕੰਪਾਇਲ ਕਰਨ ਵੇਲੇ background-color
ਅਤੇ color
ਲਈ ਬਦਲਦੀ ਹੈ:<body>
ਹੇਠਲੇ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵੇਰੀਏਬਲ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਦੁਹਰਾਓ।
ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਮੁੱਠੀ ਭਰ Sass ਨਕਸ਼ੇ, ਮੁੱਖ ਮੁੱਲ ਜੋੜੇ ਸ਼ਾਮਲ ਹਨ ਜੋ ਸੰਬੰਧਿਤ CSS ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਆਪਣੇ ਰੰਗਾਂ, ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟਸ, ਅਤੇ ਹੋਰ ਲਈ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। Sass ਵੇਰੀਏਬਲ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਰੇ Sass ਨਕਸ਼ਿਆਂ ਵਿੱਚ !default
ਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਅਤੇ ਓਵਰਰਾਈਡ ਅਤੇ ਵਧਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
ਸਾਡੇ ਕੁਝ ਸਾਸ ਨਕਸ਼ੇ ਮੂਲ ਰੂਪ ਵਿੱਚ ਖਾਲੀ ਨਕਸ਼ਿਆਂ ਵਿੱਚ ਮਿਲਾਏ ਜਾਂਦੇ ਹਨ। ਇਹ ਦਿੱਤੇ ਗਏ ਸਾਸ ਨਕਸ਼ੇ ਦੇ ਆਸਾਨ ਵਿਸਤਾਰ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਨਕਸ਼ੇ ਤੋਂ ਆਈਟਮਾਂ ਨੂੰ ਥੋੜਾ ਹੋਰ ਮੁਸ਼ਕਲ ਬਣਾਉਣ ਦੀ ਕੀਮਤ 'ਤੇ ਆਉਂਦਾ ਹੈ।
ਸਾਡੇ $theme-colors
ਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਮੌਜੂਦਾ ਰੰਗ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਲਈ, ਆਪਣੀ ਕਸਟਮ Sass ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਲਿਖਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ:
ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਰੰਗ $theme-colors
ਜੋੜਨ ਲਈ, ਨਵੀਂ ਕੁੰਜੀ ਅਤੇ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰੋ:
ਜਾਂ ਕਿਸੇ ਹੋਰ ਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਹਟਾਉਣ ਲਈ $theme-colors
, ਵਰਤੋਂ map-remove
:
ਬੂਟਸਟਰੈਪ ਸਾਸ ਨਕਸ਼ਿਆਂ ਦੇ ਅੰਦਰ ਕੁਝ ਖਾਸ ਕੁੰਜੀਆਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਮੰਨਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਅਤੇ ਵਧਾਇਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸ਼ਾਮਲ ਕੀਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਗਲਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਇੱਕ ਖਾਸ Sass ਨਕਸ਼ੇ ਦੀ ਕੁੰਜੀ ਵਰਤੀ ਜਾ ਰਹੀ ਹੈ।
ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਲਿੰਕਾਂ, ਬਟਨਾਂ ਅਤੇ ਫਾਰਮ ਸਟੇਟਸ ਲਈ primary
, success
, ਅਤੇ danger
ਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। $theme-colors
ਇਹਨਾਂ ਕੁੰਜੀਆਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਨਾਲ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ, ਪਰ ਇਹਨਾਂ ਨੂੰ ਹਟਾਉਣ ਨਾਲ Sass ਕੰਪਾਇਲੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ Sass ਕੋਡ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਪਵੇਗੀ ਜੋ ਉਹਨਾਂ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਕਈ Sass ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਆਮ ਥੀਮਿੰਗ ਲਈ ਸਿਰਫ ਇੱਕ ਸਬਸੈੱਟ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਅਸੀਂ ਰੰਗ ਦੇ ਨਕਸ਼ਿਆਂ ਤੋਂ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਤਿੰਨ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ:
ਇਹ ਤੁਹਾਨੂੰ Sass ਨਕਸ਼ੇ ਤੋਂ ਇੱਕ ਰੰਗ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ v3 ਤੋਂ ਇੱਕ ਰੰਗ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ।
ਸਾਡੇ ਕੋਲ ਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਦੇ ਇੱਕ ਖਾਸ ਪੱਧਰ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਫੰਕਸ਼ਨ ਵੀ ਹੈ। $theme-colors
ਨਕਾਰਾਤਮਕ ਪੱਧਰ ਦੇ ਮੁੱਲ ਰੰਗ ਨੂੰ ਹਲਕਾ ਕਰ ਦੇਣਗੇ, ਜਦੋਂ ਕਿ ਉੱਚ ਪੱਧਰ ਗੂੜ੍ਹੇ ਹੋ ਜਾਣਗੇ।
ਅਭਿਆਸ ਵਿੱਚ, ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋਗੇ ਅਤੇ ਦੋ ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਪਾਸ ਕਰੋਗੇ: ਰੰਗ ਦਾ ਨਾਮ $theme-colors
(ਉਦਾਹਰਨ ਲਈ, ਪ੍ਰਾਇਮਰੀ ਜਾਂ ਖ਼ਤਰਾ) ਅਤੇ ਇੱਕ ਸੰਖਿਆਤਮਕ ਪੱਧਰ।
ਅਤਿਰਿਕਤ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਭਵਿੱਖ ਵਿੱਚ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ ਵਾਧੂ Sass ਨਕਸ਼ਿਆਂ ਲਈ ਲੈਵਲ ਫੰਕਸ਼ਨ ਬਣਾਉਣ ਲਈ ਤੁਹਾਡੀ ਆਪਣੀ ਕਸਟਮ Sass, ਜਾਂ ਇੱਕ ਆਮ ਇੱਕ ਵੀ ਜੇ ਤੁਸੀਂ ਵਧੇਰੇ ਵਰਬੋਸ ਬਣਨਾ ਚਾਹੁੰਦੇ ਹੋ।
ਇੱਕ ਵਾਧੂ ਫੰਕਸ਼ਨ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ ਉਹ ਹੈ ਰੰਗ ਕੰਟਰਾਸਟ ਫੰਕਸ਼ਨ color-yiq
,। ਇਹ YIQ ਕਲਰ ਸਪੇਸ ਦੀ ਵਰਤੋਂ ਨਿਸ਼ਚਿਤ ਬੇਸ ਕਲਰ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੇ ਆਪ ਇੱਕ ਹਲਕਾ ( #fff
) ਜਾਂ ਗੂੜ੍ਹਾ ( #111
) ਕੰਟਰਾਸਟ ਰੰਗ ਵਾਪਸ ਕਰਨ ਲਈ ਕਰਦਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਖਾਸ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਜਾਂ ਲੂਪਸ ਲਈ ਲਾਭਦਾਇਕ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਕਈ ਕਲਾਸਾਂ ਤਿਆਰ ਕਰ ਰਹੇ ਹੋ।
ਉਦਾਹਰਨ ਲਈ, ਸਾਡੇ $theme-colors
ਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਦੇ ਸਵੈਚ ਬਣਾਉਣ ਲਈ:
ਇਸਦੀ ਵਰਤੋਂ ਇੱਕ ਵਾਰੀ ਵਿਪਰੀਤ ਲੋੜਾਂ ਲਈ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:
ਤੁਸੀਂ ਸਾਡੇ ਕਲਰ ਮੈਪ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਇੱਕ ਬੇਸ ਕਲਰ ਵੀ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:
ਸਾਡੀ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ ਫਾਈਲ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਨਵੇਂ $enable-*
Sass ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਗਲੋਬਲ CSS ਤਰਜੀਹਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਟੌਗਲ ਕਰੋ। ਇੱਕ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ ਅਤੇ npm run test
ਲੋੜ ਅਨੁਸਾਰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ।
ਤੁਸੀਂ ਸਾਡੀ _variables.scss
ਫਾਈਲ ਵਿੱਚ ਮੁੱਖ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਲਈ ਇਹਨਾਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਲੱਭ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।
ਵੇਰੀਏਬਲ | ਮੁੱਲ | ਵਰਣਨ |
---|---|---|
$spacer |
1rem (ਡਿਫੌਲਟ), ਜਾਂ ਕੋਈ ਮੁੱਲ > 0 |
ਸਾਡੀਆਂ ਸਪੇਸਰ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਮੈਟਿਕ ਤੌਰ 'ਤੇ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸਪੇਸਰ ਮੁੱਲ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ । |
$enable-rounded |
true (ਡਿਫੌਲਟ) ਜਾਂfalse |
border-radius ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
$enable-shadows |
true ਜਾਂ false (ਮੂਲ) |
box-shadow ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
$enable-gradients |
true ਜਾਂ false (ਮੂਲ) |
background-image ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਸਟਾਈਲ ਰਾਹੀਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰੇਡੀਐਂਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
$enable-transitions |
true (ਡਿਫੌਲਟ) ਜਾਂfalse |
transition ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ s ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
$enable-hover-media-query |
true ਜਾਂ false (ਮੂਲ) |
ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ |
$enable-grid-classes |
true (ਡਿਫੌਲਟ) ਜਾਂfalse |
ਗਰਿੱਡ ਸਿਸਟਮ (ਜਿਵੇਂ ਕਿ, .container , .row , .col-md-1 , ਆਦਿ) ਲਈ CSS ਕਲਾਸਾਂ ਬਣਾਉਣ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
$enable-caret |
true (ਡਿਫੌਲਟ) ਜਾਂfalse |
'ਤੇ ਸੂਡੋ ਐਲੀਮੈਂਟ ਕੈਰੇਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ .dropdown-toggle । |
$enable-print-styles |
true (ਡਿਫੌਲਟ) ਜਾਂfalse |
ਪ੍ਰਿੰਟਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸੱਸ ਮੈਪ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਰੰਗਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਨਿਯਮਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਤਿਆਰ ਕਰਨ ਲਈ ਇਸ ਨਕਸ਼ੇ ਨੂੰ ਸਾਸ ਵਿੱਚ ਲੂਪ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਉਪਲਬਧ ਸਾਰੇ ਰੰਗ, ਸਾਡੀ scss/_variables.scss
ਫਾਈਲ ਵਿੱਚ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਉਪਲਬਧ ਹਨ। ਇਸ ਨੂੰ ਵਾਧੂ ਸ਼ੇਡਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਅਗਲੀਆਂ ਛੋਟੀਆਂ ਰੀਲੀਜ਼ਾਂ ਵਿੱਚ ਵਧਾਇਆ ਜਾਵੇਗਾ, ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਕੀਤੇ ਗ੍ਰੇਸਕੇਲ ਪੈਲੇਟ ਵਾਂਗ।
ਇੱਥੇ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਸਾਸ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹੋ:
ਰੰਗ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਸੈਟਿੰਗਾਂ ਲਈ ਵੀ ਉਪਲਬਧ ਹਨ color
ਅਤੇ background-color
.
ਭਵਿੱਖ ਵਿੱਚ, ਅਸੀਂ ਹਰੇਕ ਰੰਗ ਦੇ ਸ਼ੇਡਾਂ ਲਈ Sass ਨਕਸ਼ੇ ਅਤੇ ਵੇਰੀਏਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਟੀਚਾ ਰੱਖਾਂਗੇ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਹੇਠਾਂ ਗ੍ਰੇਸਕੇਲ ਰੰਗਾਂ ਨਾਲ ਕੀਤਾ ਹੈ।
scss/_variables.scss
ਅਸੀਂ ਰੰਗ ਸਕੀਮਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਛੋਟਾ ਰੰਗ ਪੈਲਅਟ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਰੰਗਾਂ ਦੇ ਸਬਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਸਾਡੀ ਫਾਈਲ ਵਿੱਚ Sass ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਵੀ ਉਪਲਬਧ ਹੈ।
ਸਲੇਟੀ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਸੈੱਟ ਅਤੇ scss/_variables.scss
ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਲੇਟੀ ਦੇ ਇਕਸਾਰ ਸ਼ੇਡ ਲਈ ਇੱਕ Sass ਨਕਸ਼ਾ।
ਦੇ ਅੰਦਰ _variables.scss
, ਤੁਸੀਂ ਸਾਡੇ ਰੰਗ ਵੇਰੀਏਬਲ ਅਤੇ ਸਾਸ ਮੈਪ ਪਾਓਗੇ। ਇੱਥੇ $colors
Sass ਨਕਸ਼ੇ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
ਨਕਸ਼ੇ ਦੇ ਅੰਦਰ ਮੁੱਲਾਂ ਨੂੰ ਜੋੜੋ, ਹਟਾਓ ਜਾਂ ਸੋਧੋ ਤਾਂ ਜੋ ਇਹ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕੇ ਕਿ ਉਹ ਕਈ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਬਦਕਿਸਮਤੀ ਨਾਲ ਇਸ ਸਮੇਂ, ਹਰ ਭਾਗ ਇਸ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਭਵਿੱਖ ਦੇ ਅਪਡੇਟਸ ਇਸ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਗੇ। ${color}
ਉਦੋਂ ਤੱਕ, ਵੇਰੀਏਬਲ ਅਤੇ ਇਸ ਸਾਸ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਯੋਜਨਾ ਬਣਾਓ।
ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸੇ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ @each
ਲੂਪਾਂ ਨਾਲ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਜੋ ਇੱਕ Sass ਨਕਸ਼ੇ ਉੱਤੇ ਦੁਹਰਾਉਂਦੀਆਂ ਹਨ। ਇਹ ਸਾਡੇ ਦੁਆਰਾ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਦੇ ਰੂਪਾਂ ਨੂੰ $theme-colors
ਤਿਆਰ ਕਰਨ ਅਤੇ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਜਵਾਬਦੇਹ ਰੂਪਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਹਨਾਂ Sass ਨਕਸ਼ਿਆਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ ਅਤੇ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਹਨਾਂ ਲੂਪਸ ਵਿੱਚ ਆਪਣੇ ਆਪ ਹੀ ਆਪਣੇ ਬਦਲਾਵਾਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਦੇਖੋਗੇ।
ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਭਾਗ ਬੇਸ-ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਪਹੁੰਚ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਟਾਈਲਿੰਗ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬੇਸ ਕਲਾਸ (ਉਦਾਹਰਨ ਲਈ, .btn
) ਵਿੱਚ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਸ਼ੈਲੀ ਦੀਆਂ ਭਿੰਨਤਾਵਾਂ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਤੱਕ ਸੀਮਤ ਹੁੰਦੀਆਂ ਹਨ .btn-danger
। ਇਹ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ $theme-colors
ਨਕਸ਼ੇ ਤੋਂ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਸਾਡੀਆਂ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਸੰਖਿਆ ਅਤੇ ਨਾਮ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕੇ।
ਇੱਥੇ ਦੋ ਉਦਾਹਰਣਾਂ ਹਨ ਕਿ ਅਸੀਂ ਕੰਪੋਨੈਂਟ ਅਤੇ ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ $theme-colors
ਨੂੰ ਮੋਡੀਫਾਇਰ ਬਣਾਉਣ ਲਈ ਨਕਸ਼ੇ ਉੱਤੇ ਕਿਵੇਂ ਲੂਪ ਕਰਦੇ ਹਾਂ।.alert
.bg-*
ਇਹ ਸੱਸ ਲੂਪਸ ਰੰਗ ਦੇ ਨਕਸ਼ਿਆਂ ਤੱਕ ਸੀਮਿਤ ਨਹੀਂ ਹਨ, ਜਾਂ ਤਾਂ. ਤੁਸੀਂ ਆਪਣੇ ਭਾਗਾਂ ਜਾਂ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਲਓ ਜਿੱਥੇ ਅਸੀਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਦੇ ਨਾਲ ਸਾਸ ਮੈਪ @each
ਲਈ ਇੱਕ ਲੂਪ ਨੂੰ ਮਿਲਾਉਂਦੇ ਹਾਂ।$grid-breakpoints
ਜੇਕਰ ਤੁਹਾਨੂੰ ਆਪਣੇ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਹੈ $grid-breakpoints
, ਤਾਂ ਤੁਹਾਡੀਆਂ ਤਬਦੀਲੀਆਂ ਉਸ ਨਕਸ਼ੇ 'ਤੇ ਦੁਹਰਾਉਣ ਵਾਲੇ ਸਾਰੇ ਲੂਪਸ 'ਤੇ ਲਾਗੂ ਹੋਣਗੀਆਂ।
ਬੂਟਸਟਰੈਪ 4 ਇਸ ਦੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਲਗਭਗ ਦੋ ਦਰਜਨ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਵੇਰੀਏਬਲ) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇੰਸਪੈਕਟਰ, ਕੋਡ ਸੈਂਡਬੌਕਸ, ਜਾਂ ਆਮ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਸਾਡੇ ਥੀਮ ਰੰਗ, ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਪ੍ਰਾਇਮਰੀ ਫੌਂਟ ਸਟੈਕ ਵਰਗੇ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਮੁੱਲਾਂ ਤੱਕ ਆਸਾਨ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
ਇੱਥੇ ਵੇਰੀਏਬਲ ਹਨ ਜੋ ਅਸੀਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ (ਨੋਟ ਕਰੋ ਕਿ :root
ਲੋੜੀਂਦਾ ਹੈ)। ਉਹ ਸਾਡੀ _root.scss
ਫਾਈਲ ਵਿੱਚ ਸਥਿਤ ਹਨ।
CSS ਵੇਰੀਏਬਲ ਸਾਸ ਦੇ ਵੇਰੀਏਬਲਾਂ ਲਈ ਸਮਾਨ ਲਚਕਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ, ਪਰ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸੇਵਾ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਸੰਕਲਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ। ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਸਾਡੇ ਪੰਨੇ ਦੇ ਫੌਂਟ ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਨੂੰ ਰੀਸੈਟ ਕਰ ਰਹੇ ਹਾਂ।
ਤੁਸੀਂ ਆਪਣੀਆਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਵਿੱਚ ਸਾਡੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ: