Bulma 框架教程

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

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

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

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 框架教程

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进行定制开发

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

1
如无特殊说明,文章均为原作者原创,转载请注明出处
  • 转载请注明来源:Bulma 框架教程
  • 本文永久链接地址:https://www.lisa33xiaoq.net/847.html

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到