ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
Check
in English

రంగు

బూట్స్ట్రాప్ మా శైలులు మరియు భాగాలను థీమ్స్ చేసే విస్తృతమైన రంగు వ్యవస్థ ద్వారా మద్దతు ఇస్తుంది. ఇది ఏదైనా ప్రాజెక్ట్ కోసం మరింత సమగ్రమైన అనుకూలీకరణ మరియు పొడిగింపును అనుమతిస్తుంది.

ఈ పేజీలో

థీమ్ రంగులు

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అన్ని బూట్‌స్ట్రాప్ రంగులు Sass వేరియబుల్స్‌గా మరియు ఫైల్‌లో Sass మ్యాప్‌గా అందుబాటులో ఉన్నాయి . పెరిగిన ఫైల్ పరిమాణాలను నివారించడానికి, మేము ఈ వేరియబుల్స్‌లో ప్రతిదానికి టెక్స్ట్ లేదా బ్యాక్‌గ్రౌండ్ కలర్ క్లాస్‌లను సృష్టించము. బదులుగా, మేము థీమ్ పాలెట్ కోసం ఈ రంగుల ఉపసమితిని ఎంచుకుంటాము .

మీరు రంగులను అనుకూలీకరించేటప్పుడు కాంట్రాస్ట్ నిష్పత్తులను పర్యవేక్షించాలని నిర్ధారించుకోండి. దిగువ చూపిన విధంగా, మేము ప్రతి ప్రధాన రంగులకు మూడు కాంట్రాస్ట్ రేషియోలను జోడించాము-ఒకటి స్వచ్ యొక్క ప్రస్తుత రంగులకు, ఒకటి తెలుపు రంగుకు మరియు మరొకటి నలుపుకు వ్యతిరేకంగా.

$నీలం#0d6efd
$నీలం-100
$నీలం-200
$నీలం-300
$నీలం-400
$నీలం-500
$నీలం-600
$నీలం-700
$నీలం-800
$నీలం-900
$ఇండిగో#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
$ఎరుపు#dc3545
$ఎరుపు-100
$ఎరుపు-200
$ఎరుపు-300
$ఎరుపు-400
$ఎరుపు-500
$ఎరుపు-600
$ఎరుపు-700
$ఎరుపు-800
$ఎరుపు-900
$నారింజ#fd7e14
$ నారింజ-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
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$సియాన్#0dcaf0
$సియాన్-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$ బూడిద-500#adb5bd
$ బూడిద-100
$ బూడిద-200
$ బూడిద-300
$ బూడిద-400
$ బూడిద-500
$ బూడిద-600
$ బూడిద-700
$ బూడిద-800
$ బూడిద-900
$నలుపు#000
$తెలుపు#fff

సాస్‌పై గమనికలు

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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

అనేక ఇతర భాగాలలో అవి ఎలా ఉపయోగించబడుతున్నాయో నవీకరించడానికి మ్యాప్‌లో విలువలను జోడించండి, తీసివేయండి లేదా సవరించండి. దురదృష్టవశాత్తు ఈ సమయంలో, ప్రతి భాగం ఈ సాస్ మ్యాప్‌ని ఉపయోగించదు. భవిష్యత్ నవీకరణలు దీన్ని మెరుగుపరచడానికి ప్రయత్నిస్తాయి. అప్పటి వరకు, ${color}వేరియబుల్స్ మరియు ఈ సాస్ మ్యాప్‌ని ఉపయోగించడం గురించి ప్లాన్ చేయండి.

ఉదాహరణ

మీరు మీ సాస్‌లో వీటిని ఎలా ఉపయోగించవచ్చో ఇక్కడ ఉంది:

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

రంగు విలువలను సెట్ చేయడానికి మరియు ఉపయోగించడానికి రంగు మరియు నేపథ్య వినియోగ తరగతులు కూడా అందుబాటులో ఉన్నాయి .colorbackground-color500

యుటిలిటీలను ఉత్పత్తి చేస్తోంది

v5.1.0లో జోడించబడింది

బూట్‌స్ట్రాప్ ప్రతి రంగు వేరియబుల్‌కు సంబంధించిన యుటిలిటీలను కలిగి ఉండదు color, background-colorకానీ మీరు వీటిని మా యుటిలిటీ API మరియు v5.1.0లో జోడించిన మా పొడిగించిన సాస్ మ్యాప్‌లతో మీరే రూపొందించవచ్చు.

  1. ప్రారంభించడానికి, మీరు మా ఫంక్షన్‌లు, వేరియబుల్స్, మిక్సిన్‌లు మరియు యుటిలిటీలను దిగుమతి చేసుకున్నారని నిర్ధారించుకోండి.
  2. map-merge-multiple()కొత్త మ్యాప్‌లో బహుళ సాస్ మ్యాప్‌లను త్వరగా విలీనం చేయడానికి మా ఫంక్షన్‌ని ఉపయోగించండి .
  3. {color}-{level}ఏదైనా యుటిలిటీని తరగతి పేరుతో విస్తరించడానికి ఈ కొత్త కంబైన్డ్ మ్యాప్‌ను విలీనం చేయండి .

.text-purple-500పై దశలను ఉపయోగించి టెక్స్ట్ కలర్ యుటిలిటీలను (ఉదా, ) రూపొందించే ఉదాహరణ ఇక్కడ ఉంది .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}ఇది ప్రతి రంగు మరియు స్థాయికి కొత్త యుటిలిటీలను రూపొందిస్తుంది. మీరు ఏదైనా ఇతర యుటిలిటీ మరియు ఆస్తి కోసం కూడా అదే విధంగా చేయవచ్చు.