ಬಣ್ಣ

ಥೀಮ್ ಬಣ್ಣಗಳು

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ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಣ್ಣಗಳು ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಸಾಸ್ ನಕ್ಷೆಯಾಗಿ ಲಭ್ಯವಿದೆ . ಹೆಚ್ಚಿದ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ತಪ್ಪಿಸಲು, ನಾವು ಈ ಪ್ರತಿಯೊಂದು ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಪಠ್ಯ ಅಥವಾ ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ವರ್ಗಗಳನ್ನು ರಚಿಸುವುದಿಲ್ಲ. ಬದಲಿಗೆ, ನಾವು ಥೀಮ್ ಪ್ಯಾಲೆಟ್‌ಗಾಗಿ ಈ ಬಣ್ಣಗಳ ಉಪವಿಭಾಗವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ .

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

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

ಸಾಸ್ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಪ್ರತಿ ಟಿಂಟ್ ಮತ್ತು ಶೇಡ್‌ಗಾಗಿ ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಸ್ಥಿರಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ. ನಾವು ಮಧ್ಯಬಿಂದು ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ (ಉದಾ, ) ಮತ್ತು ಸಾಸ್‌ನ ಬಣ್ಣ ಕಾರ್ಯದ $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

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

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