ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਪਿਛੋਕੜ

ਗਰੇਡੀਐਂਟ ਦੇ ਨਾਲ ਅਰਥ ਦੱਸੋ background-colorਅਤੇ ਸਜਾਵਟ ਸ਼ਾਮਲ ਕਰੋ।

ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ

ਪ੍ਰਸੰਗਿਕ ਟੈਕਸਟ ਕਲਰ ਕਲਾਸਾਂ ਦੇ ਸਮਾਨ, ਕਿਸੇ ਤੱਤ ਦੇ ਪਿਛੋਕੜ ਨੂੰ ਕਿਸੇ ਵੀ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸ ਵਿੱਚ ਸੈੱਟ ਕਰੋ। ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਸੈਟ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨcolor , ਇਸਲਈ ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ ਤੁਸੀਂ .text-* ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੋਗੇ ।

.bg-ਪ੍ਰਾਇਮਰੀ
.ਬੀ.ਜੀ.-ਸੈਕੰਡਰੀ
.bg-ਸਫਲਤਾ
.bg-ਖ਼ਤਰਾ
.bg-ਚੇਤਾਵਨੀ
.bg-ਜਾਣਕਾਰੀ
.bg-ਲਾਈਟ
.bg-ਹਨੇਰਾ
.bg-ਸਰੀਰ
.bg-ਚਿੱਟਾ
.bg-ਪਾਰਦਰਸ਼ੀ
html
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

ਬੈਕਗ੍ਰਾਊਂਡ ਗਰੇਡੀਐਂਟ

ਇੱਕ ਕਲਾਸ ਜੋੜ ਕੇ .bg-gradient, ਬੈਕਗ੍ਰਾਉਂਡ ਵਿੱਚ ਇੱਕ ਲੀਨੀਅਰ ਗਰੇਡੀਐਂਟ ਨੂੰ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰ ਵਜੋਂ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਗਰੇਡੀਐਂਟ ਅਰਧ-ਪਾਰਦਰਸ਼ੀ ਚਿੱਟੇ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜੋ ਹੇਠਾਂ ਤੱਕ ਫਿੱਕਾ ਪੈ ਜਾਂਦਾ ਹੈ।

ਕੀ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕਸਟਮ CSS ਵਿੱਚ ਗਰੇਡੀਐਂਟ ਦੀ ਲੋੜ ਹੈ? ਬਸ ਜੋੜੋ background-image: var(--bs-gradient);.

.bg-primary.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-secondary.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-success.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-ਖ਼ਤਰਾ.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-warning.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-info.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-light.bg-ਗ੍ਰੇਡੀਐਂਟ
.bg-dark.bg-ਗ੍ਰੇਡੀਐਂਟ

ਧੁੰਦਲਾਪਨ

v5.1.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

v5.1.0 ਤੱਕ, background-colorਉਪਯੋਗਤਾਵਾਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ Sass ਨਾਲ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਇਹ ਸੰਕਲਨ ਅਤੇ ਗਤੀਸ਼ੀਲ ਅਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਤਬਦੀਲੀਆਂ ਤੋਂ ਬਿਨਾਂ ਰੀਅਲ-ਟਾਈਮ ਰੰਗ ਬਦਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਕਿਦਾ ਚਲਦਾ

ਸਾਡੀ ਡਿਫੌਲਟ .bg-successਉਪਯੋਗਤਾ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

ਅਸੀਂ ਆਪਣੇ --bs-success(ਦੇ ਮੁੱਲ ਦੇ ਨਾਲ ) CSS ਵੇਰੀਏਬਲ ਦੇ ਇੱਕ RGB ਸੰਸਕਰਣ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਅਤੇ ਅਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਲਈ ( ਇੱਕ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਲਈ ਇੱਕ ਡਿਫੌਲਟ ਮੁੱਲ ਦੇ ਨਾਲ) ਲਈ 25, 135, 84ਇੱਕ ਦੂਜਾ CSS ਵੇਰੀਏਬਲ ਜੋੜਿਆ ਹੈ । ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਹੁਣੇ ਵਰਤਦੇ ਹੋ, ਤੁਹਾਡਾ ਗਣਿਤ ਮੁੱਲ ਹੈ । ਹਰੇਕ ਕਲਾਸ ਦੇ ਅੰਦਰ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਵਿਰਾਸਤੀ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚਦਾ ਹੈ ਇਸਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨੇਸਟਡ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸੋਧੀ ਹੋਈ ਅਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।--bs-bg-opacity1.bg-successcolorrgba(25, 135, 84, 1).bg-*

ਉਦਾਹਰਨ

ਉਸ ਧੁੰਦਲਾਪਨ ਨੂੰ ਬਦਲਣ ਲਈ, --bs-bg-opacityਕਸਟਮ ਸਟਾਈਲ ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਰਾਹੀਂ ਓਵਰਰਾਈਡ ਕਰੋ।

ਇਹ ਡਿਫੌਲਟ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
ਇਹ 50% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>

ਜਾਂ, ਕਿਸੇ ਵੀ .bg-opacityਉਪਯੋਗਤਾ ਵਿੱਚੋਂ ਚੁਣੋ:

ਇਹ ਡਿਫੌਲਟ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
ਇਹ 75% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
ਇਹ 50% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
ਇਹ 25% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
ਇਹ 10% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਪਿਛੋਕੜ ਹੈ
html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>

ਸੱਸ

ਹੇਠਾਂ ਦਿੱਤੀ Sass ਕਾਰਜਕੁਸ਼ਲਤਾ ਤੋਂ ਇਲਾਵਾ, ਰੰਗਾਂ ਅਤੇ ਹੋਰਾਂ ਲਈ ਸਾਡੀਆਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਉਰਫ਼ CSS ਵੇਰੀਏਬਲ) ਬਾਰੇ ਪੜ੍ਹਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

ਵੇਰੀਏਬਲ

ਜ਼ਿਆਦਾਤਰ background-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;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));

ਗ੍ਰੇਸਕੇਲ ਰੰਗ ਵੀ ਉਪਲਬਧ ਹਨ, ਪਰ ਕਿਸੇ ਵੀ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਸਿਰਫ ਇੱਕ ਉਪ ਸਮੂਹ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

$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-bg: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-bg)
  )
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

ਮਿਕਸਿਨ

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

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}

@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
}

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
}

@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

ਉਪਯੋਗਤਾ API

ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ API ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ scss/_utilities.scssਯੂਟਿਲਿਟੀਜ਼ API ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਬਾਰੇ ਜਾਣੋ।

    "background-color": (
      property: background-color,
      class: bg,
      local-vars: (
        "bg-opacity": 1
      ),
      values: map-merge(
        $utilities-bg-colors,
        (
          "transparent": transparent
        )
      )
    ),
    "bg-opacity": (
      css-var: true,
      class: bg-opacity,
      values: (
        10: .1,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),