文章目录

• • 1. 引入Bulma
  • 2. 字体和颜色
  • 3. 间距和容器

1. 引入Bulma

通过 CDN 引入：

官网还有其他多种引入方式。

2. 字体和颜色

在 Bulma 中，元素的大小是通过给元素一个类来实现的，并且大多数的 bulma 类是以 is 或者 has 开头的。通过给元素设置类为class="is-size-数字1-7"来实现不同的大小的字体。

Hello, Bulma
Hello, Bulma
Hello, Bulma
Hello, Bulma

同样的，还可以设置字体的大小写、倾斜、粗细：

Hello again
Hello again
Hello again
Hello again

我们还可以利用 bulma 快速创建标题，比如主标题和副标题：

Title
Subtitle

我们还可以实现文本居中和靠左、靠右对齐：

Hello, Bulma
Hello, Bulma

默认情况下，我们使用 bulma 的字体颜色都是深灰色，改变字体颜色同样需要不同的类型去设置。

I'm primary text
I'm warning text
I'm danger text
I'm info text
I'm success text
I'm dark text
I'm light text

我们可以通过在类名后，追加 light 或 dark，让字体颜色变得更亮或更暗：

I'm danger text
I'm danger text
I'm danger text

我们也可以设置字体的背景颜色，同样是通过不同的连字符组合进行：

I'm primary text
I'm warning text
I'm warning text

在官方文档中我们可以找到更多的颜色对应的类名。

3. 间距和容器

在 Bulma 中，间距也可以通过类名来控制。

p 代表 padding，m 代表 margin，y 代表在y轴方向上添加间距，x 代表在 x轴方向上添加间距，t 代表在 top 方向添加间距，b 代表在 bottom 方向上添加间距，同理，l 和 r 分别代表在左和右方向上添加间距。数字 1-6 表示间距的强度。

组合使用的效果是这样的：

Hello, Bulma
Hello, Bulma
Hello, Bulma

我们也可以利用 section 标签（或是 section 和 container 类）来对一段文本设置间距：

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius odio ad temporibus ab! Quibusdam beatae mollitiaquidem facere nihil fuga sint ducimus neque. Quaerat dolores dicta nam sequi, alias reiciendis quas voluptate illoat quis eveniet recusandae corrupti maxime expedita!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius odio ad temporibus ab! Quibusdam beatae mollitiaquidem facere nihil fuga sint ducimus neque. Quaerat dolores dicta nam sequi, alias reiciendis quas voluptateillo at quis eveniet recusandae corrupti maxime expedita!