ਸੱਸ
ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਸ਼ਰਣ, ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦਾ ਲਾਭ ਲੈਣ ਲਈ ਸਾਡੀਆਂ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕੀਤੀ ਜਾ ਸਕੇ।
ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਕਸਿਨ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਫਾਇਦਾ ਲੈਣ ਲਈ ਸਾਡੇ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਫਾਈਲ ਬਣਤਰ
ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਚੋ। ਸਾਸ ਲਈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੀ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਉਣਾ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਅਤੇ ਵਧਾ ਸਕੋ। ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ npm ਵਰਗੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਫਾਈਲ ਬਣਤਰ ਹੋਵੇਗੀ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਡਾਉਨਲੋਡ ਕੀਤਾ ਹੈ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਤੋਂ ਵੱਖ ਰੱਖਦੇ ਹੋਏ, ਉਸ ਢਾਂਚੇ ਦੇ ਸਮਾਨ ਕੁਝ ਦਸਤੀ ਸੈੱਟਅੱਪ ਕਰਨਾ ਚਾਹੋਗੇ।
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
ਆਯਾਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ
ਤੁਹਾਡੇ ਵਿੱਚ custom.scss
, ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਫਾਈਲਾਂ ਨੂੰ ਆਯਾਤ ਕਰੋਗੇ। ਤੁਹਾਡੇ ਕੋਲ ਦੋ ਵਿਕਲਪ ਹਨ: ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਲੋੜੀਂਦੇ ਹਿੱਸੇ ਚੁਣੋ। ਅਸੀਂ ਬਾਅਦ ਵਾਲੇ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ, ਹਾਲਾਂਕਿ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਾਡੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਕੁਝ ਲੋੜਾਂ ਅਤੇ ਨਿਰਭਰਤਾਵਾਂ ਹਨ। ਤੁਹਾਨੂੰ ਸਾਡੇ ਪਲੱਗਇਨਾਂ ਲਈ ਕੁਝ JavaScript ਵੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
ਉਸ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਵਿੱਚ ਕਿਸੇ ਵੀ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਸੋਧਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ custom.scss
। // Optional
ਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਸੈਕਸ਼ਨ ਦੇ ਤਹਿਤ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਜੋੜਨਾ ਵੀ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ । bootstrap.scss
ਅਸੀਂ ਤੁਹਾਡੇ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਸਾਡੀ ਫਾਈਲ ਤੋਂ ਪੂਰੇ ਆਯਾਤ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ।
ਵੇਰੀਏਬਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹਰੇਕ Sass ਵੇਰੀਏਬਲ ਵਿੱਚ !default
ਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਤੁਹਾਡੇ ਆਪਣੇ Sass ਵਿੱਚ ਵੇਰੀਏਬਲ ਦੇ ਡਿਫੌਲਟ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਲੋੜ ਅਨੁਸਾਰ ਵੇਰੀਏਬਲ ਨੂੰ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰੋ, ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸੋਧੋ, ਅਤੇ !default
ਫਲੈਗ ਨੂੰ ਹਟਾਓ। ਜੇਕਰ ਇੱਕ ਵੇਰੀਏਬਲ ਪਹਿਲਾਂ ਹੀ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੁਆਰਾ ਮੁੜ-ਸਾਈਨ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਤੁਹਾਨੂੰ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ ਵੇਰੀਏਬਲਾਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਮਿਲੇਗੀ scss/_variables.scss
। ਕੁਝ ਵੇਰੀਏਬਲ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ null
, ਇਹ ਵੇਰੀਏਬਲ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਆਉਟਪੁੱਟ ਨਹੀਂ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ ਤੁਹਾਡੀ ਸੰਰਚਨਾ ਵਿੱਚ ਓਵਰਰਾਈਡ ਨਹੀਂ ਹੁੰਦੇ।
ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡ ਸਾਡੇ ਫੰਕਸ਼ਨਾਂ ਦੇ ਆਯਾਤ ਹੋਣ ਤੋਂ ਬਾਅਦ ਆਉਣੇ ਚਾਹੀਦੇ ਹਨ, ਪਰ ਬਾਕੀ ਆਯਾਤ ਤੋਂ ਪਹਿਲਾਂ।
ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ npm ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਅਤੇ ਕੰਪਾਇਲ ਕਰਨ ਵੇਲੇ background-color
ਅਤੇ color
ਲਈ ਬਦਲਦੀ ਹੈ:<body>
// Required
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
ਹੇਠਲੇ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵੇਰੀਏਬਲ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਦੁਹਰਾਓ।
ਨਕਸ਼ੇ ਅਤੇ ਲੂਪਸ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਮੁੱਠੀ ਭਰ Sass ਨਕਸ਼ੇ, ਮੁੱਖ ਮੁੱਲ ਜੋੜੇ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਸੰਬੰਧਿਤ CSS ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਆਪਣੇ ਰੰਗਾਂ, ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟਸ, ਅਤੇ ਹੋਰ ਲਈ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। Sass ਵੇਰੀਏਬਲ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਰੇ Sass ਨਕਸ਼ਿਆਂ ਵਿੱਚ !default
ਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਅਤੇ ਓਵਰਰਾਈਡ ਅਤੇ ਵਧਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
ਸਾਡੇ ਕੁਝ ਸਾਸ ਨਕਸ਼ੇ ਮੂਲ ਰੂਪ ਵਿੱਚ ਖਾਲੀ ਨਕਸ਼ਿਆਂ ਵਿੱਚ ਮਿਲਾਏ ਜਾਂਦੇ ਹਨ। ਇਹ ਦਿੱਤੇ ਗਏ ਸਾਸ ਨਕਸ਼ੇ ਦੇ ਆਸਾਨ ਵਿਸਤਾਰ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਨਕਸ਼ੇ ਤੋਂ ਆਈਟਮਾਂ ਨੂੰ ਥੋੜਾ ਹੋਰ ਮੁਸ਼ਕਲ ਬਣਾਉਣ ਦੀ ਕੀਮਤ 'ਤੇ ਆਉਂਦਾ ਹੈ।
ਨਕਸ਼ਾ ਸੋਧੋ
ਨਕਸ਼ੇ ਵਿੱਚ ਸਾਰੇ ਵੇਰੀਏਬਲਾਂ $theme-colors
ਨੂੰ ਇੱਕਲੇ ਵੇਰੀਏਬਲ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਸਾਡੇ $theme-colors
ਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਮੌਜੂਦਾ ਰੰਗ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਲਈ, ਆਪਣੀ ਕਸਟਮ Sass ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਲਿਖਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ:
$primary: #0074d9;
$danger: #ff4136;
ਬਾਅਦ ਵਿੱਚ, ਇਹ ਵੇਰੀਏਬਲ ਬੂਟਸਟਰੈਪ ਦੇ $theme-colors
ਨਕਸ਼ੇ ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
ਨਕਸ਼ੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
$theme-colors
ਆਪਣੇ ਕਸਟਮ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਇੱਕ ਨਵਾਂ Sass ਨਕਸ਼ਾ ਬਣਾ ਕੇ ਅਤੇ ਇਸਨੂੰ ਅਸਲੀ ਨਕਸ਼ੇ ਨਾਲ ਮਿਲਾ ਕੇ, ਜਾਂ ਕਿਸੇ ਹੋਰ ਨਕਸ਼ੇ ਵਿੱਚ ਨਵੇਂ ਰੰਗ ਸ਼ਾਮਲ ਕਰੋ । ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਨਵਾਂ $custom-colors
ਨਕਸ਼ਾ ਬਣਾਵਾਂਗੇ ਅਤੇ ਇਸਨੂੰ ਨਾਲ ਮਿਲਾਵਾਂਗੇ $theme-colors
।
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
ਨਕਸ਼ੇ ਤੋਂ ਹਟਾਓ
ਜਾਂ ਕਿਸੇ ਹੋਰ ਨਕਸ਼ੇ ਤੋਂ ਰੰਗਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ $theme-colors
, ਵਰਤੋ map-remove
। ਧਿਆਨ ਰੱਖੋ ਕਿ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਸਾਡੀਆਂ ਲੋੜਾਂ ਅਤੇ ਵਿਕਲਪਾਂ ਦੇ ਵਿਚਕਾਰ ਪਾਉਣਾ ਚਾਹੀਦਾ ਹੈ:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
ਲੋੜੀਂਦੀਆਂ ਕੁੰਜੀਆਂ
ਬੂਟਸਟਰੈਪ ਸਾਸ ਨਕਸ਼ਿਆਂ ਦੇ ਅੰਦਰ ਕੁਝ ਖਾਸ ਕੁੰਜੀਆਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਮੰਨਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਅਤੇ ਵਧਾਇਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸ਼ਾਮਲ ਕੀਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਗਲਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਇੱਕ ਖਾਸ Sass ਨਕਸ਼ੇ ਦੀ ਕੁੰਜੀ ਵਰਤੀ ਜਾ ਰਹੀ ਹੈ।
ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਲਿੰਕਾਂ, ਬਟਨਾਂ ਅਤੇ ਫਾਰਮ ਸਟੇਟਸ ਲਈ primary
, success
, ਅਤੇ danger
ਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। $theme-colors
ਇਹਨਾਂ ਕੁੰਜੀਆਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਨਾਲ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ, ਪਰ ਇਹਨਾਂ ਨੂੰ ਹਟਾਉਣ ਨਾਲ Sass ਕੰਪਾਇਲੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ Sass ਕੋਡ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਪਵੇਗੀ ਜੋ ਉਹਨਾਂ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਫੰਕਸ਼ਨ
ਰੰਗ
ਸਾਡੇ ਕੋਲ ਸਾਸ ਨਕਸ਼ਿਆਂ ਦੇ ਅੱਗੇ , ਥੀਮ ਰੰਗਾਂ ਨੂੰ ਸਟੈਂਡਅਲੋਨ ਵੇਰੀਏਬਲ ਦੇ ਤੌਰ ਤੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
tint-color()
ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਅਤੇ shade-color()
ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਰੰਗਾਂ ਨੂੰ ਹਲਕਾ ਜਾਂ ਗੂੜ੍ਹਾ ਕਰ ਸਕਦੇ ਹੋ । ਇਹ ਫੰਕਸ਼ਨ ਕਾਲੇ ਜਾਂ ਚਿੱਟੇ ਰੰਗਾਂ ਨੂੰ ਮਿਲਾਉਣਗੇ, ਸਾਸ ਦੇ ਮੂਲ lighten()
ਅਤੇ darken()
ਫੰਕਸ਼ਨਾਂ ਦੇ ਉਲਟ ਜੋ ਇੱਕ ਨਿਸ਼ਚਿਤ ਮਾਤਰਾ ਦੁਆਰਾ ਹਲਕਾਪਨ ਨੂੰ ਬਦਲ ਦੇਣਗੇ, ਜੋ ਅਕਸਰ ਲੋੜੀਂਦੇ ਪ੍ਰਭਾਵ ਵੱਲ ਨਹੀਂ ਲੈ ਜਾਂਦਾ।
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
ਅਭਿਆਸ ਵਿੱਚ, ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋਗੇ ਅਤੇ ਰੰਗ ਅਤੇ ਭਾਰ ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਪਾਸ ਕਰੋਗੇ।
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
ਰੰਗ ਵਿਪਰੀਤ
ਰੰਗ ਵਿਪਰੀਤ ਲਈ WCAG 2.0 ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ , ਲੇਖਕਾਂ ਨੂੰ ਬਹੁਤ ਘੱਟ ਅਪਵਾਦਾਂ ਦੇ ਨਾਲ, ਘੱਟੋ-ਘੱਟ 4.5:1 ਦਾ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
ਇੱਕ ਵਾਧੂ ਫੰਕਸ਼ਨ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ ਉਹ ਹੈ ਰੰਗ ਕੰਟਰਾਸਟ ਫੰਕਸ਼ਨ color-contrast
,। ਇਹ ਨਿਸ਼ਚਿਤ ਬੇਸ ਕਲਰ ਦੇ ਅਧਾਰ 'ਤੇ ਇੱਕ ਰੋਸ਼ਨੀ ( ), ਗੂੜ੍ਹਾ ( ) ਜਾਂ ਕਾਲਾ ( ) ਕੰਟਰਾਸਟ ਰੰਗ ਆਪਣੇ ਆਪ ਵਾਪਸ ਕਰਨ ਲਈ ਇੱਕ ਰੰਗ ਸਪੇਸ ਵਿੱਚ ਸਾਪੇਖਿਕ ਪ੍ਰਕਾਸ਼ ਦੇ ਅਧਾਰ ਤੇ ਕੰਟਰਾਸਟ ਥ੍ਰੈਸ਼ਹੋਲਡ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ WCAG 2.0 ਐਲਗੋਰਿਦਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਖਾਸ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਜਾਂ ਲੂਪਸ ਲਈ ਲਾਭਦਾਇਕ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਕਈ ਕਲਾਸਾਂ ਤਿਆਰ ਕਰ ਰਹੇ ਹੋ।sRGB
#fff
#212529
#000
ਉਦਾਹਰਨ ਲਈ, ਸਾਡੇ $theme-colors
ਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਦੇ ਸਵੈਚ ਬਣਾਉਣ ਲਈ:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
ਇਸਦੀ ਵਰਤੋਂ ਇੱਕ ਵਾਰੀ ਵਿਪਰੀਤ ਲੋੜਾਂ ਲਈ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
ਤੁਸੀਂ ਸਾਡੇ ਕਲਰ ਮੈਪ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਇੱਕ ਬੇਸ ਕਲਰ ਵੀ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
ਅਸੀਂ SVG ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਲਈ , ਅਤੇ ਅੱਖਰਾਂ escape-svg
ਤੋਂ ਬਚਣ ਲਈ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ , ਡੇਟਾ URIs ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।<
>
#
escape-svg
ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਜੋੜੋ ਅਤੇ ਘਟਾਓ
ਅਸੀਂ CSS ਫੰਕਸ਼ਨ ਨੂੰ ਸਮੇਟਣ ਲਈ add
ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ । ਇਹਨਾਂ ਫੰਕਸ਼ਨਾਂ ਦਾ ਮੁੱਖ ਉਦੇਸ਼ ਗਲਤੀਆਂ ਤੋਂ ਬਚਣਾ ਹੈ ਜਦੋਂ ਇੱਕ "ਯੂਨਿਟ ਰਹਿਤ" ਮੁੱਲ ਨੂੰ ਸਮੀਕਰਨ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਸਮੀਕਰਨ ਜਿਵੇਂ ਕਿ ਗਣਿਤਿਕ ਤੌਰ 'ਤੇ ਸਹੀ ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਵਾਪਸ ਕਰ ਦੇਵੇਗਾ।subtract
calc
0
calc
calc(10px - 0)
ਉਦਾਹਰਨ ਜਿੱਥੇ ਕੈਲਕ ਵੈਧ ਹੈ:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
ਉਦਾਹਰਨ ਜਿੱਥੇ ਕੈਲਕ ਅਵੈਧ ਹੈ:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
ਮਿਕਸਿਨਸ
ਸਾਡੀ scss/mixins/
ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਮਿਸ਼ਰਣ ਹਨ ਜੋ ਬੂਟਸਟਰੈਪ ਦੇ ਪਾਵਰ ਪਾਰਟਸ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਵੀ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ।
ਰੰਗ ਸਕੀਮਾਂ
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਲਈ ਇੱਕ ਸ਼ਾਰਟਹੈਂਡ ਮਿਕਸਿਨ , , ਅਤੇ ਕਸਟਮ ਰੰਗ ਸਕੀਮਾਂ prefers-color-scheme
ਲਈ ਸਮਰਥਨ ਨਾਲ ਉਪਲਬਧ ਹੈ ।light
dark
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}