වර්ණ

වර්ණ

වර්ණ උපයෝගිතා සමඟ පෙළ වර්ණවත් කරන්න. ඔබට සබැඳි වර්ණ ගැන්වීමට අවශ්‍ය නම්, ඔබට ඇති සහ ප්‍රාන්තවල .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 විචල්‍යයකට ස්තූතිවන්ත වන පරිදි --bs-text-opacityපෙරනිමි අගයක් සමඟ ). 1ඒ කියන්නේ ඔබ .text-primaryදැන් භාවිතා කරන ඕනෑම වේලාවක, ඔබේ ගණනය කළ colorඅගය වේ rgba(13, 110, 253, 1). එක් එක් පන්තිය තුළ ඇති දේශීය CSS විචල්‍යය .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
);

ග්රේස්කේල් වර්ණ Sass සිතියමක් ලෙස ද ලබා ගත හැකිය. මෙම සිතියම කිසිදු උපයෝගිතා උත්පාදනය කිරීමට භාවිතා නොවේ.

$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

වර්ණ උපයෝගිතා අපගේ උපයෝගිතා 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
      )
    ),