Irodori彩り

Bootstrap

29 个官方语义 token

共 29 种颜色

简介 Bootstrap

Bootstrap 的色彩系统以语义化主题色为核心,如 $primary、$secondary、$success,并在 _variables.scss 中定义了从 gray-100 到 gray-900 的灰度阶梯。

如何使用

覆盖 SCSS 变量或扩展 $custom-colors 来生成新的工具类。在标记中使用 .bg-*、.text-*、.border-* 等辅助类应用它们。

官方文档

Primary

$primary · --bs-primary

Buttons, links, active states

Secondary

$secondary · --bs-secondary

Secondary buttons and muted UI

Success

$success · --bs-success

Positive actions and alerts

Danger

$danger · --bs-danger

Destructive actions and errors

Warning

$warning · --bs-warning

Warning alerts and badges

Info

$info · --bs-info

Informational alerts

Light

$light · --bs-light

Light gray component background

Dark

$dark · --bs-dark

Dark component background

Blue

$blue

Base theme color, aliased by $blue

Indigo

$indigo

Base theme color, aliased by $indigo

Purple

$purple

Base theme color, aliased by $purple

Pink

$pink

Base theme color, aliased by $pink

Red

$red

Base theme color, aliased by $red

Orange

$orange

Base theme color, aliased by $orange

Yellow

$yellow

Base theme color, aliased by $yellow

Green

$green

Base theme color, aliased by $green

Teal

$teal

Base theme color, aliased by $teal

Cyan

$cyan

Base theme color, aliased by $cyan

Gray 100

$gray-100

Light gray for surfaces

Gray 200

$gray-200

Light gray for surfaces

Gray 300

$gray-300

Light gray for surfaces

Gray 400

$gray-400

Mid gray for borders and muted text

Gray 500

$gray-500

Mid gray for borders and muted text

Gray 600

$gray-600

Mid gray for borders and muted text

Gray 700

$gray-700

Dark gray for text

Gray 800

$gray-800

Dark gray for text

Gray 900

$gray-900

Dark gray for text

Body background

$body-bg

Default page background

Body text

$body-color

Default text color

数据来源: Bootstrap v5.3.8 · _variables.scss