मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

वर्णं

Bootstrap एकेन विस्तृतेन वर्णप्रणाल्या समर्थितः अस्ति यत् अस्माकं शैल्याः घटकान् च विषयान् स्थापयति । एतेन कस्यापि परियोजनायाः कृते अधिकं व्यापकं अनुकूलनं विस्तारं च सक्षमं भवति ।

विषयवर्णाः

वयं सर्वेषां वर्णानाम् उपसमूहस्य उपयोगं कुर्मः यत् वर्णयोजनानि जनयितुं लघुतरं वर्णपैलेट् निर्मातुं शक्नुमः, यत् Sass चररूपेण अपि उपलभ्यते तथा च Bootstrap इत्यस्य scss/_variables.scssसञ्चिकायां Sass map इति ।

प्राथमिक
गौणम्
सफलता
संकट
चेतवानी
इन्फो
प्रकाशः
तिमिर

एते सर्वे वर्णाः सास् मानचित्ररूपेण उपलभ्यन्ते, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

एतेषां वर्णानाम् परिवर्तनं कथं करणीयम् इति ज्ञातुं अस्माकं Sass maps and loops docs पश्यन्तु ।

सर्वे वर्णाः

सर्वे Bootstrap वर्णाः Sass चररूपेण तथा च scss/_variables.scssसञ्चिकायां Sass map इति उपलभ्यन्ते । सञ्चिकायाः ​​आकारस्य वर्धनं परिहरितुं वयं एतेषां प्रत्येकस्य चरस्य कृते text अथवा background color classes न निर्मामः । अपि तु, वयं theme palette कृते एतेषां वर्णानाम् उपसमूहं चिनोमः ।

यथा यथा भवन्तः वर्णानाम् अनुकूलनं कुर्वन्ति तथा विपरीततानुपातानाम् अवलोकनं अवश्यं कुर्वन्तु । यथा अधः दर्शितं, वयं प्रत्येकस्मिन् मुख्यवर्णे त्रीणि विपरीततानुपाताः योजितवन्तः-एकं स्वाच् वर्तमानवर्णानां कृते, एकं श्वेतस्य विरुद्धं, एकं कृष्णवर्णस्य विरुद्धम्

$नीलम्# 0d6efd
$नील-१००
$नील-२००
$नील-३००
$नील-४००
$नील-५००
$नील-६००
$नील-७००
$नील-८००
$ नील-900
$इण्डिगो# 6610f2
$नील-१००
$नील-२००
$नील-३००
$नील-४००
$नील-५००
$नील-६००
$नील-७००
$नील-८००
$नील-९००
$बैंगनी# 6f42c1
$बैंगनी-१००
$बैंगनी-२००
$बैंगनी-300
$बैंगनी-४००
$बैंगनी-५००
$ बैंगनी-600
$ बैंगनी-७००
$ बैंगनी-800
$ बैंगनी-900
$गुलाबी# घ६३३८४
$गुलाबी-१००
$गुलाबी-२००
$गुलाबी-३००
$गुलाबी-४००
$गुलाबी-५००
$गुलाबी-६००
$गुलाबी-७००
$गुलाबी-८००
$ गुलाबी-900
$लालः# dc3545 इति
$लाल-१००
$लाल-२००
$लाल-३००
$लाल-४००
$लाल-५००
$लाल-६००
$लाल-७००
$लाल-८००
$लाल-९००
$नारंगी# fd7e14 इति
$नारङ्ग-१००
$नारङ्ग-२००
$नारङ्ग-३००
$नारंगी-४००
$नारङ्ग-५००
$नारंगी-६००
$नारंगी-७००
$नारंगी-८००
$ नारंगी-९००
$पीतम्# ffc107
$पीत-१००
$पीत-२००
$पीत-३००
$पीत-४००
$पीत-५००
$पीत-६००
$पीत-७००
$पीत-८००
$पीत-९००
$हरिद्रा# 198754
$ हरित-१००
$ हरित-२००
$ हरित-300
$ हरित-४००
$ हरित-५००
$ हरित-६००
$ हरित-७००
$ हरित-८००
$ हरित-900
$टील# २०ग९९७
$टील-१००
$टील-२००
$टील-३००
$टील-४००
$टील-५००
$टील-६००
$टील-७००
$टील-८००
$टील-९००
$सियान्# 0dcaf0
$सियान-१००
$सियान-२००
$सियान-३००
$सियान-४००
$सियान-५००
$ सियान-६००
$सियान-७००
$ सियान-८००
$ सियान-900
$ धूसर-५००# adb5bd
$ धूसर-100
$ धूसर-200
$ धूसर-300
$ धूसर-४००
$ धूसर-५००
$ धूसर-600
$ धूसर-७००
$ ग्रे-८००
$ धूसर-900
$कृष्णः# 000
$शुक्लः# fff

सस्स् पर टिप्पणियाँ

Sass प्रोग्रामेटिकरूपेण वेरियेबल् जनयितुं न शक्नोति, अतः वयं स्वयमेव प्रत्येकस्य टिण्ट् तथा शेड् इत्यस्य कृते वैरिएबल्स् मैन्युअल् रूपेण निर्मितवन्तः । वयं midpoint value (eg, $blue-500) निर्दिशामः तथा च Sass इत्यस्य color function इत्यस्य माध्यमेन अस्माकं colors tint (lighten) अथवा shade (darken) कर्तुं custom color functions इत्यस्य उपयोगं कुर्मः mix()

प्रयोगः mix()न समानः lighten()तथा darken()—पूर्वः निर्दिष्टवर्णं श्वेतेन कृष्णेन वा मिश्रयति, उत्तरं तु केवलं प्रत्येकस्य वर्णस्य लघुतामूल्यं समायोजयति । परिणामः वर्णानाम् एकः बहु अधिकः सम्पूर्णः सूटः अस्ति, यथा अस्मिन् CodePen डेमो मध्ये दर्शितम् अस्ति

अस्माकं tint-color()तथा shade-color()कार्याणि mix()अस्माकं चरस्य पार्श्वे उपयुज्यन्ते $theme-color-interval, यत् वयं उत्पादितस्य प्रत्येकस्य मिश्रितवर्णस्य कृते एकं चरणबद्धं प्रतिशतमूल्यं निर्दिशति । scss/_functions.scssपूर्णस्रोतसङ्केतार्थं and scss/_variables.scssसञ्चिकाः पश्यन्तु ।

रंग Sass मानचित्र

Bootstrap इत्यस्य स्रोत Sass सञ्चिकासु त्रीणि मानचित्राणि सन्ति येन भवन्तः शीघ्रं सुलभतया च वर्णानाम् एकां सूचीं तेषां हेक्स मूल्यानि च लूप् कर्तुं साहाय्यं कुर्वन्ति ।

  • $colorsअस्माकं सर्वेषां उपलब्धानां आधार ( 500) वर्णानाम् सूचीं करोति
  • $theme-colorsसर्वान् शब्दार्थनामकविषयवर्णान् सूचीबद्धं करोति (अधः दर्शितम्) ।
  • $graysधूसरस्य सर्वाणि टिन्ट्-छायानि च सूचीबद्धानि करोति

, इत्यस्य अन्तः scss/_variables.scssभवन्तः Bootstrap इत्यस्य color variables तथा Sass map इत्येतत् प्राप्नुवन्ति । $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
);

अन्येषु बह्वीषु घटकेषु तेषां उपयोगः कथं भवति इति अद्यतनीकर्तुं नक्शे अन्तः मूल्यानि योजयन्तु, निष्कासयन्तु, परिवर्तयन्तु वा । दुर्भाग्येन अस्मिन् समये प्रत्येकं घटकं एतस्य Sass मानचित्रस्य उपयोगं न करोति । भविष्ये अद्यतनसूचनानि अस्मिन् सुधारयितुम् प्रयतन्ते। तावत्पर्यन्तं ${color}चरानाम् अस्य च Sass map इत्यस्य उपयोगं कर्तुं योजनां कुर्वन्तु ।

उदाहरण

अत्र भवन्तः स्वस्य Sass मध्ये एतानि कथं उपयोक्तुं शक्नुवन्ति:

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

वर्णमूल्यानां सेट् कर्तुं उपयोगाय च वर्णः पृष्ठभूमिः च उपयोगितावर्गाः अपि उपलभ्यन्ते ।colorbackground-color500

उपयोगिताएं उत्पन्न करना

v5.1.0 इत्यस्मिन् योजितम्

colorBootstrap प्रत्येकं वर्णचरस्य कृते उपयोगितानि च न समाविष्टानि background-color, परन्तु भवान् एतानि स्वयमेव अस्माकं उपयोगिता API इत्यनेन सह जनयितुं शक्नोति तथा च v5.1.0 इत्यस्मिन् योजितेन अस्माकं विस्तारितैः Sass मानचित्रैः सह।

  1. आरम्भार्थं, सुनिश्चितं कुर्वन्तु यत् भवान् अस्माकं functions, variables, mixins, utilities च आयातितवान् ।
  2. map-merge-multiple()नूतने मानचित्रे एकाधिकं Sass मानचित्रं शीघ्रं एकत्र विलीनीकरणाय अस्माकं कार्यस्य उपयोगं कुर्वन्तु ।
  3. वर्गनाम्ना सह कस्यापि उपयोगितायाः विस्तारार्थं एतत् नूतनं संयुक्तं मानचित्रं विलीनं कुर्वन्तु {color}-{level}

अत्र एकं उदाहरणं यत् .text-purple-500उपर्युक्तानि चरणानि उपयुज्य text color utilities (eg, ) जनयति ।

@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}प्रत्येकस्य वर्णस्य स्तरस्य च कृते नूतनानि उपयोगितानि उत्पद्यन्ते । अन्येषां उपयोगितायाः सम्पत्तिनां च कृते अपि तथैव कर्तुं शक्नुवन्ति ।