రంగులు
color
కొన్ని రంగు వినియోగ తరగతులతో అర్థాన్ని తెలియజేయండి . హోవర్ స్టేట్లతో స్టైలింగ్ లింక్లకు కూడా మద్దతు ఉంటుంది.
రంగులు
రంగు యుటిలిటీలతో వచనాన్ని కలర్ చేయండి. మీరు లింక్లను వర్ణీకరించాలనుకుంటే, మీరు కలిగి ఉన్న మరియు స్టేట్లను కలిగి ఉన్న .link-*
సహాయక తరగతులను ఉపయోగించవచ్చు .:hover
:focus
.టెక్స్ట్-ప్రైమరీ
.టెక్స్ట్-సెకండరీ
.వచనం-విజయం
.వచన-ప్రమాదం
.వచన-హెచ్చరిక
.వచన సమాచారం
.వచన-కాంతి
.వచనం-చీకటి
.టెక్స్ట్-బాడీ
.టెక్స్ట్-మ్యూట్ చేయబడింది
.వచనం-తెలుపు
.టెక్స్ట్-బ్లాక్-50
.టెక్స్ట్-వైట్-50
<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>
.text-opacity-*
యుటిలిటీస్ మరియు CSS వేరియబుల్స్
జోడింపుతో .text-black-50
మరియు
.text-white-50
v5.1.0 నాటికి నిలిపివేయబడ్డాయి. అవి v6.0.0లో తీసివేయబడతాయి.
సహాయక సాంకేతికతలకు అర్థాన్ని తెలియజేయడం
అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం అనేది దృశ్యమాన సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్లోనే స్పష్టంగా ఉందని (ఉదా. కనిపించే వచనం) లేదా .visually-hidden
క్లాస్తో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.
అస్పష్టత
v5.1.0లో జోడించబడింది
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
)
),