ਰੰਗ

ਰੰਗ

ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਰੰਗੀਨ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਲਿੰਕਾਂ ਨੂੰ ਕਲਰਾਈਜ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ .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 ਸੰਸਕਰਣ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਅਤੇ ਅਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਲਈ ( ਇੱਕ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਲਈ ਇੱਕ ਡਿਫੌਲਟ ਮੁੱਲ ਦੇ ਨਾਲ) ਲਈ 13, 110, 253ਇੱਕ ਦੂਜਾ 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;

ਨਕਸ਼ਾ

ਥੀਮ ਰੰਗਾਂ ਨੂੰ ਫਿਰ ਸਾਸ ਮੈਪ ਵਿੱਚ ਪਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਅਸੀਂ ਆਪਣੀਆਂ ਉਪਯੋਗਤਾਵਾਂ, ਕੰਪੋਨੈਂਟ ਮੋਡੀਫਾਇਰ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਣਾਉਣ ਲਈ ਉਹਨਾਂ ਨੂੰ ਲੂਪ ਕਰ ਸਕੀਏ।

$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
      )
    ),