Bulma 框架教程

HTML5 herman 3092浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

前面《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)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

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