রং
color
কয়েকটি রঙের ইউটিলিটি ক্লাসের মাধ্যমে অর্থ বোঝান । হোভার স্টেটগুলির সাথে স্টাইলিং লিঙ্কগুলির জন্য সমর্থনও অন্তর্ভুক্ত করে।
রং
কালার ইউটিলিটি সহ টেক্সট কালারাইজ করুন। আপনি যদি লিঙ্কগুলিকে রঙিন করতে চান তবে আপনি .link-*
সাহায্যকারী ক্লাসগুলি ব্যবহার করতে পারেন যা রয়েছে :hover
এবং :focus
রাজ্যগুলি।
.টেক্সট-প্রাথমিক
.টেক্সট-সেকেন্ডারি
.টেক্সট-সাফল্য
.টেক্সট-বিপদ
.টেক্সট-সতর্কতা
.টেক্সট-তথ্য
পাঠ্য-আলো
.টেক্সট-অন্ধকার
.টেক্সট-বডি
পাঠ্য-নিঃশব্দ
.টেক্সট-সাদা
.text-black-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 ভেরিয়েবল ব্যবহার করে 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
)
),