રંગો
color
મુઠ્ઠીભર રંગ ઉપયોગિતા વર્ગો દ્વારા અર્થ જણાવો . હોવર સ્ટેટ્સ સાથે સ્ટાઇલ લિંક્સ માટે સપોર્ટ પણ શામેલ છે.
રંગો
રંગ ઉપયોગિતાઓ સાથે ટેક્સ્ટને રંગીન કરો. જો તમે લિંક્સને કલરાઇઝ કરવા માંગતા હો, તો તમે .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>
.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
);
ગ્રેસ્કેલ રંગો સાસ નકશા તરીકે પણ ઉપલબ્ધ છે. આ નકશાનો ઉપયોગ કોઈપણ ઉપયોગિતાઓ બનાવવા માટે થતો નથી.
$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 રંગો અલગ સાસ નકશામાંથી જનરેટ થાય છે:
$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
)
),