颜色 · Bootstrap 6.0 中文文档

类名	样式
.fg-primary	--bs-fg: var(--bs-primary-fg); color: var(--bs-fg);
.fg-强调色	--bs-fg: var(--bs-accent-fg); color: var(--bs-fg);
.fg-success	--bs-fg: var(--bs-success-fg); color: var(--bs-fg);
.fg-danger	--bs-fg: var(--bs-danger-fg); color: var(--bs-fg);
.fg-warning	--bs-fg: var(--bs-warning-fg); color: var(--bs-fg);
.fg-info	--bs-fg: var(--bs-info-fg); color: var(--bs-fg);
.fg-反色	--bs-fg: var(--bs-inverse-fg); color: var(--bs-fg);
.fg-secondary	--bs-fg: var(--bs-secondary-fg); color: var(--bs-fg);
.fg-body	--bs-fg: var(--bs-fg-body); color: var(--bs-fg);
.fg-1	--bs-fg: var(--bs-fg-1); color: var(--bs-fg);
.fg-2	--bs-fg: var(--bs-fg-2); color: var(--bs-fg);
.fg-3	--bs-fg: var(--bs-fg-3); color: var(--bs-fg);
.fg-4	--bs-fg: var(--bs-fg-4); color: var(--bs-fg);
.fg-bg	--bs-fg: var(--bs-fg-bg); color: var(--bs-fg);
.fg-white	--bs-fg: var(--bs-fg-white); color: var(--bs-fg);
.fg-black	--bs-fg: var(--bs-fg-black); color: var(--bs-fg);
.fg-reset	--bs-fg: inherit; color: var(--bs-fg);
.fg-emphasis-primary	--bs-fg: var(--bs-primary-fg-emphasis); color: var(--bs-fg);
.fg-强调-重音	--bs-fg: var(--bs-accent-fg-emphasis); color: var(--bs-fg);
.fg-emphasis-success	--bs-fg: var(--bs-success-fg-emphasis); color: var(--bs-fg);
.fg-emphasis-danger	--bs-fg: var(--bs-danger-fg-emphasis); color: var(--bs-fg);
.fg-强调-警告	--bs-fg: var(--bs-warning-fg-emphasis); color: var(--bs-fg);
.fg-强调-信息	--bs-fg: var(--bs-info-fg-emphasis); color: var(--bs-fg);
.fg-强调-反向	--bs-fg: var(--bs-inverse-fg-emphasis); color: var(--bs-fg);
.fg-次要强调	--bs-fg: var(--bs-secondary-fg-emphasis); color: var(--bs-fg);
.fg-10	color: color-mix(in oklch, var(--bs-fg) 10%, transparent);
.fg-20	color: color-mix(in oklch, var(--bs-fg) 20%, transparent);
.fg-30	color: color-mix(in oklch, var(--bs-fg) 30%, transparent);
.fg-40	color: color-mix(in oklch, var(--bs-fg) 40%, transparent);
.fg-50	color: color-mix(in oklch, var(--bs-fg) 50%, transparent);
.fg-60	color: color-mix(in oklch, var(--bs-fg) 60%, transparent);
.fg-70	color: color-mix(in oklch, var(--bs-fg) 70%, transparent);
.fg-80	color: color-mix(in oklch, var(--bs-fg) 80%, transparent);
.fg-90	color: color-mix(in oklch, var(--bs-fg) 90%, transparent);
.fg-100	color: var(--bs-fg);
.fg-contrast-primary	--bs-fg: var(--bs-primary-contrast); color: var(--bs-fg);
.fg-对比-强调	--bs-fg: var(--bs-accent-contrast); color: var(--bs-fg);
.fg-contrast-success	--bs-fg: var(--bs-success-contrast); color: var(--bs-fg);
.fg-contrast-danger	--bs-fg: var(--bs-danger-contrast); color: var(--bs-fg);
.fg-contrast-warning	--bs-fg: var(--bs-warning-contrast); color: var(--bs-fg);
.fg-contrast-info	--bs-fg: var(--bs-info-contrast); color: var(--bs-fg);
.fg-contrast-inverse	--bs-fg: var(--bs-inverse-contrast); color: var(--bs-fg);
.fg-contrast-secondary	--bs-fg: var(--bs-secondary-contrast); color: var(--bs-fg);

可访问性提示：使用颜色传达含义

仅使用颜色来增加意义只提供视觉提示，这不会传达给使用辅助技术（如屏幕阅读器）的用户。请确保意义从内容本身即可明显体现（例如，可见文本与 足够的 颜色对比) 或通过替代方式包含，例如通过隐藏的附加文本 .visually-hidden 班级

颜色

改变 color 使用基于我们主题颜色的工具类 .fg-{color} 和 .fg-emphasis-{color}. 所有这些颜色工具都设置了 color 属性到本地 CSS 变量， --bs-fg，它具有主题颜色的值。根颜色令牌的颜色值也使用 light-dark() 确保在明暗两种颜色模式下都有足够的对比度。

例如，.fg-primary 将 --bs-fg 变量设置为 var(--bs-primary-fg)：

CSS

          .fg-primary {
  --bs-fg: var(--bs-primary-fg);
  color: var(--bs-fg);
}

这种方法还允许我们轻松地使用我们的 .fg-{opacity} 工具支持半透明，因为我们可以使用 color-mix() 配合 CSS 变量来生成适当的颜色。有关更多详细信息，请参阅不透明度部分。

如果你想给链接上色，你可以使用 .link-{color} 工具，它们有 :hover 和 :focus 状态。

.fg-primary

.fg-emphasis-primary

.fg-强调色

.fg-强调-重音

.fg-success

.fg-emphasis-success

.fg-danger

.fg-emphasis-danger

.fg-warning

.fg-强调-警告

.fg-info

.fg-强调-信息

.fg-反色

.fg-强调-反向

.fg-secondary

.fg-emphasis-secondary

.fg-body

.fg-1

.fg-2

.fg-3

.fg-4

.fg-black

.fg-white

HTML

<p class="fg-primary">.fg-primary</p>
<p class="fg-emphasis-primary">.fg-emphasis-primary</p>
<p class="fg-accent">.fg-accent</p>
<p class="fg-emphasis-accent">.fg-emphasis-accent</p>
<p class="fg-success">.fg-success</p>
<p class="fg-emphasis-success">.fg-emphasis-success</p>
<p class="fg-danger">.fg-danger</p>
<p class="fg-emphasis-danger">.fg-emphasis-danger</p>
<p class="fg-warning">.fg-warning</p>
<p class="fg-emphasis-warning">.fg-emphasis-warning</p>
<p class="fg-info">.fg-info</p>
<p class="fg-emphasis-info">.fg-emphasis-info</p>
<p class="fg-inverse">.fg-inverse</p>
<p class="fg-emphasis-inverse">.fg-emphasis-inverse</p>
<p class="fg-secondary">.fg-secondary</p>
<p class="fg-emphasis-secondary">.fg-emphasis-secondary</p>

<p class="fg-body">.fg-body</p>
<p class="fg-1">.fg-1</p>
<p class="fg-2">.fg-2</p>
<p class="fg-3">.fg-3</p>
<p class="fg-4">.fg-4</p>

<p class="fg-black bg-white">.fg-black</p>
<p class="fg-white bg-black">.fg-white</p>

不透明度

通过使用任何 .fg-<percentage> 工具来改变文本颜色的透明度，这些工具使用 color-mix() 将文本颜色与 transparent 混合，这得益于上面提到的 CSS 变量方法。

这是默认主要文本

这是90%不透明度的主要文本

这是 80% 不透明度的主要文本

这是70%不透明度的主要文本

这是60%不透明度的主要文本

这是50%不透明度的主要文本

这是40%不透明度的主要文本

这是30%不透明度的主要文本

这是 20% 不透明度的主要文本

这是10%不透明度的主要文本

HTML

<div class="fg-primary">This is default primary text</div>
<div class="fg-primary fg-90">This is 90% opacity primary text</div>
<div class="fg-primary fg-80">This is 80% opacity primary text</div>
<div class="fg-primary fg-70">This is 70% opacity primary text</div>
<div class="fg-primary fg-60">This is 60% opacity primary text</div>
<div class="fg-primary fg-50">This is 50% opacity primary text</div>
<div class="fg-primary fg-40">This is 40% opacity primary text</div>
<div class="fg-primary fg-30">This is 30% opacity primary text</div>
<div class="fg-primary fg-20">This is 20% opacity primary text</div>
<div class="fg-primary fg-10">This is 10% opacity primary text</div>

对比色

用 .fg-contrast-{color} 更改文本或链接的对比色。这将把 --bs-fg 变量设置为主题的 contrast 关键色。

CSS

          .fg-contrast-primary {
  --bs-fg: var(--bs-white);
  color: var(--bs-fg);
}

.fg-contrast-primary

.fg-对比-强调

.fg-contrast-success

.fg-contrast-danger

.fg-contrast-warning

.fg-contrast-info

.fg-contrast-inverse

.fg-contrast-secondary

HTML

<p class="bg-primary fg-contrast-primary">.fg-contrast-primary</p>
<p class="bg-accent fg-contrast-accent">.fg-contrast-accent</p>
<p class="bg-success fg-contrast-success">.fg-contrast-success</p>
<p class="bg-danger fg-contrast-danger">.fg-contrast-danger</p>
<p class="bg-warning fg-contrast-warning">.fg-contrast-warning</p>
<p class="bg-info fg-contrast-info">.fg-contrast-info</p>
<p class="bg-inverse fg-contrast-inverse">.fg-contrast-inverse</p>
<p class="bg-secondary fg-contrast-secondary">.fg-contrast-secondary</p>

这些甚至可以与不透明度工具类混合使用。

.fg-contrast-primary fg-100

.fg-contrast-primary fg-90

.fg-contrast-primary fg-80

.fg-contrast-primary fg-70

.fg-contrast-primary fg-60

.fg-contrast-primary fg-50

.fg-contrast-primary fg-40

.fg-contrast-primary fg-30

.fg-contrast-primary fg-20

.fg-contrast-primary fg-10

HTML

<p class="bg-primary fg-contrast-primary fg-100">.fg-contrast-primary fg-100</p>
<p class="bg-primary fg-contrast-primary fg-90">.fg-contrast-primary fg-90</p>
<p class="bg-primary fg-contrast-primary fg-80">.fg-contrast-primary fg-80</p>
<p class="bg-primary fg-contrast-primary fg-70">.fg-contrast-primary fg-70</p>
<p class="bg-primary fg-contrast-primary fg-60">.fg-contrast-primary fg-60</p>
<p class="bg-primary fg-contrast-primary fg-50">.fg-contrast-primary fg-50</p>
<p class="bg-primary fg-contrast-primary fg-40">.fg-contrast-primary fg-40</p>
<p class="bg-primary fg-contrast-primary fg-30">.fg-contrast-primary fg-30</p>
<p class="bg-primary fg-contrast-primary fg-20">.fg-contrast-primary fg-20</p>
<p class="bg-primary fg-contrast-primary fg-10">.fg-contrast-primary fg-10</p>

重置颜色

使用 .fg-reset 重置文本或链接的颜色，使其继承自父元素的颜色。

带有危险文本的普通链接和一个重置链接.

HTML

<p class="fg-danger">
  Danger text with a <a href="#">normal link</a> and a <a href="#" class="fg-reset">reset link</a>.
</p>

特异性

有时由于另一个选择器的特异性，无法应用上下文类。在某些情况下，一个足够的解决方法是将元素的内容包裹在一个 <div> 或更多具有所需类的语义元素。

CSS

除了以下 Sass 功能之外，还可以考虑阅读我们包含的 CSS 自定义属性（也称为 CSS 变量），用于颜色和其他内容。

Sass 变量

大多数color工具类是由我们的主题颜色生成的，这些颜色从我们的通用调色板变量重新分配。灰度颜色也可用，但只有部分颜色被用于生成任何工具类。有关我们的基础颜色变量和映射，请参阅颜色文档。

Sass map

主题颜色随后被放入 Sass map中，以便我们可以循环它们来生成我们的工具类、组件修改器等。见主题完整文档 $theme-colors Sass map。

Sass 工具 API

颜色工具在我们的工具类 API 中的 scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss

"fg": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg,
  values: map.merge(
    map.merge(theme-color-refs("fg"), theme-token-refs($theme-fgs, "fg")),
    (reset: inherit)
  ),
),
"fg-emphasis": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg-emphasis,
  values: theme-color-refs("fg-emphasis"),
),
"fg-contrast": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg-contrast,
  values: theme-color-refs("contrast"),
),
"fg-opacity": (
  class: fg,
  property: color,
  values: theme-opacity-values(--fg)
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
  property: color,
  // css-var: true,
  class: link,
  state: hover,
  values: theme-opacity-values(--link-color)
),
// scss-docs-end utils-links
// scss-docs-start utils-underline
"underline-offset": (
  property: text-underline-offset,
  class: underline-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"underline-color": (
  property: (
    "--underline-color": null,
    "text-decoration-color": var(--underline-color)
  ),
  class: underline,
  values: theme-color-values("fg"),
),
"underline-opacity": (
  property: text-decoration-color,
  class: underline,
  state: hover,
  values: theme-opacity-values(--underline-color, currentcolor)
),
"underline-thickness": (
  property: text-decoration-thickness,
  class: underline-thickness,
  state: hover,
  values: (
    1: 1px,
    2: 2px,
    3: 3px,
    4: 4px,
    5: 5px,
  )
),
// scss-docs-end utils-underline
// scss-docs-start utils-bg-color
"bg-color": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg,
  values: map.merge(theme-color-refs("bg"), theme-token-refs($theme-bgs, "bg")),
),
"bg-color-subtle": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-subtle,
  values: theme-color-refs("bg-subtle"),
),
"bg-color-muted": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-muted,
  values: theme-color-refs("bg-muted"),
),
"bg-opacity": (
  class: bg,
  property: background-color,
  values: theme-opacity-values(--bg)
),
// scss-docs-end utils-bg-color
// scss-docs-start utils-theme
// Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors
"theme-contrast": (
  property: (
    "background-color": var(--theme-bg),
    "color": var(--theme-contrast)
  ),
  class: theme-contrast,
  values: (null: null)
),
"theme-subtle": (
  property: (
    "background-color": var(--theme-bg-subtle),
    "color": var(--theme-fg)
  ),
  class: theme-subtle,
  values: (null: null)
),
"theme-muted": (
  property: (
    "background-color": var(--theme-bg-muted),
    "color": var(--theme-fg-emphasis)
  ),
  class: theme-muted,
  values: (null: null)
),
"theme-border": (
  property: border,
  class: theme-border,
  values: (null: var(--border-width) solid var(--theme-border))
),
// scss-docs-end utils-theme
"gradient": (
  property: background-image,
  class: bg,
  values: (gradient: var(--gradient))
),
// scss-docs-start utils-color-scheme
"color-scheme": (
  property: color-scheme,
  class: color-scheme,
  values: (
    light: light,
    dark: dark,
    auto: light dark,
  )
),