Bulma 框架教程

前面《Bulma 简介》一文中我们对 Bulma 有了最基本的认识，本文将介绍它 Bulma 的基本用法。

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。而 Bulma 就是一款这样的框架。

Bulma 的安装只需一步，把样式表插入网页即可。

<link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单，就是为 HTML 元素加上class。

<a class="button">Button</a>

上面的代码为 a 元素加上button类，这个链接就会被渲染成按钮。

Bulma 提供大量的修饰类，用来改变基类的样式。它们都是以is-或has-开头。比如，要改变 Button 的大小，就可以使用下面的修饰类。

<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

Bulma 默认提供6种颜色。

• is-primary
• is-link
• is-info
• is-success
• is-warning
• is-danger

按钮状态的修饰类如下。

• is-hovered
• is-focused
• is-active
• is-loading

完整的修饰类清单请看官方文档。

： » Bulma 框架教程