ቀለም

የገጽታ ቀለሞች

የቀለም መርሃግብሮችን ለመፍጠር አነስ ያለ የቀለም ቤተ-ስዕል ለመፍጠር የሁሉም ቀለሞች ንዑስ ስብስብ እንጠቀማለን፣ እንዲሁም እንደ Sass ተለዋዋጭዎች እና የ Sass ካርታ በ Bootstrap scss/_variables.scssፋይል ውስጥ ይገኛል።

እነዚህ ሁሉ ቀለሞች እንደ Sass ካርታ ይገኛሉ $theme-colors።

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

እነዚህን ቀለሞች እንዴት እንደሚቀይሩ የእኛን የ Sass ካርታዎች እና loops ሰነዶች ይመልከቱ ።

ሁሉም ቀለሞች

ሁሉም የ Bootstrap ቀለሞች እንደ Sass ተለዋዋጮች እና scss/_variables.scssበፋይል ውስጥ የ Sass ካርታ ይገኛሉ። የፋይል መጠን መጨመርን ለማስቀረት፣ ለእነዚህ ተለዋዋጮች ለእያንዳንዱ የጽሑፍ ወይም የጀርባ ቀለም ክፍሎችን አንፈጥርም። በምትኩ, የእነዚህን ቀለሞች ክፍል ለገጽታ ቤተ- ስዕል እንመርጣለን .

ቀለሞችን ሲያበጁ የንፅፅር ሬሾን መከታተልዎን ያረጋግጡ። ከታች እንደሚታየው ለእያንዳንዱ ዋና ቀለማት ሶስት ንፅፅር ሬሾን ጨምረናል-አንዱ ለስላቹ ወቅታዊ ቀለሞች፣ አንዱ በነጭ እና አንዱ በጥቁር።

ማስታወሻዎች በሳስ

Sass በፕሮግራማዊ መንገድ ተለዋዋጮችን ማመንጨት ስለማይችል ለእያንዳንዱ ቀለም ተለዋዋጮችን በእጅ ፈጠርን እና እራሳችንን እንጥላለን። የመሃል ነጥብ እሴቱን እንገልፃለን (ለምሳሌ ፣ $blue-500) እና በሳስ ቀለም ተግባር ቀለሞቻችንን ለማቅለም (ለማቅለል) ወይም ለማጨለም (ለማጨልም) ብጁ የቀለም ተግባራትን እንጠቀማለን mix()።

መጠቀም mix()ከ lighten()እና darken()-የቀድሞው የተገለጸውን ቀለም ከነጭ ወይም ጥቁር ጋር ያዋህዳል, የኋለኛው ደግሞ የእያንዳንዱን ቀለም የብርሃን ዋጋ ብቻ ያስተካክላል. ውጤቱ በዚህ CodePen ማሳያ ላይ እንደሚታየው የበለጠ የተሟላ የቀለም ስብስብ ነው ።

የእኛ tint-color()እና ተግባራታችን ከተለዋዋጭ ጋር shade-color()ይጠቀማሉ ፣ ይህም ለምናመርተው ለእያንዳንዱ ድብልቅ ቀለም ደረጃ መቶኛ እሴት ይገልጻል። ለሙሉ ምንጭ ኮድ ፋይሎቹን እና ፋይሎችን ይመልከቱ ።mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

የቀለም Sass ካርታዎች

የ Bootstrap ምንጭ Sass ፋይሎች በፍጥነት እና በቀላሉ የቀለም ዝርዝርን እና የሄክስ እሴቶቻቸውን ለመፈተሽ የሚያግዙ ሶስት ካርታዎችን ያካትታሉ።

• $colorsሁሉንም የእኛን መሠረት ( 500) ቀለሞች ይዘረዝራል
• $theme-colorsሁሉንም በትርጉም የተሰየሙ የገጽታ ቀለሞች ይዘረዝራል (ከታች የሚታየው)
• $graysሁሉንም ቀለሞች እና ግራጫ ጥላዎች ይዘረዝራል

በ ውስጥ scss/_variables.scss፣ የ Bootstrap ቀለም ተለዋዋጮች እና የሳስ ካርታ ያገኛሉ። $colorsየ Sass ካርታ ምሳሌ ይኸውና ፡-

$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}ተለዋዋጮችን እና ይህን የሳስ ካርታ ለመጠቀም እቅድ ያውጡ።

ለምሳሌ

በእርስዎ Sass ውስጥ እነዚህን እንዴት መጠቀም እንደሚችሉ እነሆ፡-

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

የቀለም እና የበስተጀርባ መገልገያ ክፍሎች እንዲሁም የቀለም እሴቶቹን ለማዘጋጀት colorእና background-colorለመጠቀም ይገኛሉ።500

መገልገያዎችን ማመንጨት

በ v5.1.0 ውስጥ ተጨምሯል

ቡትስትራፕ ለእያንዳንዱ የቀለም ተለዋዋጭ መገልገያዎችን አያካትትም color፣ ነገር ግን እነዚህን እራስዎ በእኛ መገልገያ ኤፒአይ እና በ 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}ይህ ለእያንዳንዱ ቀለም እና ደረጃ አዲስ መገልገያዎችን ይፈጥራል . ለሌላ ማንኛውም መገልገያ እና ንብረት እንዲሁ ማድረግ ይችላሉ።