in English

ಬಣ್ಣ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಮ್ಮ ಶೈಲಿಗಳು ಮತ್ತು ಘಟಕಗಳನ್ನು ಥೀಮ್‌ಗಳ ವ್ಯಾಪಕವಾದ ಬಣ್ಣದ ವ್ಯವಸ್ಥೆಯಿಂದ ಬೆಂಬಲಿಸುತ್ತದೆ. ಇದು ಯಾವುದೇ ಯೋಜನೆಗೆ ಹೆಚ್ಚು ಸಮಗ್ರ ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ವಿಸ್ತರಣೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಥೀಮ್ ಬಣ್ಣಗಳು

scss/_variables.scssಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫೈಲ್‌ನಲ್ಲಿ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಸಾಸ್ ಮ್ಯಾಪ್‌ನಂತೆ ಲಭ್ಯವಿರುವ ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ಸಣ್ಣ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸಲು ನಾವು ಎಲ್ಲಾ ಬಣ್ಣಗಳ ಉಪವಿಭಾಗವನ್ನು ಬಳಸುತ್ತೇವೆ .

ಪ್ರಾಥಮಿಕ

ದ್ವಿತೀಯ

ಯಶಸ್ಸು

ಅಪಾಯ

ಎಚ್ಚರಿಕೆ

ಮಾಹಿತಿ

ಬೆಳಕು

ಕತ್ತಲು

ಈ ಎಲ್ಲಾ ಬಣ್ಣಗಳು ಸಾಸ್ ನಕ್ಷೆಯಾಗಿ ಲಭ್ಯವಿದೆ, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ಈ ಬಣ್ಣಗಳನ್ನು ಹೇಗೆ ಮಾರ್ಪಡಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ನಮ್ಮ ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ಲೂಪ್ ಡಾಕ್ಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ .

ಎಲ್ಲಾ ಬಣ್ಣಗಳು

scss/_variables.scssಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಣ್ಣಗಳು ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಸಾಸ್ ನಕ್ಷೆಯಾಗಿ ಲಭ್ಯವಿದೆ . ಹೆಚ್ಚಿದ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ತಪ್ಪಿಸಲು, ಈ ಪ್ರತಿಯೊಂದು ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ನಾವು ಪಠ್ಯ ಅಥವಾ ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ವರ್ಗಗಳನ್ನು ರಚಿಸುವುದಿಲ್ಲ. ಬದಲಿಗೆ, ನಾವು ಥೀಮ್ ಪ್ಯಾಲೆಟ್‌ಗಾಗಿ ಈ ಬಣ್ಣಗಳ ಉಪವಿಭಾಗವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ .

ನೀವು ಬಣ್ಣಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದಂತೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮರೆಯದಿರಿ. ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ, ನಾವು ಪ್ರತಿಯೊಂದು ಮುಖ್ಯ ಬಣ್ಣಗಳಿಗೆ ಮೂರು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ-ಒಂದು ಸ್ವಾಚ್‌ನ ಪ್ರಸ್ತುತ ಬಣ್ಣಗಳಿಗೆ, ಒಂದು ವಿರುದ್ಧ ಬಿಳಿ ಮತ್ತು ಇನ್ನೊಂದು ಕಪ್ಪು.

$ನೀಲಿ#0d6efd

$ನೀಲಿ-100

$ನೀಲಿ-200

$ನೀಲಿ-300

$ನೀಲಿ-400

$ನೀಲಿ-500

$ನೀಲಿ-600

$ನೀಲಿ-700

$ನೀಲಿ-800

$ನೀಲಿ-900

$ಇಂಡಿಗೊ#6610f2

$ಇಂಡಿಗೊ-100

$ಇಂಡಿಗೊ-200

$ಇಂಡಿಗೊ-300

$ಇಂಡಿಗೊ-400

$ಇಂಡಿಗೊ-500

$ಇಂಡಿಗೊ-600

$ಇಂಡಿಗೊ-700

$ಇಂಡಿಗೋ-800

$ಇಂಡಿಗೋ-900

$ನೇರಳೆ#6f42c1

$ನೇರಳೆ-100

$ನೇರಳೆ-200

$ನೇರಳೆ-300

$ನೇರಳೆ-400

$ನೇರಳೆ-500

$ನೇರಳೆ-600

$ನೇರಳೆ-700

$ನೇರಳೆ-800

$ನೇರಳೆ-900

$ಗುಲಾಬಿ#d63384

$ಗುಲಾಬಿ-100

$ಗುಲಾಬಿ-200

$ಗುಲಾಬಿ-300

$ಗುಲಾಬಿ-400

$ಗುಲಾಬಿ-500

$ಗುಲಾಬಿ-600

$ಗುಲಾಬಿ-700

$ಗುಲಾಬಿ-800

$ಗುಲಾಬಿ-900

$ಕೆಂಪು#dc3545

$ಕೆಂಪು-100

$ಕೆಂಪು-200

$ಕೆಂಪು-300

$ಕೆಂಪು-400

$ಕೆಂಪು-500

$ಕೆಂಪು-600

$ಕೆಂಪು-700

$ಕೆಂಪು-800

$ಕೆಂಪು-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

$ಟೀಲ್#20c997

$ಟೀಲ್-100

$ಟೀಲ್-200

$ಟೀಲ್-300

$teal-400

$ಟೀಲ್-500

$teal-600

$teal-700

$teal-800

$teal-900

$ಸಯಾನ್#0dcaf0

$ಸಯಾನ್-100

$ಸಯಾನ್-200

$ಸಯಾನ್-300

$ಸಯಾನ್-400

$ಸಯಾನ್-500

$ಸಯಾನ್-600

$ಸಯಾನ್-700

$ಸಯಾನ್-800

$ಸಯಾನ್-900

$ ಬೂದು-500#adb5bd

$ಬೂದು-100

$ ಬೂದು-200

$ ಬೂದು-300

$ ಬೂದು-400

$ ಬೂದು-500

$ ಬೂದು-600

$ ಬೂದು-700

$ ಬೂದು-800

$ ಬೂದು-900

$ಕಪ್ಪು#000

$ಬಿಳಿ#fff

ಸಾಸ್ ಕುರಿತು ಟಿಪ್ಪಣಿಗಳು

ಸಾಸ್ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಪ್ರತಿ ಟಿಂಟ್ ಮತ್ತು ಶೇಡ್‌ಗಾಗಿ ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಸ್ಥಿರಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ. ನಾವು ಮಧ್ಯಬಿಂದು ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ (ಉದಾ, $blue-500) ಮತ್ತು ಸಾಸ್‌ನ ಬಣ್ಣ ಕಾರ್ಯದ ಮೂಲಕ ನಮ್ಮ ಬಣ್ಣಗಳನ್ನು ಛಾಯೆಗೊಳಿಸಲು (ಬೆಳಕುಗೊಳಿಸಲು) ಅಥವಾ ನೆರಳು ಮಾಡಲು (ಕಪ್ಪಾಗಿಸಲು) ಕಸ್ಟಮ್ ಬಣ್ಣ ಕಾರ್ಯಗಳನ್ನು ಬಳಸುತ್ತೇವೆ mix().

ಬಳಸುವುದು mix()ಒಂದೇ ಅಲ್ಲ lighten()ಮತ್ತು - ಮೊದಲನೆಯದು darken()ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಬಣ್ಣವನ್ನು ಬಿಳಿ ಅಥವಾ ಕಪ್ಪು ಬಣ್ಣದೊಂದಿಗೆ ಸಂಯೋಜಿಸುತ್ತದೆ, ಆದರೆ ಎರಡನೆಯದು ಪ್ರತಿ ಬಣ್ಣದ ಲಘುತೆಯ ಮೌಲ್ಯವನ್ನು ಮಾತ್ರ ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಈ ಕೋಡ್‌ಪೆನ್ ಡೆಮೊದಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಫಲಿತಾಂಶವು ಹೆಚ್ಚು ಸಂಪೂರ್ಣವಾದ ಬಣ್ಣಗಳ ಸೂಟ್ ಆಗಿದೆ .

ನಮ್ಮ tint-color()ಮತ್ತು shade-color()ಕಾರ್ಯಗಳು mix()ನಮ್ಮ $theme-color-intervalವೇರಿಯೇಬಲ್ ಜೊತೆಗೆ ಬಳಸುತ್ತವೆ, ಇದು ನಾವು ಉತ್ಪಾದಿಸುವ ಪ್ರತಿ ಮಿಶ್ರ ಬಣ್ಣಕ್ಕೆ ಒಂದು ಹಂತದ ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. scss/_functions.scssಸಂಪೂರ್ಣ ಮೂಲ ಕೋಡ್‌ಗಾಗಿ ಮತ್ತು scss/_variables.scssಫೈಲ್‌ಗಳನ್ನು ನೋಡಿ .

ಬಣ್ಣದ ಸಾಸ್ ನಕ್ಷೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಸಾಸ್ ಫೈಲ್‌ಗಳು ಬಣ್ಣಗಳ ಪಟ್ಟಿ ಮತ್ತು ಅವುಗಳ ಹೆಕ್ಸ್ ಮೌಲ್ಯಗಳ ಮೇಲೆ ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ಲೂಪ್ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ಮೂರು ನಕ್ಷೆಗಳನ್ನು ಒಳಗೊಂಡಿವೆ.

$colorsನಮ್ಮ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಮೂಲ ( 500) ಬಣ್ಣಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ
$theme-colorsಎಲ್ಲಾ ಶಬ್ದಾರ್ಥದ ಹೆಸರಿನ ಥೀಮ್ ಬಣ್ಣಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ (ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ)
$graysಎಲ್ಲಾ ಛಾಯೆಗಳು ಮತ್ತು ಬೂದುಬಣ್ಣದ ಛಾಯೆಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ

ಒಳಗೆ scss/_variables.scss, ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಬಣ್ಣ ಅಸ್ಥಿರಗಳು ಮತ್ತು ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಕಾಣುತ್ತೀರಿ. $colorsಸಾಸ್ ನಕ್ಷೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :

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

ಅನೇಕ ಇತರ ಘಟಕಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನವೀಕರಿಸಲು ನಕ್ಷೆಯೊಳಗೆ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ, ತೆಗೆದುಹಾಕಿ ಅಥವಾ ಮಾರ್ಪಡಿಸಿ. ದುರದೃಷ್ಟವಶಾತ್ ಈ ಸಮಯದಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ಘಟಕವು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಭವಿಷ್ಯದ ನವೀಕರಣಗಳು ಇದನ್ನು ಸುಧಾರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತವೆ. ಅಲ್ಲಿಯವರೆಗೆ, ${color}ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸಲು ಯೋಜಿಸಿ.

ಉದಾಹರಣೆ

ನಿಮ್ಮ ಸಾಸ್‌ನಲ್ಲಿ ನೀವು ಇವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

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

ಬಣ್ಣ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಲು ಮತ್ತು ಬಳಸಲು ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳು ಸಹ ಲಭ್ಯವಿದೆ .colorbackground-color500