通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助

Route Planner and Route Optimizer

颜色调色板助手

将颜色的调色板用作文本颜色和/或背景

Bulma 带有 7 种主色

text
link
primary
info
success
warning
danger

Bulma 会自动为每种颜色生成一系列阴影。这些作为颜色调色板，你可以使用它们来尝试同一种颜色的不同变体。

文本颜色 #

Bulma 带有 CSS 类，用于每种颜色的 27 种阴影。 每种阴影还带有反转等效项，这对于在前景/背景组合中组合很有用。
类 代码 示例 反转
has-text-primary 
<p class="has-text-primary">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-00 
<p class="has-text-primary-00">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-05 
<p class="has-text-primary-05">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-10 
<p class="has-text-primary-10">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-15 
<p class="has-text-primary-15">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-20 
<p class="has-text-primary-20">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-25 
<p class="has-text-primary-25">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-30 
<p class="has-text-primary-30">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-35 
<p class="has-text-primary-35">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-40 
<p class="has-text-primary-40">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-45 
<p class="has-text-primary-45">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-50 
<p class="has-text-primary-50">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-55 
<p class="has-text-primary-55">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-60 
<p class="has-text-primary-60">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-65 
<p class="has-text-primary-65">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-70 
<p class="has-text-primary-70">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-75 
<p class="has-text-primary-75">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-80 
<p class="has-text-primary-80">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-85 
<p class="has-text-primary-85">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-90 
<p class="has-text-primary-90">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-95 
<p class="has-text-primary-95">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-100 
<p class="has-text-primary-100">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-light 
<p class="has-text-primary-light">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-dark 
<p class="has-text-primary-dark">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-soft 
<p class="has-text-primary-soft">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-bold 
<p class="has-text-primary-bold">Hello Bulma</p>
 你好 Bulma 你好 Bulma
has-text-primary-on-scheme 
<p class="has-text-primary-on-scheme">Hello Bulma</p>
 你好 Bulma 你好 Bulma

背景颜色 #

所有 27 种阴影也可用作背景助手。 与反转颜色作为前景相结合，仅需 2 个类即可轻松制作可读元素。
类 代码 示例 色板
has-background-primary 
<p class="has-background-primary has-text-primary-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-00 
<p class="has-background-primary-00 has-text-primary-00-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-05 
<p class="has-background-primary-05 has-text-primary-05-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-10 
<p class="has-background-primary-10 has-text-primary-10-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-15 
<p class="has-background-primary-15 has-text-primary-15-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-20 
<p class="has-background-primary-20 has-text-primary-20-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-25 
<p class="has-background-primary-25 has-text-primary-25-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-30 
<p class="has-background-primary-30 has-text-primary-30-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-35 
<p class="has-background-primary-35 has-text-primary-35-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-40 
<p class="has-background-primary-40 has-text-primary-40-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-45 
<p class="has-background-primary-45 has-text-primary-45-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-50 
<p class="has-background-primary-50 has-text-primary-50-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-55 
<p class="has-background-primary-55 has-text-primary-55-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-60 
<p class="has-background-primary-60 has-text-primary-60-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-65 
<p class="has-background-primary-65 has-text-primary-65-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-70 
<p class="has-background-primary-70 has-text-primary-70-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-75 
<p class="has-background-primary-75 has-text-primary-75-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-80 
<p class="has-background-primary-80 has-text-primary-80-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-85 
<p class="has-background-primary-85 has-text-primary-85-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-90 
<p class="has-background-primary-90 has-text-primary-90-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-95 
<p class="has-background-primary-95 has-text-primary-95-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-100 
<p class="has-background-primary-100 has-text-primary-100-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-light 
<p class="has-background-primary-light has-text-primary-light-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-dark 
<p class="has-background-primary-dark has-text-primary-dark-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-soft 
<p class="has-background-primary-soft has-text-primary-soft-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-bold 
<p class="has-background-primary-bold has-text-primary-bold-invert">
Hello Bulma
</p>
 你好 Bulma
has-background-primary-on-scheme 
<p class="has-background-primary-on-scheme has-text-primary-on-scheme-invert">
Hello Bulma
</p>
 你好 Bulma

如何支持 Bulma

一次性 捐赠

通过进行浏览器测试

访问我们的赞助商

每月捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#
免费开始
免费开始