रंग

बूटस्ट्रॅपला आमच्या शैली आणि घटकांची थीम असलेल्या विस्तृत रंग प्रणालीद्वारे समर्थित आहे. हे कोणत्याही प्रकल्पासाठी अधिक व्यापक सानुकूलन आणि विस्तार सक्षम करते.

या पृष्ठावर

थीम रंग

आम्ही रंग योजना तयार करण्यासाठी एक लहान रंग पॅलेट तयार करण्यासाठी सर्व रंगांचा उपसंच वापरतो, Sass व्हेरिएबल्स आणि बूटस्ट्रॅपच्या 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

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$जांभळा#6f42c1

$जांभळा-100

$जांभळा-200

$जांभळा-300

$जांभळा-400

$जांभळा-500

$जांभळा-600

$जांभळा-700

$जांभळा-800

$जांभळा-900

$गुलाबी#d63384

$गुलाबी-100

$गुलाबी-200

$गुलाबी-300

$गुलाबी-400

$गुलाबी-५००

$गुलाबी-600

$गुलाबी-700

$गुलाबी-800

$गुलाबी-900

$लाल#dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$संत्रा#fd7e14

$संत्रा-100

$संत्रा-200

$संत्रा-300

$संत्रा-400

$संत्रा-500

$संत्रा-600

$संत्रा-700

$संत्रा-800

$संत्रा-900

$पिवळा#ffc107

$पिवळा-100

$पिवळा-200

$पिवळा-300

$पिवळा-400

$पिवळा-500

$पिवळा-600

$पिवळा-700

$पिवळा-800

$पिवळा-900

$हिरवा#१९८७५४

$हिरवा-100

$हिरवा-200

$हिरवा-300

$हिरवा-400

$हिरवा-५००

$हिरवा-600

$हिरवा-700

$हिरवा-800

$हिरवा-900

$teal#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

$cyan-800

$cyan-900

$ग्रे-500#adb5bd

$ग्रे-100

$ग्रे-200

$ग्रे-300

$ग्रे-400

$ग्रे-500

$ग्रे-600

$ग्रे-700

$ग्रे-800

$ग्रे-900

$ काळा#000

$पांढरा#fff

Sass वर नोट्स

Sass प्रोग्रॅमॅटिकली व्हेरिएबल्स व्युत्पन्न करू शकत नाही, म्हणून आम्ही प्रत्येक टिंट आणि शेडसाठी स्वतः व्हेरिएबल्स तयार केले. आम्ही मध्यबिंदू मूल्य (उदा., $blue-500) निर्दिष्ट करतो आणि सासच्या mix()कलर फंक्शनद्वारे आमचे रंग टिंट (हलके) किंवा सावली (गडद) करण्यासाठी सानुकूल रंग फंक्शन्स वापरतो.

वापरणे mix()सारखे नसते lighten()आणि darken()— पूर्वीचा निर्दिष्ट रंग पांढरा किंवा काळ्या रंगात मिसळतो, तर नंतरचा प्रत्येक रंगाचे फक्त हलकेपणाचे मूल्य समायोजित करतो. या CodePen डेमोमध्ये दर्शविल्याप्रमाणे , परिणाम रंगांचा अधिक संपूर्ण संच आहे .

आमची tint-color()आणि shade-color()फंक्शन्स mix()आमच्या व्हेरिएबलच्या बाजूने वापरतात $theme-color-interval, जे आम्ही तयार केलेल्या प्रत्येक मिश्रित रंगासाठी चरणबद्ध टक्केवारी मूल्य निर्दिष्ट करते. संपूर्ण स्त्रोत कोडसाठी scss/_functions.scssआणि फाइल्स पहा .scss/_variables.scss

रंग सास नकाशे

बूटस्ट्रॅपच्या स्त्रोत Sass फाइल्समध्ये तीन नकाशे समाविष्ट आहेत जे तुम्हाला रंगांची सूची आणि त्यांची हेक्स मूल्ये द्रुतपणे आणि सहजपणे लूप करण्यात मदत करतात.

$colors500आमच्या सर्व उपलब्ध बेस ( ) रंगांची यादी करते
$theme-colorsसर्व शब्दार्थ नावाच्या थीम रंगांची यादी करते (खाली दर्शविलेले)
$graysसर्व रंगछटा आणि राखाडी छटा दाखवतो

आत scss/_variables.scss, तुम्हाला बूटस्ट्रॅपचे कलर व्हेरिएबल्स आणि सास मॅप मिळेल. $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
);

इतर अनेक घटकांमध्ये ती कशी वापरली जातात ते अद्यतनित करण्यासाठी नकाशामध्ये मूल्ये जोडा, काढा किंवा सुधारा. दुर्दैवाने यावेळी, प्रत्येक घटक हा Sass नकाशा वापरत नाही. भविष्यातील अद्यतने यामध्ये सुधारणा करण्याचा प्रयत्न करतील. तोपर्यंत, ${color}व्हेरिएबल्स आणि हा Sass नकाशा वापरण्याची योजना करा.

उदाहरण

तुम्ही हे तुमच्या Sass मध्ये कसे वापरू शकता ते येथे आहे:

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

रंग मूल्ये सेट करण्यासाठी आणि वापरण्यासाठी रंग आणि पार्श्वभूमी उपयुक्तता वर्ग देखील उपलब्ध आहेत .colorbackground-color500