颜色

颜色是用来个性化大多数 Bulma 元素和组件的

多数元素和组件之所以有丰富多彩的颜色变化得益于使用语法的修饰符 .is-$color,例如 is-primary 或者 is-dark

这主要感谢 $colors Sass map,通过该变量 Bulma 可循环抓去所有的颜色和它们的反相颜色。

颜色 变量 计算值 反相值 计算反相值
White $white $white hsl(0, 0%, 100%) $black hsl(0, 0%, 4%)
Black $black $black hsl(0, 0%, 4%) $white hsl(0, 0%, 100%)
Light $light $white-ter hsl(0, 0%, 96%) $grey-darker hsl(0, 0%, 21%)
Dark $dark $grey-darker hsl(0, 0%, 21%) $white-ter hsl(0, 0%, 96%)
Primary $primary $turquoise hsl(171, 100%, 41%) #fff #fff
Link $link $blue hsl(217, 71%, 53%) #fff #fff
Info $info $cyan hsl(204, 86%, 53%) #fff #fff
Success $success $green hsl(141, 53%, 53%) #fff #fff
Warning $warning $yellow hsl(48, 100%, 67%) rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7)
Danger $danger $red hsl(348, 100%, 61%) #fff #fff

Bulma 也提供 $shades Sass map,该值包含介于黑和白之间的灰度阴影值。

颜色 变量
Black bis $black-bis hsl(0, 0%, 7%)
Black ter $black-ter hsl(0, 0%, 14%)
Grey darker $grey-darker hsl(0, 0%, 21%)
Grey dark $grey-dark hsl(0, 0%, 29%)
Grey light $grey-light hsl(0, 0%, 71%)
Grey lighter $grey-lighter hsl(0, 0%, 86%)
White ter $white-ter hsl(0, 0%, 96%)
White bis $white-bis hsl(0, 0%, 98%)

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!