ਪਿਛੋਕੜ
ਗਰੇਡੀਐਂਟ ਦੇ ਨਾਲ ਅਰਥ ਦੱਸੋ background-color
ਅਤੇ ਸਜਾਵਟ ਸ਼ਾਮਲ ਕਰੋ।
ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ
ਪ੍ਰਸੰਗਿਕ ਟੈਕਸਟ ਕਲਰ ਕਲਾਸਾਂ ਦੇ ਸਮਾਨ, ਕਿਸੇ ਤੱਤ ਦੇ ਪਿਛੋਕੜ ਨੂੰ ਕਿਸੇ ਵੀ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸ ਵਿੱਚ ਸੈੱਟ ਕਰੋ। ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਸੈਟ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨcolor
, ਇਸਲਈ ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ ਤੁਸੀਂ .text-*
ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੋਗੇ ।
<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);
.
ਧੁੰਦਲਾਪਨ
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-opacity
1
.bg-success
color
rgba(25, 135, 84, 1)
.bg-*
ਉਦਾਹਰਨ
ਉਸ ਧੁੰਦਲਾਪਨ ਨੂੰ ਬਦਲਣ ਲਈ, --bs-bg-opacity
ਕਸਟਮ ਸਟਾਈਲ ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਰਾਹੀਂ ਓਵਰਰਾਈਡ ਕਰੋ।
<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
ਉਪਯੋਗਤਾ ਵਿੱਚੋਂ ਚੁਣੋ:
<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(--#{$variable-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
)
),