રંગો

રંગો

રંગ ઉપયોગિતાઓ સાથે ટેક્સ્ટને રંગીન કરો. જો તમે લિંક્સને કલરાઇઝ કરવા માંગતા હો, તો તમે .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
);

ગ્રેસ્કેલ રંગો સાસ નકશા તરીકે પણ ઉપલબ્ધ છે. આ નકશાનો ઉપયોગ કોઈપણ ઉપયોગિતાઓ બનાવવા માટે થતો નથી.

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