CSS 框架 Bulma 教程

作者: 阮一峰

日期: 2017年10月24日

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

Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。

我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站,本文结尾有他们的简介,最近想换工作的朋友可以看一下。

一、简介

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

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

三、网格体系

Bulma 的网格体系基于 Flex 布局,写起来非常容易。最简单的用法就是使用columns指定容器,使用column指定项目。


<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth</div>
</div>

屏幕宽度大于 768px 时,所有项目平铺,平分容器的宽度;宽度小于等于 768px 时,所有项目变成垂直堆叠。

以下的修饰类用来指定项目的宽度。

  • 四分之三:is-three-quarters
  • 四分之一: is-one-quarter
  • 三分之二:is-two-thirds
  • 三分之一:is-one-third
  • 二分之一:is-half
  • 五分之四:is-four-fifths
  • 五分之三:is-three-fifths
  • 五分之二:is-two-fifths
  • 五分之一:is-one-fifth

此外,还有一些修饰类也非常有用。

  • is-narrow:网格的宽度由内容的宽度决定
  • is-centered:网格内容居中对齐
  • is-gapless:网格之间没有间距

Bulma 也支持12网格体系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

如果要指定某个网格偏移,可以用is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

四、响应式布局

前面说过,Bulma 有五个宽度断点,分别是 mobile(手机)、tablet(平板)、desktop(桌面)、widescreen(宽屏)、fullHD(高清)。

columns布局默认是在手机上垂直堆叠,其他宽度都是平铺。如果希望手机也保持平铺,可以加上is-mobile修饰类。


<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

如果希望手机和平板是垂直堆叠,其他宽度平铺,可以使用is-desktop修饰类。


<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

如果希望在不同设备,网格占据不同的宽度,可以像下面这样写。


<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>

上面代码中,这个网格在手机上占据二分之一宽度,平板三分之一宽度,桌面四分之一宽度,宽屏和高清则是平铺。

Bulma 允许为不同设备指定不同的布局。


<div class="
  column
  is-flex-mobile
  is-inline-tablet
  is-block-desktop
">
</div>

上面代码中,手机是 flex 布局,平板是 inline 布局,其他宽度是 block 布局。

下面是隐藏某个项目的修饰类。

  • is-hidden-mobile:只在手机隐藏
  • is-hidden-tablet-only:只在平板隐藏
  • is-hidden-desktop-only :只在桌面隐藏
  • is-hidden-touch:手机和平板隐藏,其他宽度显示

完整的清单请看官方文档

五、文字

Bulma 提供7个修饰指定文字大小。

  • is-size-1: 3rem
  • is-size-2: 2.5rem
  • is-size-3: 2rem
  • is-size-4: 1.5rem
  • is-size-5: 1.25rem
  • is-size-6: 1rem
  • is-size-7: 0.75rem

可以为不同设备指定不同的文字大小。

  • is-size-1-mobile:手机是 size-1
  • is-size-1-tablet:平板是 size-1
  • is-size-1-touch:手机和平板是 size-1
  • is-size-1-desktop:桌面、宽屏和高清是 size-1
  • is-size-1-widescreen:宽屏和高清是 size-1
  • is-size-1-fullhd:高清是 size-1

此外,还有字体颜色对齐轻重的修饰类。

六、定制

最后这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma 采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用 SASS

首先,克隆或下载源码。


$ git clone https://github.com/jgthms/bulma.git

然后,安装依赖。


$ cd bulma
$ npm install

接着,在源码的根目录里面,新建一个app.sass文件,定制的代码都写在这个文件。在它里面,先引入 Bulma 基础变量。如果需要的话,可以改掉。


@import "./sass/utilities/initial-variables"

$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面代码中,预设的bluepinkfamily-serif变量被改掉。

有一些 Bulma 变量是从基础变量衍生的,需要的话也可以改掉。


$primary: $pink

上面代码中,主色调改成了pink变量。

接着,在这个文件里面加载 Bulma 的入口脚本


@import "./bulma"

这一行的下面,你就可以写自己的样式了,比如为所有标题加一个下划线。


.title {
  text-decoration: underline;
}

最后,打开package.json,找到下面这一行。


"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",

把里面的bulma.sass改成app.sass


"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",

以后每次修改完样式,运行一下npm run build,就会生成自己的样式表css/bulma.css了。

(全文完)

================================

优秀的人才不缺工作机会,只缺适合自己的好机会。但是他们往往没有精力,从海量机会中找到最适合的那个。

100offer 让您可以向数百家互联网企业,匿名展示简历和职业期望,省下查找职位和投递简历的时间。通过这种方式,对您感兴趣的企业,主动邀请您参加面试。

100offer 的用户之中,既有厌倦了大公司螺丝钉般的重复工作,转而进入创业公司的前 BAT 员工;也有在小公司工作多年,一心想进入大公司的互联网人;还有向往国外的工作与生活,成功肉身翻墙新加坡的工程师。

准备好用不一样的方式迎接更好的职业机会了吗?现在就提交申请吧!

另外,10月24日是程序员节。作为一名敲代码为生的程序员,你是不是被旁人贴过太多不属于你的标签----死板、呆萌、宅、不解人意?

100offer 给你一个撕掉标签的机会:关注 100offer 微信号,发送一段话/一张图/一段视频/一条语音...展示你除了敲代码以外的神技能,还有最高价值1024元的"程序员兴趣基金"等你拿!

(完)

留言(47条)

没感觉比bootstrap有特色

一个新技术的出现肯定是为了弥补现存技术的缺陷,很好奇这玩意比 Bootstrap 的优势在哪?难道是更加轻量级??

基于 flex 。。。就表示。。。。。。。

引用dkvirus的发言:

一个新技术的出现肯定是为了弥补现存技术的缺陷,很好奇这玩意比 Bootstrap 的优势在哪?难道是更加轻量级??

想多了,就是个玩票性质的,愿意用就用。

不错,可以试试。

,大神推荐的东西准没错,感谢峰哥,

引用dkvirus的发言:

一个新技术的出现肯定是为了弥补现存技术的缺陷,很好奇这玩意比 Bootstrap 的优势在哪?难道是更加轻量级??

也许是这个比较纯粹, 只有CSS,没有JS,要使用和Jquery冲突的JS框架就可以用这个

这篇文章的目的是单纯为了发广告?

确实感觉没什么特色,优势在哪呢?

多了一個空格:


is-hidden-desktop-only :只在桌面隐藏

四分之一: is-one-quarter

我在自己的网站用过,putianxi.github.io

先说优点:

1. 纯 CSS,没有 JS 依赖,配合 Vue,React 等很方便

2. 默认样式比较漂亮,比起 BootStrap 漂亮不少

再说缺点:

1. 正因为没有 JS,有些组件不全,需要自己找 Jquery 相关的组件补

2. 采用 Flex,低版本浏览器兼容就别想了

3. 文档逻辑比较奇怪,而且感觉也不全,之前做移动端的面包菜单,就找了挺久

4. 毕竟小众,有问题只能靠自己

总结

总体来说,如果你的网站没有复杂的交互,值得一试,但是大一点的网站,BootStrap, Semantic-UI 之类的可能更靠谱

我主要做后端,偶尔做前端页面,所以如果以上内容有不周之处,欢迎指证

我还是继续用Bootstrap吧,顺便推荐一下https://www.froala.com/design-blocks

老师老师~ 这个能兼容到win7(IE8)嘛?

最后应该是运行npm run build-sass吧?

阮大神,其实我第一眼看上你主要是你的技术文章写的很漂亮,要不你有时间介绍一下你是怎么写的这么漂亮的,用的markdown吗?

阮老师的网站都被和谐了!艹,当局!

引用寻找安多芬的发言:

阮老师的网站都被和谐了!艹,当局!

作死

感觉就是简化了classname的bootstrap

这框架感觉很方便

前端框架太多了,功能相似的我就选择bootstrap还是靠谱点
顺便推荐一下 bootstrap在线手册 http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

最大优点当然是无js依赖,可以无痛的与vue等js框架一起使用。另外还有两个更加简单的纯css工具推荐一下, 一个是基础样式类 http://basscss.com/ 一个是颜色类 http://clrs.cc/ 加上bulma, 可以减少90%的自定义样式。

和bootstrap同属一路货色

最近在做一个产品选型的时候就选择了bulma,然后来这里就看到一峰兄的这篇文章,真是不谋而合啊

阮老师,能加微信讨论下吗?一直看你的文章,一直在膜拜中。。。
真心希望能看到老师的回信。

快十年没来看你的博客了,没想到你还在写。这份毅力已非一般人能及。

写的详细

我想知道特色在哪里

基本功能都有,感觉不错,下一个项目可以试试

有设计师在,bootstrap平时都没法用,别说这个了

引用思念之人的发言:

,大神推荐的东西准没错,感谢峰哥,

感谢峰叔

自荐另一个 CSS 框架 Spectre.css

@滚蛋吧,莆田系:

除了 IE / Opera,flex 的支持率(使用autoprefixer)还是挺高的吧 https://caniuse.com/#search=flex

因为前阵子用过 bulma, 个人非常推崇, 但是一看评论

正在找一个灵活的框架做可拖拽的模板生成交互系统,这个框架看起来比较灵活!

不应该纯粹的评论一个框架,要结合场景和需求来。瞎评论的都是搬运工

基于flex的不错,bootstrap太多没用的了,对于不需要兼容低版本浏览器的项目用这个比bootstrap好

没有JS,意味着很容易集成到React、Vue和Angular中。
我就问你基于jQuery的那堆东西你怎么集成。一堆人还问有什么用,28K stars不是你说玩票就玩票的好吗?

轻量级,riotjs + bulma,还要啥自行车

官方文档里is-1,is-2这种不是控制的是gap吗,为什么文章中说是12网格体系

引用5的发言:

官方文档里is-1,is-2这种不是控制的是gap吗,为什么文章中说是12网格体系

是的,但是你理解错了。is-x 设置在夫容器(columns)时表示gap,设置在子元素时表示控制大小。
详情参考: https://bulma.io/documentation/columns/sizes/

我看了官方文档,感觉有点慌!除了比较纯之外,我没有感觉!第一我确实不能在文档上找到它有什么非常特别之处;第二第三方文档资料比较少;如果要比纯,我觉得pureCSS也可以,更轻量级。我还是切换回Bootstrap。

最后修改bulma变量这里有问题,
严格按照教程走将报错:
An output directory must be specified when compiling a directory

正在学习中,尝试翻译bulma.io

引用dkvirus的发言:

一个新技术的出现肯定是为了弥补现存技术的缺陷,很好奇这玩意比 Bootstrap 的优势在哪?难道是更加轻量级??

差不多是,起码这玩意儿不需要 JS,做个小 demo 也方便点吧

想在vue中集成css框架,这个看着开可以

偏后端的开发想用vue找css框架,这个Bulma是正解????

翻译一下 Bulma v0.9 的文档,https://bulma.zcopy.site

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接