ප්රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

වර්ණ

colorවර්ණ උපයෝගිතා පන්ති අතලොස්සක් සමඟින් අර්ථය ප්‍රකාශ කරන්න. hover තත්ත්‍වයන් සමඟින් හැඩගැන්වීම් සබැඳි සඳහා ද සහය ඇතුළත් වේ.

වර්ණ

වර්ණ උපයෝගිතා සමඟ පෙළ වර්ණවත් කරන්න. ඔබට සබැඳි වර්ණ ගැන්වීමට අවශ්‍ය නම්, ඔබට ඇති සහ ප්‍රාන්තවල .link-*උපකාරක පන්ති භාවිතා කළ හැකිය.:hover:focus

.පෙළ-ප්රාථමික

.පෙළ-ද්විතියික

.පෙළ-සාර්ථකත්වය

.පෙළ-අනතුර

.පෙළ-අවවාදයයි

.පෙළ-තොරතුරු

.පෙළ-ආලෝකය

.පෙළ-අඳුරු

.පෙළ-ශරීරය

.පෙළ-නිශ්ශබ්ද විය

.පෙළ-සුදු

.පෙළ-කළු-50

.පෙළ-සුදු-50

<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
);

ග්රේස්කේල් වර්ණ 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
);

උපයෝගිතා API

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