in English

നിറം

ഞങ്ങളുടെ ശൈലികളും ഘടകങ്ങളും തീം ചെയ്യുന്ന വിപുലമായ വർണ്ണ സംവിധാനമാണ് ബൂട്ട്സ്ട്രാപ്പിനെ പിന്തുണയ്ക്കുന്നത്. ഏത് പ്രോജക്റ്റിനും കൂടുതൽ സമഗ്രമായ ഇഷ്‌ടാനുസൃതമാക്കലും വിപുലീകരണവും ഇത് സാധ്യമാക്കുന്നു.

ഈ പേജിൽ

തീം നിറങ്ങൾ

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 മാപ്പുകളും ലൂപ്പ് ഡോക്‌സും പരിശോധിക്കുക .

എല്ലാ നിറങ്ങളും

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

$സിയാൻ-200

$സിയാൻ-300

$സിയാൻ-400

$സിയാൻ-500

$സിയാൻ-600

$സിയാൻ-700

$സിയാൻ-800

$സിയാൻ-900

$ ഗ്രേ-500#adb5bd

$ ഗ്രേ-100

$ ഗ്രേ-200

$ ഗ്രേ-300

$ ഗ്രേ-400

$ ഗ്രേ-500

$ ഗ്രേ-600

$ ഗ്രേ-700

$ ഗ്രേ-800

$ ഗ്രേ-900

$കറുപ്പ്#000

$വെളുപ്പ്#fff

സാസിനെക്കുറിച്ചുള്ള കുറിപ്പുകൾ

സാസിന് പ്രോഗ്രമാറ്റിക്കായി വേരിയബിളുകൾ സൃഷ്ടിക്കാൻ കഴിയില്ല, അതിനാൽ ഓരോ ടിന്റിനും ഷേഡിനും വേണ്ടി ഞങ്ങൾ സ്വയം വേരിയബിളുകൾ സൃഷ്ടിച്ചു. ഞങ്ങൾ മിഡ്‌പോയിന്റ് മൂല്യം (ഉദാ, $blue-500) വ്യക്തമാക്കുകയും Sass-ന്റെ വർണ്ണ ഫംഗ്‌ഷൻ വഴി ഞങ്ങളുടെ വർണ്ണങ്ങൾക്ക് നിറം നൽകുന്നതിനും (ഇളക്കമാക്കുന്നതിനും) ഷേഡ് (കറുക്കുന്നതിനും) ഇഷ്‌ടാനുസൃത വർണ്ണ ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നു mix().

ഉപയോഗിക്കുന്നത് mix()സമാനമല്ല lighten()കൂടാതെ darken()— ആദ്യത്തേത് നിർദ്ദിഷ്ട വർണ്ണത്തെ വെള്ളയോ കറുപ്പോ ഉപയോഗിച്ച് ലയിപ്പിക്കുന്നു, രണ്ടാമത്തേത് ഓരോ നിറത്തിന്റെയും പ്രകാശ മൂല്യം മാത്രം ക്രമീകരിക്കുന്നു. ഈ CodePen ഡെമോയിൽ കാണിച്ചിരിക്കുന്നതുപോലെ , കൂടുതൽ പൂർണ്ണമായ നിറങ്ങളുടെ സ്യൂട്ടാണ് ഫലം .

ഞങ്ങളുടെ വേരിയബിളിനൊപ്പം ഞങ്ങളും tint-color()ഫംഗ്‌ഷനുകളും shade-color()ഉപയോഗിക്കുന്നു , ഇത് ഞങ്ങൾ ഉൽ‌പാദിപ്പിക്കുന്ന ഓരോ മിക്സഡ് നിറത്തിനും ഒരു സ്റ്റെപ്പ് ശതമാനം മൂല്യം വ്യക്തമാക്കുന്നു. മുഴുവൻ സോഴ്സ് കോഡിനായി ഫയലുകളും കാണുക .mix()$theme-color-intervalscss/_functions.scssscss/_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;
}

വർണ്ണ മൂല്യങ്ങൾ സജ്ജീകരിക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനുമായി വർണ്ണ , പശ്ചാത്തല യൂട്ടിലിറ്റി ക്ലാസുകളും ലഭ്യമാണ് .colorbackground-color500