赞助商
调色板助手
使用颜色的调色板作为文本颜色和/或背景
Bulma 提供 7 种原色
文本 | |
链接 | |
主要 | |
信息 | |
成功 | |
警告 | |
危险 |
Bulma 将自动生成一组色调，适用于每种颜色。这些色调作为调色板，可用于使用同一颜色的不同变体。
文本颜色 #
Bulma 随附 CSS 类，适用于每种颜色的27 种色调。每种色调还随附一个反转等效项，可用于组合前景/背景组合。
| 类 | 代码 | 示例 | 色板 | 反转 | 色板 |
|---|---|---|---|---|---|
has-text-primary |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-00 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-05 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-10 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-15 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-20 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-25 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-30 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-35 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-40 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-45 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-50 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-55 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-60 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-65 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-70 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-75 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-80 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-85 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-90 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-95 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-100 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-light |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-dark |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-soft |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-bold |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-on-scheme |
|
Hello Bulma | Hello Bulma |
背景颜色 #
所有 27 种色调也可用作背景帮助器。结合反转颜色作为前景，只需使用 2 个类即可轻松制作可读元素。
| 类 | 代码 | 示例 | 色板 |
|---|---|---|---|
has-background-primary |
Hello Bulma | ||
has-background-primary-00 |
Hello Bulma | ||
has-background-primary-05 |
Hello Bulma | ||
has-background-primary-10 |
Hello Bulma | ||
has-background-primary-15 |
Hello Bulma | ||
has-background-primary-20 |
Hello Bulma | ||
has-background-primary-25 |
Hello Bulma | ||
has-background-primary-30 |
Hello Bulma | ||
has-background-primary-35 |
Hello Bulma | ||
has-background-primary-40 |
Hello Bulma | ||
has-background-primary-45 |
Hello Bulma | ||
has-background-primary-50 |
Hello Bulma | ||
has-background-primary-55 |
Hello Bulma | ||
has-background-primary-60 |
Hello Bulma | ||
has-background-primary-65 |
Hello Bulma | ||
has-background-primary-70 |
Hello Bulma | ||
has-background-primary-75 |
Hello Bulma | ||
has-background-primary-80 |
Hello Bulma | ||
has-background-primary-85 |
Hello Bulma | ||
has-background-primary-90 |
Hello Bulma | ||
has-background-primary-95 |
Hello Bulma | ||
has-background-primary-100 |
Hello Bulma | ||
has-background-primary-light |
Hello Bulma | ||
has-background-primary-dark |
Hello Bulma | ||
has-background-primary-soft |
Hello Bulma | ||
has-background-primary-bold |
Hello Bulma | ||
has-background-primary-on-scheme |
Hello Bulma |