Color
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss
file.
All these colors are available as a Sass map, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Check out our Sass maps and loops docs for how to modify these colors.
All colors
All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss
file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
సాస్పై గమనికలు
Sass ప్రోగ్రామాటిక్గా వేరియబుల్స్ను రూపొందించదు, కాబట్టి మేము ప్రతి టింట్ మరియు షేడ్ కోసం మాన్యువల్గా వేరియబుల్స్ని సృష్టించాము. మేము మిడ్పాయింట్ విలువను (ఉదా, $blue-500
) నిర్దేశిస్తాము మరియు Sass యొక్క రంగు ఫంక్షన్ ద్వారా మా రంగులను లేతరంగు చేయడానికి (కాంతిపరచడానికి) లేదా నీడను (ముదురు రంగులోకి మార్చడానికి) అనుకూల రంగు ఫంక్షన్లను ఉపయోగిస్తాము 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-color
500