रंग

थीम रंग

आम्ही रंग योजना तयार करण्यासाठी लहान रंग पॅलेट तयार करण्यासाठी सर्व रंगांचा उपसंच वापरतो, 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 नकाशा म्हणून उपलब्ध आहेत . फाइल आकार वाढू नये म्हणून, आम्ही या प्रत्येक व्हेरिएबल्ससाठी मजकूर किंवा पार्श्वभूमी रंग वर्ग तयार करत नाही. त्याऐवजी, आम्ही थीम पॅलेटसाठी या रंगांचा उपसंच निवडतो .

तुम्ही रंग सानुकूलित करत असताना कॉन्ट्रास्ट रेशोचे निरीक्षण करण्याचे सुनिश्चित करा. खाली दाखवल्याप्रमाणे, आम्ही प्रत्येक मुख्य रंगात तीन कॉन्ट्रास्ट गुणोत्तर जोडले आहेत—एक स्वॅचच्या सध्याच्या रंगांसाठी, एक पांढऱ्यासाठी आणि एक काळ्या विरुद्ध.

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

युटिलिटी व्युत्पन्न करत आहे

v5.1.0 मध्ये जोडले

बूटस्ट्रॅपमध्ये प्रत्येक कलर व्हेरिएबलसाठी उपयुक्तता colorआणि उपयोगिता समाविष्ट नाहीत , परंतु तुम्ही आमच्या युटिलिटी API आणि v5.1.0 मध्ये जोडलेल्या आमच्या विस्तारित Sass नकाशेसह ते स्वतः तयार करू शकता.background-color

1. सुरू करण्यासाठी, तुम्ही आमची फंक्शन्स, व्हेरिएबल्स, मिक्सिन्स आणि युटिलिटी आयात केल्याची खात्री करा.
2. map-merge-multiple()नवीन नकाशामध्ये एकाधिक Sass नकाशे द्रुतपणे एकत्र करण्यासाठी आमचे कार्य वापरा .
3. {color}-{level}वर्ग नावासह कोणतीही उपयुक्तता वाढवण्यासाठी हा नवीन एकत्रित नकाशा विलीन करा .

येथे एक उदाहरण आहे जे .text-purple-500वरील चरणांचा वापर करून मजकूर रंग उपयुक्तता (उदा. ) व्युत्पन्न करते.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}हे प्रत्येक रंग आणि स्तरासाठी नवीन उपयुक्तता निर्माण करेल . तुम्ही इतर कोणत्याही उपयुक्तता आणि मालमत्तेसाठी देखील असेच करू शकता.