Bulma 框架教程

HTML5 herman 1893浏览 0评论

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

网页样式需要大量时间开发,最省事的方法就是使用 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 Button

Bulma 默认提供6种颜色。

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

Bulma 提供的6种颜色

按钮状态的修饰类如下。

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

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Bulma 框架教程