Colors颜色

Colors颜色

Colorize text with color utilities. 使用颜色实用程序为文本着色。If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.如果您想为链接着色，可以使用.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>

Opacity不透明度

Added in v5.1.0

As of v5.1.0, text color utilities are generated with Sass using CSS variables. 从v5.1.0开始，文本颜色实用程序是使用CSS变量使用Sass生成的。This allows for real-time color changes without compilation and dynamic alpha transparency changes.这允许实时颜色更改而无需编译和动态alpha透明度更改。

How it works作用原理

Consider our default .text-primary utility.考虑默认.text-primary实用程序。

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

We use an RGB version of our --bs-primary (with the value of 13, 110, 253) CSS variable and attached a second CSS variable, --bs-text-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). 我们使用RGB版本的--bs-primaryCSS变量（值为13, 110, 253），并附加了第二个CSS变量--bs-text-opacity，用于alpha透明度（由于本地CSS变量，默认值为1）。That means anytime you use .text-primary now, your computed color value is rgba(13, 110, 253, 1). 这意味着，无论何时使用.text-primary，计算的color值都是rgba(13, 110, 253, 1)。The local CSS variable inside each .text-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.每个.text-*类中的本地CSS变量避免了继承问题，因此实用程序的嵌套实例不会自动修改alpha透明度。

Example实例

To change that opacity, override --bs-text-opacity via custom styles or inline styles.要更改不透明度，请通过自定义样式或内联样式覆盖--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>

Or, choose from any of the .text-opacity utilities:或者，从任何.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>

Specificity特异性

Sometimes contextual classes cannot be applied due to the specificity of another selector. 有时由于另一个选择器的特殊性，上下文类无法应用。In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.在某些情况下，一个足够的解决方法是用所需的类将元素的内容包装在一个<div>或多个语义元素中。

Sass

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.除了以下Sass功能外，还可以考虑阅读我们包含的CSS自定义属性（也称为CSS变量）的颜色等。

Variables变量

Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.大多数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;

Grayscale colors are also available, but only a subset are used to generate any utilities.灰度颜色也可用，但只有一个子集用于生成任何实用程序。

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

Map

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.然后将主题颜色放入Sass映射中，以便我们可以循环使用它们来生成实用程序、组件修改器等。

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

Grayscale colors are also available as a Sass map. 灰度颜色也可用作Sass贴图。This map is not used to generate any utilities.此映射不用于生成任何实用程序。

$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 colors are generated from a separate Sass map:RGB颜色由单独的Sass贴图生成：

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

And color opacities build on that with their own map that’s consumed by the utilities API:颜色不透明度是基于它们自己的贴图构建的，该贴图由实用程序API使用：

$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");

Utilities API实用程序API

Color utilities are declared in our utilities API in scss/_utilities.scss. 颜色实用程序在scss/_utilities.scss中的实用程序API中声明。Learn how to use the utilities API.了解如何使用实用程序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
)
),