ৰং
color
ৰঙৰ উপযোগিতা শ্ৰেণীৰ মুষ্টিমেয়ৰ সৈতে অৰ্থ প্ৰকাশ কৰক। হোভাৰ অৱস্থাসমূহৰ সৈতে ষ্টাইলিং সংযোগসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে,ও।
ৰং
ৰঙৰ সঁজুলিসমূহৰ সৈতে লিখনী ৰঙীন কৰক। যদি আপুনি সংযোগসমূহ ৰং কৰিব বিচাৰে, আপুনি .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>
.text-opacity-*
লিখনী সঁজুলিসমূহৰ বাবে সঁজুলিসমূহ আৰু CSS চলকসমূহৰ
যোগ কৰাৰ সৈতে
, .text-black-50
আৰু
.text-white-50
v5.1.0 ৰ পৰা অবচিত কৰা হৈছে। v6.0.0 ত সেইবোৰ আঁতৰোৱা হ'ব।
সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা
অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। সুনিশ্চিত কৰক যে ৰঙেৰে চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (যেনে দৃশ্যমান লিখনী), বা বিকল্প উপায়ৰ যোগেদি অন্তৰ্ভুক্ত কৰা হৈছে, যেনে .visually-hidden
শ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।
অস্পষ্টতা
v5.1.0 ত যোগ কৰা হৈছে
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
আমি আমাৰ (ৰ মানৰ সৈতে ) CSS চলকৰ এটা RGB সংস্কৰণ ব্যৱহাৰ কৰো আৰু আলফা স্বচ্ছতাৰ বাবে 13, 110, 253
এটা দ্বিতীয় CSS চলক, , সংলগ্ন কৰোঁ ( এটা স্থানীয় CSS চলকৰ বাবে ধন্যবাদ এটা অবিকল্পিত মানৰ সৈতে)। অৰ্থাৎ আপুনি এতিয়া ব্যৱহাৰ কৰা যিকোনো সময়তে, আপোনাৰ গণনা কৰা মান হ'ল . প্ৰতিটো শ্ৰেণীৰ ভিতৰত স্থানীয় CSS চলকটোৱে উত্তৰাধিকাৰ সমস্যাসমূহ এৰাই চলিব যাতে সঁজুলিসমূহৰ নেষ্টেড উদাহৰণসমূহৰ স্বয়ংক্ৰিয়ভাৱে এটা পৰিবৰ্তিত আলফা স্বচ্ছতা নাথাকে।--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");
আৰু ৰঙৰ অস্পষ্টতাসমূহে ইয়াৰ ওপৰত নিজৰ মেপৰ সৈতে নিৰ্মাণ কৰে যি সঁজুলিসমূহ 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 ত ঘোষণা কৰা হৈছে 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
)
),