Xim

Xim

Colorize cov ntawv nrog cov khoom siv xim. Yog tias koj xav ua kom muaj xim sib txuas, koj tuaj yeem siv cov .link-*chav kawm pab uas muaj :hoverthiab :focushais.

<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>

Opacity

Raws li ntawm v5.1.0, cov ntawv siv xim xim yog tsim nrog Sass siv CSS hloov pauv. Qhov no tso cai rau kev hloov xim ntawm lub sijhawm tiag tiag yam tsis muaj kev sib sau ua ke thiab kev hloov pauv alpha pob tshab.

Nws ua haujlwm li cas

Xav txog peb qhov kev .text-primarysiv hluav taws xob tsis zoo.

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

Peb siv ib qho RGB version ntawm peb --bs-primary(nrog tus nqi ntawm 13, 110, 253) CSS sib txawv thiab txuas ib tug thib ob CSS kuj sib txawv, --bs-text-opacity, , rau lub alpha pob tshab (nrog rau lub neej ntawd tus nqi 1ua tsaug rau lub zos CSS variable). Qhov ntawd txhais tau tias txhua lub sijhawm koj siv .text-primarytam sim no, koj cov colornqi suav yog rgba(13, 110, 253, 1). Lub zos CSS kuj sib txawv hauv txhua .text-*chav kawm zam cov teeb meem qub txeeg qub teg yog li cov piv txwv ntawm cov khoom siv hluav taws xob tsis tuaj yeem muaj qhov hloov pauv alpha pob tshab.

Piv txwv

Txhawm rau hloov qhov opacity, override --bs-text-opacityntawm kev cai style lossis inline styles.

<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>

Los yog, xaiv los ntawm ib qho ntawm cov .text-opacitykhoom siv hluav taws xob:

<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>

Qhov tshwj xeeb

Qee zaum cov chav kawm tsis tuaj yeem siv tsis tau vim qhov tshwj xeeb ntawm lwm tus neeg xaiv. Qee zaum, kev ua haujlwm txaus yog los qhwv koj lub ntsiab lus hauv ib <div>lossis ntau lub ntsiab lus nrog cov chav kawm xav tau.

Sass

Ntxiv rau cov haujlwm Sass hauv qab no, xav txog kev nyeem txog peb cov khoom siv CSS suav nrog (aka CSS variables) rau xim thiab ntau dua.

Hloov pauv

Cov colorkhoom siv feem ntau yog tsim los ntawm peb cov ntsiab lus xim, muab rov qab los ntawm peb cov xim palette sib txawv.

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

Greyscale xim kuj muaj, tab sis tsuas yog ib qho subset yog siv los tsim cov khoom siv.

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

Daim ntawv qhia

Cov ntsiab lus xim raug muab tso rau hauv Sass daim ntawv qhia yog li peb tuaj yeem hla lawv los tsim peb cov khoom siv hluav taws xob, cov khoom hloov kho, thiab ntau dua.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Greyscale xim kuj muaj raws li daim ntawv qhia Sass. Daim ntawv qhia no tsis yog siv los tsim cov khoom siv hluav taws xob.

$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 xim yog tsim los ntawm ib daim ntawv qhia Sass cais:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Thiab xim opacities tsim rau qhov ntawd nrog lawv tus kheej daim ntawv qhia uas tau noj los ntawm cov khoom siv 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");

Utilities API

Cov khoom siv xim tau tshaj tawm hauv peb cov khoom siv API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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