মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

ৰং

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-50v5.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-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;

মানচিত্ৰ

তাৰ পিছত থিম ৰংসমূহ এটা 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
      )
    ),