קאָלאָרס

קאָלאָרס

קאַלערייז טעקסט מיט קאָליר יוטילאַטיז. אויב איר ווילן צו קאַלערייז לינקס, איר קענען נוצן די .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>

אָופּאַסאַטי

זינט וו5.1.0, טעקסט קאָליר יוטילאַטיז זענען דזשענערייטאַד מיט Sass ניצן CSS וועריאַבאַלז. דאָס אַלאַוז פֿאַר פאַקטיש-צייט קאָליר ענדערונגען אָן זאַמלונג און דינאַמיש אַלף דורכזעיקייַט ענדערונגען.

וויאזוי עס ארבעט

באַטראַכטן אונדזער פעליקייַט .text-primaryנוצן.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

מיר נוצן אַ RGB ווערסיע פון ​​אונדזער --bs-primary(מיט די ווערט פון 13, 110, 253) CSS בייַטעוודיק און אַטאַטשט אַ צווייט CSS בייַטעוודיק, --bs-text-opacity, פֿאַר די אַלף דורכזעיקייַט (מיט אַ פעליקייַט ווערט 1דאַנק צו אַ היגע CSS בייַטעוודיק). אַז מיטל ווען איר נוצן .text-primaryאיצט, דיין קאַמפּיוטאַד colorווערט איז rgba(13, 110, 253, 1). די היגע CSS בייַטעוודיק אין יעדער .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>אָדער מער סעמאַנטיק עלעמענט מיט דער געוואלט קלאַס.

סאַס

אין אַדישאַן צו די פאלגענדע סאַס פאַנגקשאַנאַליטי, באַטראַכטן לייענען וועגן אונדזער אַרייַנגערעכנט 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");

און קאָליר אָופּאַסאַטיז בויען אויף דעם מיט זייער אייגענע מאַפּע וואָס איז קאַנסומד דורך די יוטילאַטיז אַפּי:

$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");

Utilities API

קאָליר יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities 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
      )
    ),