今天主要将介绍它 Bulma 的基本用法。前面介绍BULMA 框架网格体系(原理)，相信大家对Bulma有一定了解了。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

网页样式需要大量时间开发，最省事的方法就是使用 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，主要包括BULMA 文字、颜色、字体，以及Bulma响应式布局，直至运用Bulma进行定制开发

【注：本文源自网络文章资源，由站长整理发布】