रंग की

रंग की

रंग उपयोगिताओं के साथ पाठ को रंगीन करें। यदि आप लिंक को रंगीन करना चाहते हैं, तो आप .link-*सहायक वर्गों का उपयोग कर सकते हैं जिनके पास :hoverऔर :focusराज्य हैं।

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

अस्पष्टता

V5.1.0 के अनुसार, CSS चरों का उपयोग करके Sass के साथ पाठ रंग उपयोगिताएँ उत्पन्न की जाती हैं। यह संकलन और गतिशील अल्फा पारदर्शिता परिवर्तनों के बिना रीयल-टाइम रंग परिवर्तन की अनुमति देता है।

यह काम किस प्रकार करता है

हमारी डिफ़ॉल्ट .text-primaryउपयोगिता पर विचार करें।

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

हम अपने --bs-primary(के मूल्य के साथ 13, 110, 253) सीएसएस चर के आरजीबी संस्करण का उपयोग करते हैं और अल्फा पारदर्शिता के लिए एक दूसरा सीएसएस चर संलग्न करते हैं --bs-text-opacity(स्थानीय सीएसएस चर के लिए डिफ़ॉल्ट मान 1धन्यवाद के साथ)। इसका मतलब है कि जब भी आप अभी उपयोग करते .text-primaryहैं, तो आपका परिकलित colorमान rgba(13, 110, 253, 1). प्रत्येक .text-*वर्ग के अंदर स्थानीय सीएसएस चर विरासत के मुद्दों से बचा जाता है, इसलिए उपयोगिताओं के नेस्टेड उदाहरणों में स्वचालित रूप से संशोधित अल्फा पारदर्शिता नहीं होती है।

उदाहरण

--bs-text-opacityउस अस्पष्टता को बदलने के लिए, कस्टम शैलियों या इनलाइन शैलियों के माध्यम से ओवरराइड करें ।

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

या, किसी भी .text-opacityउपयोगिता में से चुनें:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

विशेषता

कभी-कभी किसी अन्य चयनकर्ता की विशिष्टता के कारण प्रासंगिक वर्गों को लागू नहीं किया जा सकता है। कुछ मामलों में, अपने तत्व की सामग्री को वांछित वर्ग के साथ एक <div>या अधिक अर्थपूर्ण तत्व में लपेटने के लिए पर्याप्त समाधान है।

सास

निम्नलिखित Sass कार्यक्षमता के अलावा, रंगों और अधिक के लिए हमारे शामिल CSS कस्टम गुणों (उर्फ CSS चर) के बारे में पढ़ने पर विचार करें।

चर

अधिकांश colorउपयोगिताओं को हमारे थीम रंगों द्वारा उत्पन्न किया जाता है, हमारे सामान्य रंग पैलेट चर से पुन: असाइन किया जाता है।

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

ग्रेस्केल रंग भी उपलब्ध हैं, लेकिन किसी भी उपयोगिता को उत्पन्न करने के लिए केवल एक सबसेट का उपयोग किया जाता है।

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

नक्शा

थीम रंगों को फिर एक Sass मानचित्र में डाल दिया जाता है ताकि हम अपनी उपयोगिताओं, घटक संशोधक, और बहुत कुछ उत्पन्न करने के लिए उन पर लूप कर सकें।

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

ग्रेस्केल रंग सास मानचित्र के रूप में भी उपलब्ध हैं। इस मानचित्र का उपयोग किसी उपयोगिता को उत्पन्न करने के लिए नहीं किया जाता है।

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB रंग एक अलग Sass मानचित्र से उत्पन्न होते हैं:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

और रंग अस्पष्टता उस पर अपने स्वयं के मानचित्र के साथ निर्मित होती है जो उपयोगिताओं एपीआई द्वारा खपत होती है:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

यूटिलिटीज एपीआई

रंग उपयोगिताओं को हमारी उपयोगिताओं एपीआई में scss/_utilities.scss. उपयोगिताओं API का उपयोग करना सीखें।

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),