颜色(Color)

更改文本和背景的颜色

文本颜色 #

您可以将任何元素设置为10种颜色或9种灰色中的一种:

Class Color Example
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%)
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
Class Shade Example
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
Since 0.9.0

你可以在明暗两种颜色中使用每种颜色。简单地附加*-light or *-dark,*代表每种颜色,例如has-text-primary-light

Class Light/Dark color Example
has-text-primary-light hsl(171, 100%, 96%) Hello Bulma
has-text-link-light hsl(219, 70%, 96%)
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%)
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种灰色中的一种:
同文本颜色比就是把text换成了background。例如,白色文本和白色背景分贝为has-text-white和has-background-white

发发发
Class Background color Example
has-background-white hsl(0, 0%, 100%) Hello Bulma
has-background-black hsl(0, 0%, 4%) Hello Bulma
has-background-light hsl(0, 0%, 96%) Hello Bulma
has-background-dark hsl(0, 0%, 21%) Hello Bulma
has-background-primary hsl(171, 100%, 41%) Hello Bulma
has-background-link hsl(217, 71%, 53%)
has-background-info hsl(204, 86%, 53%) Hello Bulma
has-background-success hsl(141, 71%, 48%) Hello Bulma
has-background-warning hsl(48, 100%, 67%) Hello Bulma
has-background-danger hsl(348, 100%, 61%) Hello Bulma
Class Background shade Example
has-background-black-bis hsl(0, 0%, 7%) Hello Bulma
has-background-black-ter hsl(0, 0%, 14%) Hello Bulma
has-background-grey-darker hsl(0, 0%, 21%) Hello Bulma
has-background-grey-dark hsl(0, 0%, 29%) Hello Bulma
has-background-grey hsl(0, 0%, 48%) Hello Bulma
has-background-grey-light hsl(0, 0%, 71%) Hello Bulma
has-background-grey-lighter hsl(0, 0%, 86%) Hello Bulma
has-background-white-ter hsl(0, 0%, 96%) Hello Bulma
has-background-white-bis hsl(0, 0%, 98%) Hello Bulma
Since 0.9.0

你可以在明暗两种颜色中使用每种颜色。简单地附加*-light or *-dark

Class Light/Dark background Example
has-background-primary-light hsl(171, 100%, 96%) Hello Bulma
has-background-link-light hsl(219, 70%, 96%)
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%)
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

返回头部

问题反馈
返回顶部