रङ

विषयवस्तु रङहरू

scss/_variables.scssहामी रङ योजनाहरू उत्पन्न गर्नको लागि सानो रङ प्यालेट सिर्जना गर्न सबै रङहरूको सबसेट प्रयोग गर्छौं, जुन Sass चर र बुटस्ट्र्यापको फाइलमा 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 नक्साको रूपमा उपलब्ध छन्। बढेको फाइल साइजबाट बच्न, हामी यी प्रत्येक चरका लागि पाठ वा पृष्ठभूमि रङ वर्गहरू सिर्जना गर्दैनौं। यसको सट्टा, हामी विषयवस्तु प्यालेटका लागि यी रङहरूको उपसमूह छनौट गर्छौं ।

तपाईंले रंगहरू अनुकूलन गर्दा कन्ट्रास्ट अनुपातहरू निगरानी गर्न निश्चित हुनुहोस्। तल देखाइए अनुसार, हामीले प्रत्येक मुख्य रङमा तीनवटा कन्ट्रास्ट रेसियोहरू थपेका छौँ — एउटा swatch को हालको रङहरूको लागि, एउटा सेतोको विरुद्धमा, र अर्को कालोको विरुद्धमा।

Sass मा नोटहरू

Sass ले प्रोग्रामेटिक रूपमा चरहरू उत्पन्न गर्न सक्दैन, त्यसैले हामीले म्यानुअल रूपमा प्रत्येक टिन्ट र शेडको लागि चरहरू सिर्जना गर्यौं। हामीले मध्यबिन्दु मान (जस्तै, $blue-500) निर्दिष्ट गर्छौं र सासको रङ प्रकार्य मार्फत हाम्रा रङहरूलाई टिन्ट (हल्का) वा छाया (गाढा) गर्न अनुकूलन रङ प्रकार्यहरू प्रयोग गर्छौं mix()।

प्रयोग mix()गर्नु समान छैन lighten()र darken()—पूर्वले तोकिएको रङलाई सेतो वा कालोसँग मिलाउँछ, जबकि पछिल्लोले प्रत्येक रङको हल्कापन मान समायोजन गर्छ। यो CodePen डेमोमा देखाइए अनुसार परिणाम रङहरूको धेरै पूर्ण सुइट हो ।

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

रंग सास नक्सा

बुटस्ट्र्यापको स्रोत सास फाइलहरूले तपाईंलाई छिटो र सजिलैसँग रङहरूको सूची र तिनीहरूको हेक्स मानहरू लुप गर्न मद्दत गर्न तीनवटा नक्साहरू समावेश गर्दछ।

• $colorsहाम्रो सबै उपलब्ध आधार ( 500) रङहरू सूचीबद्ध गर्दछ
• $theme-colorsसबै शब्दार्थ नामक विषयवस्तु रङहरू सूची गर्दछ (तल देखाइएको)
• $graysसबै टिन र खैरो रंगहरूको सूची

भित्र scss/_variables.scss, तपाईंले बुटस्ट्र्यापको रङ चर र Sass नक्सा फेला पार्नुहुनेछ। $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;
}

रङ र पृष्ठभूमिcolor उपयोगिता कक्षाहरू सेटिङ र रङ मानहरू background-colorप्रयोग गर्नका लागि पनि उपलब्ध छन् ।500

उपयोगिताहरू उत्पन्न गर्दै

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}यसले हरेक रंग र स्तरको लागि नयाँ उपयोगिताहरू उत्पन्न गर्नेछ । तपाईं कुनै पनि अन्य उपयोगिता र सम्पत्तीको लागि पनि त्यस्तै गर्न सक्नुहुन्छ।