今天主要将介绍它 Bulma 的基本用法。前面介绍BULMA 框架网格体系(原理),相信大家对Bulma有一定了解了。
更多精彩内容请看 web 前端中文站
http://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进行定制开发
【注:本文源自网络文章资源,由站长整理发布】