ৰং

ৰং

ৰঙৰ সঁজুলিসমূহৰ সৈতে লিখনী ৰঙীন কৰক। যদি আপুনি সংযোগসমূহ ৰং কৰিব বিচাৰে, আপুনি .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;

মানচিত্ৰ

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