ਰੰਗ

ਬੂਟਸਟਰੈਪ ਇੱਕ ਵਿਆਪਕ ਰੰਗ ਪ੍ਰਣਾਲੀ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ ਜੋ ਸਾਡੀ ਸ਼ੈਲੀ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਥੀਮ ਕਰਦਾ ਹੈ। ਇਹ ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਲਈ ਵਧੇਰੇ ਵਿਆਪਕ ਅਨੁਕੂਲਤਾ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਥੀਮ ਦੇ ਰੰਗ

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

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

$ਨੀਲਾ#0d6efd

$ਨੀਲਾ-100

$ਨੀਲਾ-200

$ਨੀਲਾ-300

$ਨੀਲਾ-400

$ਨੀਲਾ-500

$ਨੀਲਾ-600

$ਨੀਲਾ-700

$ਨੀਲਾ-800

$ਨੀਲਾ-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$ਜਾਮਨੀ#6f42c1

ਜਾਮਨੀ-100 ਡਾਲਰ

ਜਾਮਨੀ-200 ਡਾਲਰ

ਜਾਮਨੀ-300 ਡਾਲਰ

ਜਾਮਨੀ-400 ਡਾਲਰ

ਜਾਮਨੀ-500 ਡਾਲਰ

ਜਾਮਨੀ-600 ਡਾਲਰ

ਜਾਮਨੀ-700 ਡਾਲਰ

ਜਾਮਨੀ-800 ਡਾਲਰ

ਜਾਮਨੀ-900 ਡਾਲਰ

$ਗੁਲਾਬੀ#d63384

$ਗੁਲਾਬੀ-100

$ਗੁਲਾਬੀ-200

$ਗੁਲਾਬੀ-300

$ਗੁਲਾਬੀ-400

$ਗੁਲਾਬੀ-500

$ਗੁਲਾਬੀ-600

$ਗੁਲਾਬੀ-700

$ਗੁਲਾਬੀ-800

$ਗੁਲਾਬੀ-900

$ਲਾਲ#dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$ਸੰਤਰੀ#fd7e14

$ਸੰਤਰੀ-100

$ਸੰਤਰੀ-200

$ਸੰਤਰੀ-300

$ਸੰਤਰੀ-400

$ਸੰਤਰੀ-500

$ਸੰਤਰੀ-600

$ਸੰਤਰੀ-700

$ਸੰਤਰੀ-800

$ਸੰਤਰੀ-900

$ਪੀਲਾ#ffc107

$ਪੀਲਾ-100

$ਪੀਲਾ-200

$ਪੀਲਾ-300

$ਪੀਲਾ-400

$ਪੀਲਾ-500

$ਪੀਲਾ-600

$ਪੀਲਾ-700

$ਪੀਲਾ-800

$ਪੀਲਾ-900

$ਹਰਾ#198754

$ਹਰਾ-100

$ਹਰਾ-200

$ਹਰਾ-300

$ਹਰਾ-400

$ਹਰਾ-500

$ਹਰਾ-600

$ਹਰਾ-700

$ਹਰਾ-800

$ਹਰਾ-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ਗ੍ਰੇ-500#adb5bd

$ਗ੍ਰੇ-100

$ਗ੍ਰੇ-200

$ਗ੍ਰੇ-300

$ਗ੍ਰੇ-400

$ਗ੍ਰੇ-500

$ਗ੍ਰੇ-600

$ਗ੍ਰੇ-700

$ਗ੍ਰੇ-800

$ਗ੍ਰੇ-900

$ਕਾਲਾ#000

$ਚਿੱਟਾ#fff

ਸਾਸ 'ਤੇ ਨੋਟਸ

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