ରଙ୍ଗଗୁଡିକ |
color
ହାତଗଣତି ରଙ୍ଗ ଉପଯୋଗୀ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ଅର୍ଥ ପହଞ୍ଚାନ୍ତୁ | ହୋଭର ଷ୍ଟେଟସ୍ ସହିତ ଷ୍ଟାଇଲ୍ ଲିଙ୍କ୍ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ରଙ୍ଗଗୁଡିକ |
ରଙ୍ଗ ଉପଯୋଗିତା ସହିତ ପାଠକୁ ରଙ୍ଗ କରନ୍ତୁ | ଯଦି ଆପଣ ଲିଙ୍କଗୁଡିକ ରଙ୍ଗ କରିବାକୁ ଚାହୁଁଛନ୍ତି, ତେବେ ଆପଣ .link-*
ହେଲପର୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରିପାରିବେ ଯାହାର ଷ୍ଟେଟସ୍ :hover
ଅଛି |:focus
.text-primary
.text-secondary
.text- ସଫଳତା |
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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
ଆମେ ଆମର (ମୂଲ୍ୟ ସହିତ 13, 110, 253
) CSS ଭେରିଏବଲ୍ ର ଏକ RGB ସଂସ୍କରଣ ବ୍ୟବହାର କରୁ ଏବଂ --bs-text-opacity
ଆଲଫା ସ୍ୱଚ୍ଛତା ପାଇଁ ( 1
ଏକ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ଦ୍ୱାରା ଏକ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ) ଏକ CSS ଭେରିଏବଲ୍ ସଂଲଗ୍ନ କରେ | ଏହାର ଅର୍ଥ ଯେକ time ଣସି ସମୟରେ ଆପଣ .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>
କିମ୍ବା, ଯେକ any ଣସି .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>
ଇଚ୍ଛିତ ଶ୍ରେଣୀ ସହିତ ଏକ ବା ଅଧିକ ଅର୍ଥଗତ ଉପାଦାନରେ ଗୁଡ଼ାଇବା ପାଇଁ ଏକ ପର୍ଯ୍ୟାପ୍ତ କାର୍ଯ୍ୟଧାରା |
ସାସ୍ |
ନିମ୍ନଲିଖିତ ସାସ୍ କାର୍ଯ୍ୟକାରିତା ସହିତ, ରଙ୍ଗ ଏବଂ ଅଧିକ ପାଇଁ ଆମର ଅନ୍ତର୍ଭୁକ୍ତ CSS କଷ୍ଟମ୍ ଗୁଣ (ଆକା CSS ଭେରିଏବଲ୍) ବିଷୟରେ ପ reading ିବାକୁ ଚିନ୍ତା କର |
ଭେରିଏବଲ୍ |
ଅଧିକାଂଶ color
ୟୁଟିଲିଟି ଆମର ଥିମ୍ ରଙ୍ଗ ଦ୍ୱାରା ଉତ୍ପନ୍ନ ହୁଏ, ଆମର ଜେନେରିକ୍ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ଭେରିଏବଲ୍ ରୁ ପୁନ ass ନ୍ୟସ୍ତ |
$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;
ଗ୍ରେସ୍କେଲ୍ ରଙ୍ଗ ମଧ୍ୟ ଉପଲବ୍ଧ, କିନ୍ତୁ ଯେକ any ଣସି ଉପଯୋଗିତା ସୃଷ୍ଟି କରିବାକୁ କେବଳ ଏକ ସବ୍ସେଟ୍ ବ୍ୟବହୃତ ହୁଏ |
$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;
ମାନଚିତ୍ର
ଥିମ୍ ରଙ୍ଗଗୁଡିକ ପରେ ଏକ ସାସ୍ ମାନଚିତ୍ରରେ ରଖାଯାଏ ଯାହା ଦ୍ our ାରା ଆମେ ଆମର ଉପଯୋଗିତା, ଉପାଦାନ ପରିବର୍ତ୍ତନକାରୀ ଏବଂ ଅଧିକ ସୃଷ୍ଟି କରିବାକୁ ସେଗୁଡ଼ିକ ଉପରେ ଲୁପ୍ କରିପାରିବା |
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
ଗ୍ରେସ୍କେଲ୍ ରଙ୍ଗଗୁଡିକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ମଧ୍ୟ ଉପଲବ୍ଧ | କ map ଣସି ଉପଯୋଗିତା ସୃଷ୍ଟି କରିବାକୁ ଏହି ମାନଚିତ୍ର ବ୍ୟବହୃତ ହୁଏ ନାହିଁ |
$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
)
),