您可以任意设置 10 种颜色或者9 种灰色阴影之一:
颜色辅助类
修改文字和(或)背景的颜色
文字颜色 #
类 | 颜色 | 示例 |
---|---|---|
has-text-white |
hsl(0, 0%, 100%)
| Hello Bulma |
has-text-black |
hsl(0, 0%, 4%)
| Hello Bulma |
has-text-light |
hsl(0, 0%, 96%)
| Hello Bulma |
has-text-dark |
hsl(0, 0%, 21%)
| Hello Bulma |
has-text-primary |
hsl(171, 100%, 41%)
| Hello Bulma |
has-text-link |
hsl(217, 71%, 53%)
| Hello Bulma |
has-text-info |
hsl(204, 86%, 53%)
| Hello Bulma |
has-text-success |
hsl(141, 71%, 48%)
| Hello Bulma |
has-text-warning |
hsl(48, 100%, 67%)
| Hello Bulma |
has-text-danger |
hsl(348, 100%, 61%)
| Hello Bulma |
类 | 阴影 | 示例 |
---|---|---|
has-text-black-bis |
hsl(0, 0%, 7%)
| Hello Bulma |
has-text-black-ter |
hsl(0, 0%, 14%)
| Hello Bulma |
has-text-grey-darker |
hsl(0, 0%, 21%)
| Hello Bulma |
has-text-grey-dark |
hsl(0, 0%, 29%)
| Hello Bulma |
has-text-grey |
hsl(0, 0%, 48%)
| Hello Bulma |
has-text-grey-light |
hsl(0, 0%, 71%)
| Hello Bulma |
has-text-grey-lighter |
hsl(0, 0%, 86%)
| Hello Bulma |
has-text-white-ter |
hsl(0, 0%, 96%)
| Hello Bulma |
has-text-white-bis |
hsl(0, 0%, 98%)
| Hello Bulma |
您可以使用任意颜色的亮色和暗色版本。只需添加 *-light
或者 *-dark
即可。
类 | 亮/暗 色 | 示例 |
---|---|---|
has-text-primary-light |
hsl(171, 100%, 96%)
| Hello Bulma |
has-text-link-light |
hsl(219, 70%, 96%)
| Hello Bulma |
has-text-info-light |
hsl(206, 70%, 96%)
| Hello Bulma |
has-text-success-light |
hsl(142, 52%, 96%)
| Hello Bulma |
has-text-warning-light |
hsl(48, 100%, 96%)
| Hello Bulma |
has-text-danger-light |
hsl(347, 90%, 96%)
| Hello Bulma |
has-text-primary-dark |
hsl(171, 100%, 29%)
| Hello Bulma |
has-text-link-dark |
hsl(217, 71%, 45%)
| Hello Bulma |
has-text-info-dark |
hsl(204, 71%, 39%)
| Hello Bulma |
has-text-success-dark |
hsl(141, 53%, 31%)
| Hello Bulma |
has-text-warning-dark |
hsl(48, 100%, 29%)
| Hello Bulma |
has-text-danger-dark |
hsl(348, 86%, 43%)
| Hello Bulma |
背景色 #
您可以设置任何元素为 10 种颜色或者 9 种灰色阴影之一:
类 | 背景色 |
---|---|
has-background-white |
hsl(0, 0%, 100%)
|
has-background-black |
hsl(0, 0%, 4%)
|
has-background-light |
hsl(0, 0%, 96%)
|
has-background-dark |
hsl(0, 0%, 21%)
|
has-background-primary |
hsl(171, 100%, 41%)
|
has-background-link |
hsl(217, 71%, 53%)
|
has-background-info |
hsl(204, 86%, 53%)
|
has-background-success |
hsl(141, 71%, 48%)
|
has-background-warning |
hsl(48, 100%, 67%)
|
has-background-danger |
hsl(348, 100%, 61%)
|
类 | 背景阴影 |
---|---|
has-background-black-bis |
hsl(0, 0%, 7%)
|
has-background-black-ter |
hsl(0, 0%, 14%)
|
has-background-grey-darker |
hsl(0, 0%, 21%)
|
has-background-grey-dark |
hsl(0, 0%, 29%)
|
has-background-grey |
hsl(0, 0%, 48%)
|
has-background-grey-light |
hsl(0, 0%, 71%)
|
has-background-grey-lighter |
hsl(0, 0%, 86%)
|
has-background-white-ter |
hsl(0, 0%, 96%)
|
has-background-white-bis |
hsl(0, 0%, 98%)
|
您可以使用任意颜色的亮色和暗色版本。只需添加 *-light
或者 *-dark
即可。
类 | 亮色/暗色 背景 | 示例 |
---|---|---|
has-background-primary-light |
hsl(171, 100%, 96%)
| Hello Bulma |
has-background-link-light |
hsl(219, 70%, 96%)
| Hello Bulma |
has-background-info-light |
hsl(206, 70%, 96%)
| Hello Bulma |
has-background-success-light |
hsl(142, 52%, 96%)
| Hello Bulma |
has-background-warning-light |
hsl(48, 100%, 96%)
| Hello Bulma |
has-background-danger-light |
hsl(347, 90%, 96%)
| Hello Bulma |
has-background-primary-dark |
hsl(171, 100%, 29%)
| Hello Bulma |
has-background-link-dark |
hsl(217, 71%, 45%)
| Hello Bulma |
has-background-info-dark |
hsl(204, 71%, 39%)
| Hello Bulma |
has-background-success-dark |
hsl(141, 53%, 31%)
| Hello Bulma |
has-background-warning-dark |
hsl(48, 100%, 29%)
| Hello Bulma |
has-background-danger-dark |
hsl(348, 86%, 43%)
| Hello Bulma |
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容