ରଙ୍ଗଗୁଡିକ |
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>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hidden
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ନିର୍ଦ୍ଦିଷ୍ଟତା
ବେଳେବେଳେ ଅନ୍ୟ ଚୟନକର୍ତ୍ତାଙ୍କ ନିର୍ଦ୍ଦିଷ୍ଟତା ହେତୁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ | କେତେକ କ୍ଷେତ୍ରରେ, ତୁମର ଉପାଦାନର ବିଷୟବସ୍ତୁକୁ <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
);
ଉପଯୋଗିତା API
ଆମର ଉପଯୋଗିତା API ରେ ରଙ୍ଗ ଉପଯୋଗିତା ଘୋଷିତ ହୋଇଛି scss/_utilities.scss
| ଉପଯୋଗିତା API କିପରି ବ୍ୟବହାର କରିବେ ଶିଖନ୍ତୁ |
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),