मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

रंग

बूटस्ट्रॅपाक आमच्या शैलींक आनी घटकांक थीम दिवपी एक विस्तारीत रंग प्रणालीचो समर्थन आसा. हाका लागून खंयच्याय प्रकल्पा खातीर चड व्यापक पसंती आनी विस्तार सक्षम जाता.

थीम रंग

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

रंग पसंतीचे करतना विपरीत प्रमाणांचेर नियंत्रण दवरपाची खात्री करात. सकयल दाखयल्ले प्रमाणें, आमी दरेका मुखेल रंगाक तीन कॉन्ट्रास्ट रेशियो जोडल्यात-एक स्वॅचच्या सद्याच्या रंगां खातीर, एक धव्या आड, आनी एक काळ्या आड.

$निळें रंगाचें# 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
$ हळडुवें-७००
$ हळडुवें-८००
$ हळडुवें-900
$पाचवें# 198754 हें नांव
$ पाचवें-100
$ पाचवें-200
$ पाचवें-300
$ पाचवें-400
$ पाचवें-500
$ पाचवें-600
$ पाचवें-700
$ पाचवें-800
$ पाचवें-900
$टील हें नांव# 20c997 हें नांव
$ टील-100 हें नांव
$ टील-200 हें
$ टील-300 हें
$ टील-400 हें
$ टील-५०० हें
$ टील-600 हें
$ टील-700 हें
$ टील-८०० हें
$ टील-900 हें
$ सायन हें नांव# 0dcaf0 हें नांव
$ सायन-100 चें
$ सायन-200 चें
$ सायन-300 चें
$ सायन-400 चें
$ सायन-500 चें
$ सायन-600 चें
$ सायन-700 चें
$ सायन-800 चें
$ सायन-900 चें
$ राखाडी-500# adb5bd हें नांव
$ राखाडी-100
$ राखाडी-200
$ राखाडी-300
$ राखाडी-400
$ राखाडी-500
$ राखाडी-600
$ राखाडी-700
$ राखाडी-800
$ राखाडी-900
$काळो रंग# 000 हें नांव
$गोरे रंगाचें#fff हें नांव

सासाचेर टिपा

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