రంగులు

రంగులు

రంగు యుటిలిటీలతో వచనాన్ని కలర్ చేయండి. మీరు లింక్‌లను వర్ణీకరించాలనుకుంటే, మీరు కలిగి ఉన్న మరియు స్టేట్‌లను కలిగి ఉన్న .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 వేరియబుల్‌లను ఉపయోగించి సాస్‌తో టెక్స్ట్ కలర్ యుటిలిటీలు రూపొందించబడ్డాయి. ఇది సంకలనం మరియు డైనమిక్ ఆల్ఫా పారదర్శకత మార్పులు లేకుండా నిజ-సమయ రంగు మార్పులను అనుమతిస్తుంది.

అది ఎలా పని చేస్తుంది

మా డిఫాల్ట్ .text-primaryయుటిలిటీని పరిగణించండి.

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

--bs-primaryమేము మా (విలువతో ) CSS యొక్క RGB వెర్షన్‌ని ఉపయోగిస్తాము మరియు ఆల్ఫా పారదర్శకత కోసం 13, 110, 253రెండవ CSS వేరియబుల్, , ( స్థానిక CSS వేరియబుల్‌కు ధన్యవాదాలు --bs-text-opacityడిఫాల్ట్ విలువతో ) జోడించాము. 1అంటే మీరు .text-primaryఇప్పుడు ఉపయోగించే ఎప్పుడైనా, మీ కంప్యూటెడ్ colorవిలువ rgba(13, 110, 253, 1). ప్రతి తరగతిలోని స్థానిక CSS వేరియబుల్ .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;

మ్యాప్

అప్పుడు థీమ్ రంగులు సాస్ మ్యాప్‌లో ఉంచబడతాయి, తద్వారా మేము మా యుటిలిటీలు, కాంపోనెంట్ మాడిఫైయర్‌లు మరియు మరిన్నింటిని రూపొందించడానికి వాటిపై లూప్ చేయవచ్చు.

$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 రంగులు ప్రత్యేక సాస్ మ్యాప్ నుండి రూపొందించబడ్డాయి:

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

మరియు రంగు అస్పష్టత వాటి స్వంత మ్యాప్‌తో నిర్మించబడతాయి, అది యుటిలిటీస్ API ద్వారా వినియోగించబడుతుంది:

$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");

యుటిలిటీస్ API

లో మా యుటిలిటీస్ APIలో కలర్ యుటిలిటీలు ప్రకటించబడ్డాయి 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
      )
    ),