ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

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

ಉದಾಹರಣೆ

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

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

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

ಉಪಯುಕ್ತತೆಗಳನ್ನು ಉತ್ಪಾದಿಸುವುದು

v5.1.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರತಿಯೊಂದು ಬಣ್ಣ ವೇರಿಯೇಬಲ್‌ಗೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಒಳಗೊಂಡಿಲ್ಲ , ಆದರೆ ನಮ್ಮ ಯುಟಿಲಿಟಿ APIcolor ಮತ್ತು v5.1.0 ನಲ್ಲಿ ಸೇರಿಸಲಾದ ನಮ್ಮ ವಿಸ್ತೃತ Sass ನಕ್ಷೆಗಳೊಂದಿಗೆ background-colorನೀವೇ ಇವುಗಳನ್ನು ರಚಿಸಬಹುದು.

  1. ಪ್ರಾರಂಭಿಸಲು, ನೀವು ನಮ್ಮ ಕಾರ್ಯಗಳು, ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಂಡಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
  2. map-merge-multiple()ಹೊಸ ನಕ್ಷೆಯಲ್ಲಿ ಬಹು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ವಿಲೀನಗೊಳಿಸಲು ನಮ್ಮ ಕಾರ್ಯವನ್ನು ಬಳಸಿ .
  3. {color}-{level}ವರ್ಗ ಹೆಸರಿನೊಂದಿಗೆ ಯಾವುದೇ ಉಪಯುಕ್ತತೆಯನ್ನು ವಿಸ್ತರಿಸಲು ಈ ಹೊಸ ಸಂಯೋಜಿತ ನಕ್ಷೆಯನ್ನು ವಿಲೀನಗೊಳಿಸಿ .

.text-purple-500ಮೇಲಿನ ಹಂತಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳನ್ನು (ಉದಾ, ) ಉತ್ಪಾದಿಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}ಇದು ಪ್ರತಿ ಬಣ್ಣ ಮತ್ತು ಹಂತಕ್ಕೆ ಹೊಸ ಉಪಯುಕ್ತತೆಗಳನ್ನು ರಚಿಸುತ್ತದೆ . ನೀವು ಯಾವುದೇ ಇತರ ಉಪಯುಕ್ತತೆ ಮತ್ತು ಆಸ್ತಿಗೆ ಅದೇ ರೀತಿ ಮಾಡಬಹುದು.