रंग

थीम रंग

scss/_variables.scssरंग येवजण्यो तयार करपाखातीर ल्हान रंग पॅलेट तयार करपाक आमी सगळ्या रंगांचो उपसमुह वापरतात, जो Sass चडांत चड आनी Bootstrap च्या फायलीन 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 प्रोग्रामेटिक रितीन व्हेरिएबल तयार करूंक शकना, देखून आमी स्वता दरेक टिंट आनी शेडा खातीर व्हेरिएबल हाताळणी तयार केले. आमी मध्यबिंदू मोल निर्देशीत करतात (देखीक, $blue-500) आनी Sass च्या रंग कार्या वरवीं आमच्या रंगांक टिंट (हळदुवो) वा सावळी (काळो) करपाक सानुकूल रंग कार्यां वापरतात mix().

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

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

रंगीत सास नकाशे

Bootstrap च्या स्रोत Sass फायलींनी तीन नकाशे आसपावीत केल्यात जे तुमकां रंगांची वळेरी आनी तांचीं हेक्स मोलां बेगीन आनी सहजपणान लूप करपाक मदत करतात.

• $colorsआमच्या सगळ्या उपलब्ध बेस ( 500) रंगांची वळेरी दिता
• $theme-colorsसगळ्या अर्थान नांव दिल्ल्या थीम रंगांची वळेरी दिता (सकयल दाखयल्या)
• $graysकरड्या रंगाच्या सगळ्या रंगांची आनी शेड्सांची वळेरी दिता

भितर scss/_variables.scss, तुमकां Bootstrap च्या रंग चड-उणें आनी Sass नकासो मेळटलो. $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

उपयुक्तताय निर्माण करप

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}हाका लागून दरेक रंग आनी पातळे खातीर नवी उपयुक्तताय निर्माण जातली . हेर खंयच्याय उपयुक्तताय आनी मालमत्ते खातीरय तुमी तशें करूंक शकतात.