ቀለም
ቡትስትራፕ የእኛን ቅጦች እና አካላት በሚመለከት በሰፊው የቀለም ስርዓት የተደገፈ ነው። ይህ ለማንኛውም ፕሮጀክት የበለጠ አጠቃላይ ማበጀትን እና ማራዘምን ያስችላል።
የገጽታ ቀለሞች
የቀለም መርሃግብሮችን ለመፍጠር አነስ ያለ የቀለም ቤተ-ስዕል ለመፍጠር የሁሉም ቀለሞች ንዑስ ስብስብ እንጠቀማለን፣ እንዲሁም እንደ 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-interval
scss/_functions.scss
scss/_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