ކުލަ

ތީމް ކުލަތަކެވެ

އަޅުގަނޑުމެން ހުރިހާ ކުލައެއްގެ ސަބްސެޓެއް ބޭނުންކޮށްގެން ކުލަ ސްކީމްތައް އުފެއްދުމަށް ކުޑަ ކުލަ ޕެލެޓެއް އުފައްދަން، އެއީ ސާސް ވެރިއޭބަލްސްގެ ގޮތުގައި ވެސް ލިބެން ހުންނަ އަދި ބޫޓްސްޓްރެޕްގެ 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;
}

ކުލަ އަދި ބެކްގްރައުންޑް ޔުޓިލިޓީ ކްލާސްތައް ވެސް ކުލަ ވެލިއުތައް ސެޓްކޮށް ބޭނުން ކުރުމަށް ލިބެން colorހުރެ އެވެ.background-color500

ޔުޓިލިޓީސް ޖެނެރޭޓް ކުރުން

v5.1.0 ގައި އިތުރުކޮށްފައިވެއެވެ

Bootstrap doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.

1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
2. Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
3. Merge this new combined map to extend any utility with a {color}-{level} class name.

Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.

@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";

This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.