Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn iwe aṣẹ
in English

Awọn awọ

Ṣe afihan itumọ nipasẹ colorpẹlu iwonba ti awọn kilasi IwUlO awọ. Pẹlu atilẹyin fun awọn ọna asopọ iselona pẹlu awọn ipinlẹ rababa, paapaa.

Lori iwe yi

Awọn awọ

Ṣe awọ ọrọ pẹlu awọn ohun elo awọ. Ti o ba fẹ ṣe awọ awọn ọna asopọ, o le lo awọn .link-*kilasi oluranlọwọ eyiti o ni :hoverati :focusawọn ipinlẹ.

.ọrọ-akọkọ

.ọrọ-secondary

.ọrọ-aseyori

.ọrọ-ewu

.kilọ-ọrọ

.ọrọ-alaye

.ọrọ-imọlẹ

.ọrọ-ṣokunkun

.ọrọ-ara

.ọrọ-dakẹjẹẹ

.ọrọ-funfun

.ọrọ-dudu-50

.ọrọ-funfun-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>
Ilọkuro: Pẹlu afikun ti awọn .text-opacity-*ohun elo ati awọn oniyipada CSS fun awọn ohun elo ọrọ, .text-black-50ati .text-white-50pe a ti parẹ bi ti v5.1.0. Wọn yoo yọkuro ni v6.0.0.
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Òótọ́

Fi kun v5.1.0

Bi ti v5.1.0, awọn ohun elo awọ ọrọ jẹ ipilẹṣẹ pẹlu Sass nipa lilo awọn oniyipada CSS. Eyi ngbanilaaye fun awọn ayipada awọ ni akoko gidi laisi akopọ ati awọn iyipada akoyawo alpha ti o ni agbara.

Bawo ni o ṣe n ṣiṣẹ

Ro wa aiyipada .text-primaryIwUlO.

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

A lo ẹya RGB ti wa --bs-primary(pẹlu iye ti 13, 110, 253) oniyipada CSS ati so oniyipada CSS keji, --bs-text-opacity, fun akoyawo alpha (pẹlu iye aiyipada kan 1ọpẹ si oniyipada CSS agbegbe). Iyẹn tumọ si nigbakugba ti o ba lo .text-primaryni bayi, coloriye iṣiro rẹ jẹ rgba(13, 110, 253, 1). Oniyipada CSS agbegbe inu .text-*kilasi kọọkan yago fun awọn ọran ogún nitoribẹẹ awọn iṣẹlẹ itẹle ti awọn ohun elo ko ni ni akoyawo alpha ti a yipada laifọwọyi.

Apeere

Lati yi opaity yẹn pada, danu --bs-text-opacitynipasẹ awọn aṣa aṣa tabi awọn aza inline.

Eyi jẹ ọrọ akọkọ aiyipada
Eyi jẹ 50% opacity ọrọ akọkọ 
<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>

Tabi, yan lati eyikeyi ninu awọn .text-opacityohun elo:

Eyi jẹ ọrọ akọkọ aiyipada
Eyi jẹ 75% opacity ọrọ akọkọ
Eyi jẹ 50% opacity ọrọ akọkọ
Eyi jẹ 25% opacity ọrọ akọkọ 
<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>

Ni pato

Nigba miiran awọn kilasi ọrọ-ọrọ ko le ṣe lo nitori iyasọtọ ti yiyan miiran. Ni awọn igba miiran, iṣẹ-ṣiṣe ti o to ni lati fi ipari si akoonu eroja rẹ ni ipin kan <div>tabi diẹ sii itumọ pẹlu kilasi ti o fẹ.

Sass

Ni afikun si iṣẹ ṣiṣe Sass atẹle, ronu kika nipa awọn ohun-ini aṣa CSS ti o wa pẹlu wa (awọn oniyipada CSS) fun awọn awọ ati diẹ sii.

Awọn oniyipada

Pupọ colorawọn ohun elo jẹ ipilẹṣẹ nipasẹ awọn awọ akori wa, ti a tun sọtọ lati awọn oniyipada paleti awọ jeneriki wa.

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

Awọn awọ grayscale tun wa, ṣugbọn ipin kan nikan ni a lo lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.

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

Maapu

Lẹhinna a fi awọn awọ akori sinu maapu Sass kan ki a le lu wọn lati ṣe agbekalẹ awọn ohun elo wa, awọn iyipada paati, ati diẹ sii.

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

Awọn awọ greyscale tun wa bi maapu Sass kan. Maapu yii kii ṣe lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.

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

Awọn awọ RGB jẹ ipilẹṣẹ lati maapu Sass lọtọ:

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

Ati pe awọn aye awọ kọ lori iyẹn pẹlu maapu tiwọn ti o jẹ nipasẹ API awọn ohun elo:

$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 Awọn ohun elo

Awọn ohun elo awọ jẹ ikede ninu awọn ohun elo API ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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