ਰੰਗ
ਬੂਟਸਟਰੈਪ ਇੱਕ ਵਿਆਪਕ ਰੰਗ ਪ੍ਰਣਾਲੀ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ ਜੋ ਸਾਡੀ ਸ਼ੈਲੀ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਥੀਮ ਕਰਦਾ ਹੈ। ਇਹ ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਲਈ ਵਧੇਰੇ ਵਿਆਪਕ ਅਨੁਕੂਲਤਾ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
ਥੀਮ ਦੇ ਰੰਗ
scss/_variables.scss
ਅਸੀਂ ਰੰਗ ਸਕੀਮਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਛੋਟਾ ਰੰਗ ਪੈਲਅਟ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਰੰਗਾਂ ਦੇ ਇੱਕ ਸਬਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਬੂਟਸਟਰੈਪ ਦੀ ਫਾਈਲ ਵਿੱਚ Sass ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਵੀ ਉਪਲਬਧ ਹੈ।
ਇਹ ਸਾਰੇ ਰੰਗ Sass ਨਕਸ਼ੇ ਦੇ ਰੂਪ ਵਿੱਚ ਉਪਲਬਧ ਹਨ, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
ਇਹਨਾਂ ਰੰਗਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਸ਼ੋਧਿਤ ਕਰਨਾ ਹੈ ਲਈ ਸਾਡੇ ਸਾਸ ਨਕਸ਼ੇ ਅਤੇ ਲੂਪਸ ਡੌਕਸ ਦੇਖੋ ।
ਸਾਰੇ ਰੰਗ
scss/_variables.scss
ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਰੰਗ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਫਾਈਲ ਵਿੱਚ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਉਪਲਬਧ ਹਨ । ਵਧੇ ਹੋਏ ਫਾਈਲ ਅਕਾਰ ਤੋਂ ਬਚਣ ਲਈ, ਅਸੀਂ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਵੇਰੀਏਬਲ ਲਈ ਟੈਕਸਟ ਜਾਂ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਕਲਾਸਾਂ ਨਹੀਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਇਸਦੀ ਬਜਾਏ, ਅਸੀਂ ਇੱਕ ਥੀਮ ਪੈਲੇਟ ਲਈ ਇਹਨਾਂ ਰੰਗਾਂ ਦਾ ਇੱਕ ਉਪ ਸਮੂਹ ਚੁਣਦੇ ਹਾਂ ।
ਜਦੋਂ ਤੁਸੀਂ ਰੰਗਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ ਤਾਂ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਅਸੀਂ ਹਰ ਇੱਕ ਮੁੱਖ ਰੰਗ ਵਿੱਚ ਤਿੰਨ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ-ਇੱਕ ਸਵੈਚ ਦੇ ਮੌਜੂਦਾ ਰੰਗਾਂ ਲਈ, ਇੱਕ ਚਿੱਟੇ ਦੇ ਵਿਰੁੱਧ, ਅਤੇ ਇੱਕ ਕਾਲੇ ਦੇ ਵਿਰੁੱਧ।
ਸਾਸ 'ਤੇ ਨੋਟਸ
Sass ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਵੇਰੀਏਬਲ ਤਿਆਰ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ, ਇਸਲਈ ਅਸੀਂ ਖੁਦ ਹਰ ਰੰਗ ਅਤੇ ਰੰਗਤ ਲਈ ਵੇਰੀਏਬਲ ਬਣਾਏ ਹਨ। ਅਸੀਂ ਮੱਧ ਬਿੰਦੂ ਮੁੱਲ (ਉਦਾਹਰਨ ਲਈ, $blue-500
) ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਸਾਸ ਦੇ ਰੰਗ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਸਾਡੇ ਰੰਗਾਂ ਨੂੰ ਰੰਗਤ (ਹਲਕਾ) ਜਾਂ ਰੰਗਤ (ਗੂੜ੍ਹਾ) ਕਰਨ ਲਈ ਕਸਟਮ ਰੰਗ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ mix()
।
ਵਰਤਣਾ mix()
ਇੱਕੋ ਜਿਹਾ ਨਹੀਂ ਹੈ lighten()
ਅਤੇ darken()
— ਪਹਿਲਾਂ ਦਿੱਤੇ ਰੰਗ ਨੂੰ ਚਿੱਟੇ ਜਾਂ ਕਾਲੇ ਨਾਲ ਮਿਲਾਉਂਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਬਾਅਦ ਵਾਲਾ ਸਿਰਫ਼ ਹਰੇਕ ਰੰਗ ਦੇ ਹਲਕੇਪਨ ਮੁੱਲ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਦਾ ਹੈ। ਨਤੀਜਾ ਰੰਗਾਂ ਦਾ ਇੱਕ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੰਪੂਰਨ ਸੂਟ ਹੈ, ਜਿਵੇਂ ਕਿ ਇਸ ਕੋਡਪੇਨ ਡੈਮੋ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ।
ਸਾਡੇ tint-color()
ਅਤੇ shade-color()
ਫੰਕਸ਼ਨ mix()
ਸਾਡੇ $theme-color-interval
ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਵਰਤਦੇ ਹਨ, ਜੋ ਸਾਡੇ ਦੁਆਰਾ ਪੈਦਾ ਕੀਤੇ ਹਰੇਕ ਮਿਸ਼ਰਤ ਰੰਗ ਲਈ ਇੱਕ ਸਟੈਪਡ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ। scss/_functions.scss
ਪੂਰੇ ਸਰੋਤ ਕੋਡ ਲਈ ਅਤੇ scss/_variables.scss
ਫਾਈਲਾਂ ਦੇਖੋ ।
ਰੰਗ Sass ਨਕਸ਼ੇ
ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਵਿੱਚ ਰੰਗਾਂ ਦੀ ਸੂਚੀ ਅਤੇ ਉਹਨਾਂ ਦੇ ਹੈਕਸ ਮੁੱਲਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਲੂਪ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਤਿੰਨ ਨਕਸ਼ੇ ਸ਼ਾਮਲ ਹਨ।
$colors
ਸਾਡੇ ਸਾਰੇ ਉਪਲਬਧ ਅਧਾਰ (500
) ਰੰਗਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ$theme-colors
ਸਾਰੇ ਅਰਥਾਂ ਦੇ ਨਾਮ ਵਾਲੇ ਥੀਮ ਰੰਗਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ (ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ)$grays
ਸਲੇਟੀ ਦੇ ਸਾਰੇ ਰੰਗਾਂ ਅਤੇ ਸ਼ੇਡਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ
ਦੇ ਅੰਦਰ scss/_variables.scss
, ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਰੰਗ ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ਾ ਮਿਲੇਗਾ। ਇੱਥੇ $colors
Sass ਨਕਸ਼ੇ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
ਨਕਸ਼ੇ ਦੇ ਅੰਦਰ ਮੁੱਲਾਂ ਨੂੰ ਜੋੜੋ, ਹਟਾਓ ਜਾਂ ਸੋਧੋ ਤਾਂ ਜੋ ਇਹ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕੇ ਕਿ ਉਹ ਕਈ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਬਦਕਿਸਮਤੀ ਨਾਲ ਇਸ ਸਮੇਂ, ਹਰ ਭਾਗ ਇਸ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਭਵਿੱਖ ਦੇ ਅਪਡੇਟਸ ਇਸ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਗੇ। ${color}
ਉਦੋਂ ਤੱਕ, ਵੇਰੀਏਬਲ ਅਤੇ ਇਸ ਸਾਸ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਯੋਜਨਾ ਬਣਾਓ।
ਉਦਾਹਰਨ
ਇੱਥੇ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਸਾਸ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹੋ:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
ਰੰਗ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਰੰਗ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ color
ਅਤੇ background-color
ਵਰਤਣ ਲਈ ਵੀ ਉਪਲਬਧ ਹਨ।500