Loading...
加载中...

Bootstrap5的颜色

Bootstrap的色彩调色板在v5.3.0中持续扩展并变得更加细腻。我们新增了文本和背景颜色的变量,以及主题颜色。这些新颜色可以通过Sass和CSS变量提供(但不包括我们的颜色映射或实用类),明确目标是让用户更容易在明暗等多种颜色模式中进行自定义。这些新变量被全局设置并调整为我们的新深色模式,而原有主题颜色保持不变。下面是颜色预览地址。

https://v5.bootcss.com/docs/customize/color/


secondarytertiary{color}-bg-subtle{color}-border-subtle{color}-text:root

以 为 的颜色表示在 和 颜色模式中使用的数值。例如, 。-rgbred, green, bluergb()rgba()rgba(var(--bs-secondary-bg-rgb), .5)

小心!我们新的次要和三级颜色,以及现有的次要主题色,以及浅色和深色主题色,可能会有些混淆。预计这会在第六版中得到解决。
描述样板变量
正文——默认的前景色(颜色)和背景,包括组件。
 
--bs-body-color
--bs-body-color-rgb
 
--bs-body-bg
--bs-body-bg-rgb
次要——使用较轻的文字选项。使用分隔器和显示禁用组件状态的选项。colorbg
 
--bs-secondary-color
--bs-secondary-color-rgb
 
--bs-secondary-bg
--bs-secondary-bg-rgb
第三阶段——使用更轻的文字选项。使用为悬浮状态、重音和油井设计背景的选项。colorbg
 
--bs-tertiary-color
--bs-tertiary-color-rgb
 
--bs-tertiary-bg
--bs-tertiary-bg-rgb
重点——对于高对比度文本。背景不适用。
 
--bs-emphasis-color
--bs-emphasis-color-rgb
边境——用于组成边界、分隔线和规则。用来和背景混合,背景有明暗。--bs-border-color-translucentrgba()
 
--bs-border-color
--bs-border-color-rgb
小学——主题颜色,用于超链接、焦点样式以及组件和表单的主动状态。
小学
--bs-primary
--bs-primary-rgb
背景 细腻
--bs-primary-bg-subtle
边界微妙
--bs-primary-border-subtle
正文
--bs-primary-text
成功——主题颜色用于积极或成功的行动和信息。
成功
--bs-success
--bs-success-rgb
背景 细腻
--bs-success-bg-subtle
边界微妙
--bs-success-border-subtle
正文
--bs-success-text
危险——主题色用于错误和危险动作。
危险
--bs-danger
--bs-danger-rgb
背景 细腻
--bs-danger-bg-subtle
边界微妙
--bs-danger-border-subtle
正文
--bs-danger-text
警告——主题颜色用于非破坏性警告信息。
警告
--bs-warning
--bs-warning-rgb
背景 细腻
--bs-warning-bg-subtle
边界微妙
--bs-warning-border-subtle
正文
--bs-warning-text
信息 —主题色用于中性且信息丰富的内容。
信息
--bs-info
--bs-info-rgb
背景 细腻
--bs-info-bg-subtle
边界微妙
--bs-info-border-subtle
正文
--bs-info-text
光——新增主题选项,颜色对比度较低。
光
--bs-light
--bs-light-rgb
背景 细腻
--bs-light-bg-subtle
边界微妙
--bs-light-border-subtle
正文
--bs-light-text
黑暗——新增主题选项,用于更高对比度的颜色。
黑暗
--bs-dark
--bs-dark-rgb
背景 细腻
--bs-dark-bg-subtle
边界微妙
--bs-dark-border-subtle
正文
--bs-dark-text


Copyright © 2026 文档系统 All Rights Reserved