颜色辅助类

修改文字和（或）背景的颜色

文字颜色 #

您可以任意设置 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

Since 0.9.0

您可以使用任意颜色的亮色和暗色版本。只需添加 *-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%)`

Since 0.9.0

您可以使用任意颜色的亮色和暗色版本。只需添加 *-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 改进该页内容

#native_company# #native_desc#