ਰੰਗ

ਥੀਮ ਦੇ ਰੰਗ

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 ਨਕਸ਼ਾ ਮਿਲੇਗਾ। ਇੱਥੇ $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
);

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

ਉਦਾਹਰਨ

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

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

ਰੰਗ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਰੰਗ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ colorਅਤੇ background-colorਵਰਤਣ ਲਈ ਵੀ ਉਪਲਬਧ ਹਨ।500

ਸਹੂਲਤਾਂ ਪੈਦਾ ਕਰ ਰਿਹਾ ਹੈ

v5.1.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹਰ ਰੰਗ ਵੇਰੀਏਬਲ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨ, ਪਰ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਾਡੇ ਉਪਯੋਗਤਾ API ਅਤੇ v5.1.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਸਾਡੇ ਵਿਸਤ੍ਰਿਤ Sass ਨਕਸ਼ਿਆਂ ਨਾਲ ਆਪਣੇ ਆਪ ਤਿਆਰ colorਕਰ ਸਕਦੇ ਹੋ ।background-color

1. ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਾਡੇ ਫੰਕਸ਼ਨ, ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ, ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਆਯਾਤ ਕੀਤਾ ਹੈ।
2. map-merge-multiple()ਇੱਕ ਨਵੇਂ ਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ Sass ਨਕਸ਼ਿਆਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਮਿਲਾਉਣ ਲਈ ਸਾਡੇ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
3. {color}-{level}ਕਲਾਸ ਦੇ ਨਾਮ ਨਾਲ ਕਿਸੇ ਵੀ ਉਪਯੋਗਤਾ ਨੂੰ ਵਧਾਉਣ ਲਈ ਇਸ ਨਵੇਂ ਸੰਯੁਕਤ ਨਕਸ਼ੇ ਨੂੰ ਮਿਲਾਓ ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ .text-purple-500ਉਪਰੋਕਤ ਕਦਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਕਸਟ ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਤਿਆਰ ਕਰਦੀ ਹੈ।

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ਇਹ ਹਰ ਰੰਗ ਅਤੇ ਪੱਧਰ ਲਈ ਨਵੀਆਂ .text-{color}-{level}ਉਪਯੋਗਤਾਵਾਂ ਤਿਆਰ ਕਰੇਗਾ। ਤੁਸੀਂ ਕਿਸੇ ਹੋਰ ਉਪਯੋਗਤਾ ਅਤੇ ਜਾਇਦਾਦ ਲਈ ਵੀ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ।