মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
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>
সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা

অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। সুনিশ্চিত কৰক যে ৰঙেৰে চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (যেনে দৃশ্যমান লিখনী), বা বিকল্প উপায়ৰ যোগেদি অন্তৰ্ভুক্ত কৰা হৈছে, যেনে .visually-hiddenশ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।

নিৰ্দিষ্টতা

কেতিয়াবা আন এটা নিৰ্বাচকৰ নিৰ্দিষ্টতাৰ বাবে প্ৰসংগভিত্তিক শ্ৰেণীসমূহ প্ৰয়োগ কৰিব নোৱাৰি। কিছুমান ক্ষেত্ৰত, এটা পৰ্যাপ্ত সমাধান হ'ল আপোনাৰ উপাদানৰ বিষয়বস্তু এটা <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
);

ইউটিলিটিজ এপিআই

ৰঙৰ সঁজুলিসমূহ আমাৰ সঁজুলিসমূহ API ত ঘোষণা কৰা হৈছে scss/_utilities.scss. সঁজুলি API কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),