in English

ਥੀਮਿੰਗ ਬੂਟਸਟਰੈਪ

ਆਸਾਨ ਥੀਮਿੰਗ ਅਤੇ ਕੰਪੋਨੈਂਟ ਤਬਦੀਲੀਆਂ ਲਈ ਗਲੋਬਲ ਸਟਾਈਲ ਤਰਜੀਹਾਂ ਲਈ ਸਾਡੇ ਨਵੇਂ ਬਿਲਟ-ਇਨ ਸਾਸ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।

ਜਾਣ-ਪਛਾਣ

ਬੂਟਸਟਰੈਪ 3 ਵਿੱਚ, ਥੀਮਿੰਗ ਨੂੰ ਜਿਆਦਾਤਰ ਘੱਟ, ਕਸਟਮ CSS, ਅਤੇ ਇੱਕ ਵੱਖਰੀ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡਾਂ ਦੁਆਰਾ ਚਲਾਇਆ ਗਿਆ ਸੀ ਜੋ ਅਸੀਂ ਆਪਣੀਆਂ distਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ। ਕੁਝ ਕੋਸ਼ਿਸ਼ਾਂ ਨਾਲ, ਕੋਈ ਵੀ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਛੂਹਣ ਤੋਂ ਬਿਨਾਂ ਬੂਟਸਟਰੈਪ 3 ਦੀ ਦਿੱਖ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੁਬਾਰਾ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕਦਾ ਹੈ। ਬੂਟਸਟਰੈਪ 4 ਇੱਕ ਜਾਣੂ, ਪਰ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਹੁਣ, ਥੀਮਿੰਗ Sass ਵੇਰੀਏਬਲ, Sass ਨਕਸ਼ੇ, ਅਤੇ ਕਸਟਮ CSS ਦੁਆਰਾ ਪੂਰੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ ਕੋਈ ਹੋਰ ਸਮਰਪਿਤ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਗਰੇਡੀਐਂਟ, ਸ਼ੈਡੋ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਜੋੜਨ ਲਈ ਬਿਲਟ-ਇਨ ਥੀਮ ਨੂੰ ਸਮਰੱਥ ਕਰ ਸਕਦੇ ਹੋ।

ਸੱਸ

ਆਪਣੀ ਖੁਦ ਦੀ ਸੰਪੱਤੀ ਪਾਈਪਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ Sass ਨੂੰ ਕੰਪਾਇਲ ਕਰਦੇ ਸਮੇਂ ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਸ਼ਰਣ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਲਾਭ ਲੈਣ ਲਈ ਸਾਡੀ ਸਰੋਤ Sass ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਫਾਈਲ ਬਣਤਰ

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਚੋ। ਸਾਸ ਲਈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੀ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਉਣਾ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਅਤੇ ਵਧਾ ਸਕੋ। ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ 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";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

ਉਸ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਵਿੱਚ ਕਿਸੇ ਵੀ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਸੋਧਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ custom.scss। // Optionalਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਸੈਕਸ਼ਨ ਦੇ ਤਹਿਤ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਜੋੜਨਾ ਵੀ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ । bootstrap.scssਅਸੀਂ ਤੁਹਾਡੇ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਸਾਡੀ ਫਾਈਲ ਤੋਂ ਪੂਰੇ ਆਯਾਤ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ।

ਵੇਰੀਏਬਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ

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

ਤੁਹਾਨੂੰ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ ਵੇਰੀਏਬਲਾਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਮਿਲੇਗੀ scss/_variables.scss। ਕੁਝ ਵੇਰੀਏਬਲ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ null, ਇਹ ਵੇਰੀਏਬਲ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਆਉਟਪੁੱਟ ਨਹੀਂ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ ਤੁਹਾਡੀ ਸੰਰਚਨਾ ਵਿੱਚ ਓਵਰਰਾਈਡ ਨਹੀਂ ਹੁੰਦੇ।

ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡ ਸਾਡੇ ਫੰਕਸ਼ਨਾਂ, ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਮਿਕਸਿਨ ਦੇ ਆਯਾਤ ਕੀਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ ਆਉਣੇ ਚਾਹੀਦੇ ਹਨ, ਪਰ ਬਾਕੀ ਆਯਾਤ ਤੋਂ ਪਹਿਲਾਂ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ npm ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਅਤੇ ਕੰਪਾਇਲ ਕਰਨ ਵੇਲੇ background-colorਅਤੇ colorਲਈ ਬਦਲਦੀ ਹੈ:<body>

@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";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ਹੇਠਲੇ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵੇਰੀਏਬਲ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਦੁਹਰਾਓ।

ਸਾਡੇ ਸਟਾਰਟਰ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਲ npm ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ! ਆਪਣੇ ਖੁਦ ਦੇ npm ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਹੈ ਇਹ ਦੇਖਣ ਲਈ twbs /bootstrap-npm-starter ਟੈਂਪਲੇਟ ਰਿਪੋਜ਼ਟਰੀ ਵੱਲ ਜਾਓ। Sass ਕੰਪਾਈਲਰ, ਆਟੋਪ੍ਰੀਫਿਕਸਰ, ਸਟਾਈਲਿੰਟ, ਪਰਜਸੀਐਸਐਸ, ਅਤੇ ਬੂਟਸਟਰੈਪ ਆਈਕਨ ਸ਼ਾਮਲ ਹਨ।

ਨਕਸ਼ੇ ਅਤੇ ਲੂਪਸ

ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਮੁੱਠੀ ਭਰ Sass ਨਕਸ਼ੇ, ਮੁੱਖ ਮੁੱਲ ਜੋੜੇ ਸ਼ਾਮਲ ਹਨ ਜੋ ਸੰਬੰਧਿਤ CSS ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਆਪਣੇ ਰੰਗਾਂ, ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟਸ, ਅਤੇ ਹੋਰ ਲਈ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। Sass ਵੇਰੀਏਬਲ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਰੇ Sass ਨਕਸ਼ਿਆਂ ਵਿੱਚ !defaultਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਅਤੇ ਓਵਰਰਾਈਡ ਅਤੇ ਵਧਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

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

ਨਕਸ਼ਾ ਸੋਧੋ

ਸਾਡੇ $theme-colorsਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਮੌਜੂਦਾ ਰੰਗ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਲਈ, ਆਪਣੀ ਕਸਟਮ Sass ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਲਿਖਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

ਨਕਸ਼ੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ

ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਰੰਗ $theme-colorsਜੋੜਨ ਲਈ, ਨਵੀਂ ਕੁੰਜੀ ਅਤੇ ਮੁੱਲ ਜੋੜੋ:

$theme-colors: (
  "custom-color": #900
);

ਨਕਸ਼ੇ ਤੋਂ ਹਟਾਓ

ਜਾਂ ਕਿਸੇ ਹੋਰ ਨਕਸ਼ੇ ਤੋਂ ਰੰਗਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ $theme-colors, ਵਰਤੋ map-remove। ਧਿਆਨ ਰੱਖੋ ਕਿ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਸਾਡੀਆਂ ਲੋੜਾਂ ਅਤੇ ਵਿਕਲਪਾਂ ਦੇ ਵਿਚਕਾਰ ਪਾਉਣਾ ਚਾਹੀਦਾ ਹੈ:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

ਲੋੜੀਂਦੀਆਂ ਕੁੰਜੀਆਂ

ਬੂਟਸਟਰੈਪ ਸਾਸ ਨਕਸ਼ਿਆਂ ਦੇ ਅੰਦਰ ਕੁਝ ਖਾਸ ਕੁੰਜੀਆਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਮੰਨਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਅਤੇ ਵਧਾਇਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸ਼ਾਮਲ ਕੀਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਗਲਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਇੱਕ ਖਾਸ Sass ਨਕਸ਼ੇ ਦੀ ਕੁੰਜੀ ਵਰਤੀ ਜਾ ਰਹੀ ਹੈ।

ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਲਿੰਕਾਂ, ਬਟਨਾਂ ਅਤੇ ਫਾਰਮ ਸਟੇਟਸ ਲਈ primary, success, ਅਤੇ dangerਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। $theme-colorsਇਹਨਾਂ ਕੁੰਜੀਆਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਨਾਲ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ, ਪਰ ਇਹਨਾਂ ਨੂੰ ਹਟਾਉਣ ਨਾਲ Sass ਕੰਪਾਇਲੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕ��ੀਆਂ ਹਨ। ਇਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ Sass ਕੋਡ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਪਵੇਗੀ ਜੋ ਉਹਨਾਂ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਫੰਕਸ਼ਨ

ਬੂਟਸਟਰੈਪ ਕਈ Sass ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਆਮ ਥੀਮਿੰਗ ਲਈ ਸਿਰਫ ਇੱਕ ਸਬਸੈੱਟ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਅਸੀਂ ਰੰਗ ਦੇ ਨਕਸ਼ਿਆਂ ਤੋਂ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਤਿੰਨ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ਇਹ ਤੁਹਾਨੂੰ Sass ਨਕਸ਼ੇ ਤੋਂ ਇੱਕ ਰੰਗ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ v3 ਤੋਂ ਇੱਕ ਰੰਗ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ।

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

ਸਾਡੇ ਕੋਲ ਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਦੇ ਇੱਕ ਖਾਸ ਪੱਧਰ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਫੰਕਸ਼ਨ ਵੀ ਹੈ। $theme-colorsਨਕਾਰਾਤਮਕ ਪੱਧਰ ਦੇ ਮੁੱਲ ਰੰਗ ਨੂੰ ਹਲਕਾ ਕਰ ਦੇਣਗੇ, ਜਦੋਂ ਕਿ ਉੱਚ ਪੱਧਰ ਗੂੜ੍ਹੇ ਹੋ ਜਾਣਗੇ।

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

ਅਭਿਆਸ ਵਿੱਚ, ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋਗੇ ਅਤੇ ਦੋ ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਪਾਸ ਕਰੋਗੇ: ਰੰਗ ਦਾ ਨਾਮ $theme-colors(ਉਦਾਹਰਨ ਲਈ, ਪ੍ਰਾਇਮਰੀ ਜਾਂ ਖ਼ਤਰਾ) ਅਤੇ ਇੱਕ ਸੰਖਿਆਤਮਕ ਪੱਧਰ।

.custom-element {
  color: theme-color-level(primary, -10);
}

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

ਰੰਗ ਵਿਪਰੀਤ

ਇੱਕ ਵਾਧੂ ਫੰਕਸ਼ਨ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ ਉਹ ਹੈ ਰੰਗ ਕੰਟਰਾਸਟ ਫੰਕਸ਼ਨ color-yiq,। ਇਹ YIQ ਕਲਰ ਸਪੇਸ ਦੀ ਵਰਤੋਂ ਨਿਸ਼ਚਿਤ ਬੇਸ ਕਲਰ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੇ ਆਪ ਇੱਕ ਹਲਕਾ ( #fff) ਜਾਂ ਗੂੜ੍ਹਾ ( #111) ਕੰਟਰਾਸਟ ਰੰਗ ਵਾਪਸ ਕਰਨ ਲਈ ਕਰਦਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਖਾਸ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਜਾਂ ਲੂਪਸ ਲਈ ਲਾਭਦਾਇਕ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਕਈ ਕਲਾਸਾਂ ਤਿਆਰ ਕਰ ਰਹੇ ਹੋ।

ਉਦਾਹਰਨ ਲਈ, ਸਾਡੇ $theme-colorsਨਕਸ਼ੇ ਤੋਂ ਰੰਗ ਦੇ ਸਵੈਚ ਬਣਾਉਣ ਲਈ:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

ਇਸਦੀ ਵਰਤੋਂ ਇੱਕ ਵਾਰੀ ਵਿਪਰੀਤ ਲੋੜਾਂ ਲਈ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

ਤੁਸੀਂ ਸਾਡੇ ਕਲਰ ਮੈਪ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਇੱਕ ਬੇਸ ਕਲਰ ਵੀ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

ਅਸੀਂ SVG ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਲਈ , ਅਤੇ ਅੱਖਰਾਂ escape-svgਤੋਂ ਬਚਣ ਲਈ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। IE ਵਿੱਚ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਇਹਨਾਂ ਅੱਖਰਾਂ ਨੂੰ ਬਚਣ ਦੀ ਲੋੜ ਹੈ। ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ , ਡੇਟਾ URIs ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।<>#escape-svg

ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਜੋੜੋ ਅਤੇ ਘਟਾਓ

ਅਸੀਂ CSS ਫੰਕਸ਼ਨ ਨੂੰ ਸਮੇਟਣ ਲਈ addਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ । ਇਹਨਾਂ ਫੰਕਸ਼ਨਾਂ ਦਾ ਮੁੱਖ ਉਦੇਸ਼ ਗਲਤੀਆਂ ਤੋਂ ਬਚਣਾ ਹੈ ਜਦੋਂ ਇੱਕ "ਯੂਨਿਟ ਰਹਿਤ" ਮੁੱਲ ਨੂੰ ਸਮੀਕਰਨ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਸਮੀਕਰਨ ਜਿਵੇਂ ਕਿ ਗਣਿਤਿਕ ਤੌਰ 'ਤੇ ਸਹੀ ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਵਾਪਸ ਕਰ ਦੇਵੇਗਾ।subtractcalc0calccalc(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);
}

Sass ਵਿਕਲਪ

ਸਾਡੀ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ ਫਾਈਲ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਨਵੇਂ $enable-*Sass ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਗਲੋਬਲ CSS ਤਰਜੀਹਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਟੌਗਲ ਕਰੋ। ਇੱਕ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ ਅਤੇ npm run testਲੋੜ ਅਨੁਸਾਰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ।

scss/_variables.scssਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀ ਫਾਈਲ ਵਿੱਚ ਮੁੱਖ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਲਈ ਇਹਨਾਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਲੱਭ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ।

ਵੇਰੀਏਬਲ ਮੁੱਲ ਵਰਣਨ
$spacer 1rem(ਡਿਫੌਲਟ), ਜਾਂ ਕੋਈ ਮੁੱਲ > 0 ਸਾਡੀਆਂ ਸਪੇਸਰ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਮੈਟਿਕ ਤੌਰ 'ਤੇ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸਪੇਸਰ ਮੁੱਲ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ।
$enable-rounded true(ਡਿਫੌਲਟ) ਜਾਂfalse border-radiusਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-shadows trueਜਾਂ false(ਮੂਲ) box-shadowਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸਜਾਵਟੀ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। box-shadowਫੋਕਸ ਅਵਸਥਾਵਾਂ ਲਈ ਵਰਤੇ ਗਏ s ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ ।
$enable-gradients trueਜਾਂ false(ਮੂਲ) background-imageਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਸਟਾਈਲ ਰਾਹੀਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰੇਡੀਐਂਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-transitions true(ਡਿਫੌਲਟ) ਜਾਂfalse transitionਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ s ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-prefers-reduced-motion-media-query true(ਡਿਫੌਲਟ) ਜਾਂfalse prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ , ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਦੇ ਬ੍ਰਾਊਜ਼ਰ/ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ ਤਰਜੀਹਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਕੁਝ ਐਨੀਮੇਸ਼ਨਾਂ/ਪਰਿਵਰਤਨ ਨੂੰ ਦਬਾਉਂਦੀ ਹੈ।
$enable-hover-media-query trueਜਾਂ false(ਮੂਲ) ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ
$enable-grid-classes true(ਡਿਫੌਲਟ) ਜਾਂfalse ਗਰਿੱਡ ਸਿਸਟਮ (ਜਿਵੇਂ ਕਿ, .container, .row, .col-md-1, ਆਦਿ) ਲਈ CSS ਕਲਾਸਾਂ ਬਣਾਉਣ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-caret true(ਡਿਫੌਲਟ) ਜਾਂfalse 'ਤੇ ਸੂਡੋ ਐਲੀਮੈਂਟ ਕੈਰੇਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ .dropdown-toggle।
$enable-pointer-cursor-for-buttons true(ਡਿਫੌਲਟ) ਜਾਂfalse ਗੈਰ-ਅਯੋਗ ਬਟਨ ਤੱਤਾਂ ਵਿੱਚ "ਹੱਥ" ਕਰਸਰ ਸ਼ਾਮਲ ਕਰੋ।
$enable-print-styles true(ਡਿਫੌਲਟ) ਜਾਂfalse ਪ੍ਰਿੰਟਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-responsive-font-sizes trueਜਾਂ false(ਮੂਲ) ਜਵਾਬਦੇਹ ਫੌਂਟ ਆਕਾਰਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ ।
$enable-validation-icons true(ਡਿਫੌਲਟ) ਜਾਂfalse background-imageਪ੍ਰਮਾਣਿਕਤਾ ਸਥਿਤੀਆਂ ਲਈ ਟੈਕਸਟੁਅਲ ਇਨਪੁਟਸ ਅਤੇ ਕੁਝ ਕਸਟਮ ਫਾਰਮਾਂ ਦੇ ਅੰਦਰ ਆਈਕਾਨਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
$enable-deprecation-messages true(ਡਿਫੌਲਟ) ਜਾਂfalse ਕਿਸੇ ਵੀ ਬਰਤਰਫ਼ ਮਿਕਸਿਨ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਸੈੱਟ ਕਰੋ falseਜੋ ਵਿੱਚ ਹਟਾਉਣ ਦੀ ਯੋਜਨਾ ਹੈ v5।

ਰੰਗ

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

ਸਾਰੇ ਰੰਗ

ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਉਪਲਬਧ ਸਾਰੇ ਰੰਗ, Sass ਵੇਰੀਏਬਲ ਅਤੇ scss/_variables.scssਫਾਈਲ ਵਿੱਚ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਉਪਲਬਧ ਹਨ। ਇਸ ਨੂੰ ਵਾਧੂ ਸ਼ੇਡਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਅਗਲੀਆਂ ਛੋਟੀਆਂ ਰੀਲੀਜ਼ਾਂ ਵਿੱਚ ਵਧਾਇਆ ਜਾਵੇਗਾ, ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਕੀਤੇ ਗ੍ਰੇਸਕੇਲ ਪੈਲੇਟ ਵਾਂਗ।

$ਨੀਲਾ #007bff
$indigo #6610f2
$ਜਾਮਨੀ #6f42c1
$ਗੁਲਾਬੀ #e83e8c
$ਲਾਲ #dc3545
$ਸੰਤਰੀ #fd7e14
$ਪੀਲਾ #ffc107
$ਹਰਾ #28a745
$teal #20c997
$cyan #17a2b8

ਇੱਥੇ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਸਾਸ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹੋ:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ਰੰਗ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਸੈਟਿੰਗਾਂ ਲਈ ਵੀ ਉਪਲਬਧ ਹਨ colorਅਤੇ background-color.

ਭਵਿੱਖ ਵਿੱਚ, ਅਸੀਂ ਹਰੇਕ ਰੰਗ ਦੇ ਸ਼ੇਡਾਂ ਲਈ Sass ਨਕਸ਼ੇ ਅਤੇ ਵੇਰੀਏਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਟੀਚਾ ਰੱਖਾਂਗੇ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਹੇਠਾਂ ਗ੍ਰੇਸਕੇਲ ਰੰਗਾਂ ਨਾਲ ਕੀਤਾ ਹੈ।

ਥੀਮ ਦੇ ਰੰਗ

scss/_variables.scssਅਸੀਂ ਰੰਗ ਸਕੀਮਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਛੋਟਾ ਰੰਗ ਪੈਲਅਟ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਰੰਗਾਂ ਦੇ ਇੱਕ ਸਬਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਬੂਟਸਟਰੈਪ ਦੀ ਫਾਈਲ ਵਿੱਚ Sass ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਵੀ ਉਪਲਬਧ ਹੈ।

$ਪ੍ਰਾਇਮਰੀ #007bff
$ਸੈਕੰਡਰੀ #6c757d
$ਸਫਲਤਾ #28a745
$ਖ਼ਤਰਾ #dc3545
$ਚੇਤਾਵਨੀ #ffc107
$ਜਾਣਕਾਰੀ #17a2b8
$ਲਾਈਟ #f8f9fa
$ਗੂੜ੍ਹਾ #343a40

ਸਲੇਟੀ

ਸਲੇਟੀ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਸੈੱਟ ਅਤੇ scss/_variables.scssਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਲੇਟੀ ਦੇ ਇਕਸਾਰ ਸ਼ੇਡ ਲਈ ਇੱਕ Sass ਨਕਸ਼ਾ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ "ਠੰਢੇ ਸਲੇਟੀ" ਹਨ, ਜੋ ਨਿਰਪੱਖ ਸਲੇਟੀ ਦੀ ਬਜਾਏ ਇੱਕ ਸੂਖਮ ਨੀਲੇ ਟੋਨ ਵੱਲ ਝੁਕਦੇ ਹਨ।

$ਗ੍ਰੇ-100 #f8f9fa
$ਗ੍ਰੇ-200 #e9ecef
$ਗ੍ਰੇ-300 #dee2e6
$ਗ੍ਰੇ-400 #ced4da
$ਗ੍ਰੇ-500 #adb5bd
$ਗ੍ਰੇ-600 #6c757d
$ਗ੍ਰੇ-700 #495057
$ਗ੍ਰੇ-800 #343a40
$ਗ੍ਰੇ-900 #212529

ਦੇ ਅੰਦਰ scss/_variables.scss, ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਰੰਗ ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ਾ ਮਿਲੇਗਾ। ਇੱਥੇ $colorsSass ਨਕਸ਼ੇ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:

$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
) !default;

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

ਕੰਪੋਨੈਂਟਸ

ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸੇ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ @eachਲੂਪਾਂ ਨਾਲ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਜੋ ਇੱਕ Sass ਨਕਸ਼ੇ ਉੱਤੇ ਦੁਹਰਾਉਂਦੀਆਂ ਹਨ। ਇਹ ਸਾਡੇ ਦੁਆਰਾ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਦੇ ਰੂਪਾਂ ਨੂੰ $theme-colorsਤਿਆਰ ਕਰਨ ਅਤੇ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਜਵਾਬਦੇਹ ਰੂਪਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਹਨਾਂ Sass ਨਕਸ਼ਿਆਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹੋ ਅਤੇ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਹਨਾਂ ਲੂਪਸ ਵਿੱਚ ਆਪਣੇ ਆਪ ਹੀ ਆਪਣੇ ਬਦਲਾਵਾਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਦੇਖੋਗੇ।

ਸੋਧਕ

ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਭਾਗ ਬੇਸ-ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਪਹੁੰਚ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਟਾਈਲਿੰਗ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬੇਸ ਕਲਾਸ (ਉਦਾਹਰਨ ਲਈ, .btn) ਵਿੱਚ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਸ਼ੈਲੀ ਦੀਆਂ ਭਿੰਨਤਾਵਾਂ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਤੱਕ ਸੀਮਤ ਹੁੰਦੀਆਂ ਹਨ .btn-danger। ਇਹ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ $theme-colorsਨਕਸ਼ੇ ਤੋਂ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਸਾਡੀਆਂ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਸੰਖਿਆ ਅਤੇ ਨਾਮ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕੇ।

ਇੱਥੇ ਦੋ ਉਦਾਹਰਣਾਂ ਹਨ ਕਿ ਅਸੀਂ ਕੰਪੋਨੈਂਟ ਅਤੇ ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ $theme-colorsਨੂੰ ਮੋਡੀਫਾਇਰ ਬਣਾਉਣ ਲਈ ਨਕਸ਼ੇ ਉੱਤੇ ਕਿਵੇਂ ਲੂਪ ਕਰਦੇ ਹਾਂ।.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ਜਵਾਬਦੇਹ

ਇਹ ਸੱਸ ਲੂਪਸ ਰੰਗ ਦੇ ਨਕਸ਼ਿਆਂ ਤੱਕ ਸੀਮਿਤ ਨਹੀਂ ਹਨ, ਜਾਂ ਤਾਂ. ਤੁਸੀਂ ਆਪਣੇ ਭਾਗਾਂ ਜਾਂ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਲਓ ਜਿੱਥੇ ਅਸੀਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਦੇ ਨਾਲ ਸਾਸ ਮੈਪ @eachਲਈ ਇੱਕ ਲੂਪ ਨੂੰ ਮਿਲਾਉਂਦੇ ਹਾਂ।$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ਜੇਕਰ ਤੁਹਾਨੂੰ ਆਪਣੇ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਹੈ $grid-breakpoints, ਤਾਂ ਤੁਹਾਡੀਆਂ ਤਬਦੀਲੀਆਂ ਉਸ ਨਕਸ਼ੇ 'ਤੇ ਦੁਹਰਾਉਣ ਵਾਲੇ ਸਾਰੇ ਲੂਪਸ 'ਤੇ ਲਾਗੂ ਹੋਣਗੀਆਂ।

CSS ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਇਸਦੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਲਗਭਗ ਦੋ ਦਰਜਨ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਵੇਰੀਏਬਲ) ਸ਼ਾਮਲ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇੰਸਪੈਕਟਰ, ਕੋਡ ਸੈਂਡਬੌਕਸ, ਜਾਂ ਆਮ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਸਾਡੇ ਥੀਮ ਰੰਗ, ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਪ੍ਰਾਇਮਰੀ ਫੌਂਟ ਸਟੈਕ ਵਰਗੇ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਮੁੱਲਾਂ ਤੱਕ ਆਸਾਨ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

ਉਪਲਬਧ ਵੇਰੀਏਬਲ

ਇੱਥੇ ਵੇਰੀਏਬਲ ਹਨ ਜੋ ਅਸੀਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ (ਨੋਟ ਕਰੋ ਕਿ :rootਲੋੜੀਂਦਾ ਹੈ)। ਉਹ ਸਾਡੀ _root.scssਫਾਈਲ ਵਿੱਚ ਸਥਿਤ ਹਨ।

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ਉਦਾਹਰਨਾਂ

CSS ਵੇਰੀਏਬਲ ਸਾਸ ਦੇ ਵੇਰੀਏਬਲਾਂ ਲਈ ਸਮਾਨ ਲਚਕਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ, ਪਰ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸੇਵਾ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਸੰਕਲਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ। ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਸਾਡੇ ਪੰਨੇ ਦੇ ਫੌਂਟ ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਨੂੰ ਰੀਸੈਟ ਕਰ ਰਹੇ ਹਾਂ।

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੇਰੀਏਬਲ

ਜਦੋਂ ਕਿ ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਸਾਡੇ CSS ਵੇਰੀਏਬਲਾਂ ਵਿੱਚ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤਾ ਸੀ (ਉਦਾਹਰਨ ਲਈ, --breakpoint-md), ਇਹ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ , ਪਰ ਉਹਨਾਂ ਨੂੰ ਅਜੇ ਵੀ ਮੀਡੀਆ ਸਵਾਲਾਂ ਵਿੱਚ ਨਿਯਮਾਂ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੇਰੀਏਬਲ ਬੈਕਵਰਡ ਅਨੁਕੂਲਤਾ ਲਈ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਰਹਿੰਦੇ ਹਨ, ਬਸ਼ਰਤੇ ਉਹਨਾਂ ਨੂੰ JavaScript ਦੁਆਰਾ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਖਾਸ ਵਿੱਚ ਹੋਰ ਜਾਣੋ ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ਅਤੇ ਇੱਥੇ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਸਮਰਥਿਤ ਹੈ:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}