ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ቀለም

ቡትስትራፕ የእኛን ቅጦች እና አካላት በሚመለከት በሰፊው የቀለም ስርዓት የተደገፈ ነው። ይህ ለማንኛውም ፕሮጀክት የበለጠ አጠቃላይ ማበጀትን እና ማራዘምን ያስችላል።

የገጽታ ቀለሞች

የቀለም መርሃግብሮችን ለመፍጠር አነስ ያለ የቀለም ቤተ-ስዕል ለመፍጠር የሁሉም ቀለሞች ንዑስ ስብስብ እንጠቀማለን፣ እንዲሁም እንደ 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 ካርታ ይገኛሉ። የፋይል መጠን መጨመርን ለማስቀረት፣ ለእነዚህ ተለዋዋጮች ለእያንዳንዱ የጽሑፍ ወይም የጀርባ ቀለም ክፍሎችን አንፈጥርም። በምትኩ, የእነዚህን ቀለሞች ክፍል ለገጽታ ቤተ- ስዕል እንመርጣለን .

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

$ ሰማያዊ#0d6efd
ሰማያዊ - 100 ዶላር
ሰማያዊ - 200 ዶላር
ሰማያዊ - 300 ዶላር
ሰማያዊ - 400 ዶላር
ሰማያዊ - 500 ዶላር
ሰማያዊ - 600 ዶላር
ሰማያዊ - 700 ዶላር
ሰማያዊ - 800 ዶላር
ሰማያዊ - 900 ዶላር
$indigo#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
$ ቀይ#ዲሲ3545
$ ቀይ -100
$ ቀይ -200
ቀይ - 300 ዶላር
ቀይ - 400 ዶላር
ቀይ - 500 ዶላር
ቀይ - 600 ዶላር
ቀይ - 700 ዶላር
ቀይ - 800 ዶላር
ቀይ-900 ዶላር
$ ብርቱካን#ኤፍዲ7e14
ብርቱካን -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 ዶላር
ሻይ - 400 ዶላር
ሻይ - 500 ዶላር
ሻይ - 600 ዶላር
ሻይ - 700 ዶላር
ሻይ - 800 ዶላር
ሻይ - 900 ዶላር
$ ሳይያን#0dcaf0
$ cyan-100
$ cyan-200
ሲያን -300 ዶላር
ሲያን-400 ዶላር
ሲያን -500 ዶላር
ሲያን-600 ዶላር
ሲያን-700 ዶላር
ሲያን-800 ዶላር
ሲያን-900 ዶላር
ግራጫ - 500 ዶላር# adb5bd
$ ግራጫ -100
$ ግራጫ -200
ግራጫ - 300 ዶላር
ግራጫ - 400 ዶላር
ግራጫ - 500 ዶላር
ግራጫ - 600 ዶላር
ግራጫ - 700 ዶላር
ግራጫ - 800 ዶላር
ግራጫ - 900 ዶላር
ጥቁር ዶላር#000
$ ነጭ#ፍፍፍፍ

ማስታወሻዎች በሳስ

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