রং

রং

কালার ইউটিলিটি সহ টেক্সট কালারাইজ করুন। আপনি যদি লিঙ্কগুলিকে রঙিন করতে চান তবে আপনি .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>

অস্বচ্ছতা

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-opacity1.text-primarycolorrgba(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;

মানচিত্র

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.

$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 colors are generated from a separate Sass map:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

And color opacities build on that with their own map that’s consumed by the utilities 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");

Utilities API

Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities 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
      )
    ),