Bulma 是一个基于 Flexbox 的现代化的 CSS 框架, 设计的初衷就是为了移动优先, 模块化设计, 可以轻松用来实现各种简单或者复制的内容布局.
Bulma 是一个基于 Flexbox 布局模型的免费开源项目. 该 CSS 框架也是轻量级, 响应式的, 并且具备移动优先的理念. 对开发人员而言, Bulma 和 Bootstrap 以及 Foundation 可以一起并列为三大最受欢迎的 CSS 框架, 目前全球已经有超过 15 万名开发人员在使用 Bulma.
Bulma 之所以广受欢迎的原因还有其高度可读的命名规则, 这对于新手开发人员来讲, 会大大降低学习成本. 还有一个比较有意思的点, Bulma 在 GitHub 上可以说是明星选手般的存在, 人气超高.
Bulma 框架最大的特点, 就是简单好用. 所有样式都基于 class, 只需为 html 元素指定 class, 样式立刻生效.
<a class="button is-primary is-large">Login</a>
上面代码中, a 元素只需加上几个 class, 就会出现一个主色调 (is-primary) 的大 (is-large) 按钮.
Bulma 是一个手机优先的框架, 提供五个宽度断点, 具有良好的自适应特性, 可以随心所欲为不同设备设置不同样式.
mobile: 小于等于 768px
tablet: 大于等于 769px
desktop: 大于等于 1024px
widescreen: 大于等于 1216px
fullhd: 大于等于 1408px
它提供二十多种常用组件, 比如表单 , 表格, 图标, 面包屑, 菜单, 导航, Modal 窗口等等. 简单的网站, 可以不用写任何 CSS 代码.
基本用法
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
完整的修饰类清单请看官方文档(https://bulma.io/documentation/elements/button/).
更多 CSS 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/qa/css3/18118.html