ਰੰਗ
color
ਮੁੱਠੀ ਭਰ ਰੰਗ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਅਰਥ ਵਿਅਕਤ ਕਰੋ। ਹੋਵਰ ਸਟੇਟਸ ਦੇ ਨਾਲ ਸਟਾਈਲਿੰਗ ਲਿੰਕਾਂ ਲਈ ਸਮਰਥਨ ਵੀ ਸ਼ਾਮਲ ਹੈ।
ਰੰਗ
ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਰੰਗੀਨ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਲਿੰਕਾਂ ਨੂੰ ਕਲਰਾਈਜ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ .link-*
ਸਹਾਇਕ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿਨ੍ਹਾਂ ਵਿੱਚ :hover
ਅਤੇ :focus
ਸਟੇਟਸ ਹਨ।
.ਟੈਕਸਟ-ਪ੍ਰਾਇਮਰੀ
.ਟੈਕਸਟ-ਸੈਕੰਡਰੀ
.ਟੈਕਸਟ-ਸਫਲਤਾ
.ਟੈਕਸਟ-ਖ਼ਤਰਾ
.ਟੈਕਸਟ-ਚੇਤਾਵਨੀ
.ਟੈਕਸਟ-ਜਾਣਕਾਰੀ
.text-light
.ਟੈਕਸਟ-ਡਾਰਕ
.text-body
.ਟੈਕਸਟ-ਮਿਊਟ ਕੀਤਾ ਗਿਆ
.ਟੈਕਸਟ-ਸਫ਼ੈਦ
.text-black-50
.text-white-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>
.text-opacity-*
ਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਅਤੇ CSS ਵੇਰੀਏਬਲ
ਦੇ ਜੋੜ ਦੇ ਨਾਲ
, .text-black-50
ਅਤੇ
.text-white-50
v5.1.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ। ਉਹਨਾਂ ਨੂੰ v6.0.0 ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ।
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ
ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .visually-hidden
ਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
ਧੁੰਦਲਾਪਨ
v5.1.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ
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-opacity
1
.text-primary
color
rgba(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
)
),