CSS 框架 Bulma 中文文档「译」

2019-06-05 · 大约 1200 个字 · 预计 6 分钟读完

前言

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

Get Start

我们可以使用多种方式来引入并使用bulma:

1
npm install bulma

使用CDN的方式：https://cdnjs.com/libraries/bulma

下载css样式并引入，下载地址：https://github.com/jgthms/bulma/tree/master/css

如果你要使用图标请记得引入fontawesome

1
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

引入后还需要一些HTML格式上的要求：

使用HTML5 Doctype

1
<!DOCTYPE html>

设置viewport Meta标签

1
<meta name="viewport" content="width=device-width, initial-scale=1">

如果你想快速入门并开始，可以使用下面的模板：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

bulma模板结果预览

如果你要在你的网站中使用bulma，你可以安装bulma-start, bulma-start是一个很小的npm工具包，它可以让你实时预览你的网页效果。

下载bulma-start.zip包后解压并更改目录名称为你的工程名称（例如我更改文件夹名字为my-new-bulma-site）。

1
2
3
cd my-new-bulma-site
npm install
npm start

npm start运行后它就会监视您的更改。您可以随意编辑_sass/main.scss和_javascript/main.js。更改会立即编译到其目标，其中index.html将在您的浏览器中重新加载它们。

另外可以使用npm run命令显示所有可用命令。

bulma-start中依赖的npm包有：

bulma
node-sass 编译写的sass文件
postcss-cli 和 autoprefixer 支持旧的浏览器
babel-cli, babel-preset-env 和 babel-preset-es2015-ie 用于编译ES6 JavaScript文件

目录结构说明：

.babelrc Babel配置文件（一个js的编译工具）
.gitignore Git的忽略文件
index.html HTML5文件
_sass/main.scss 一个基础的scss文件，包含了bulma,里面解释了如何定义样式，最后会被编译成css/main.css文件。
_javascript/main.js ES6 JavaScript 文件，最后会被编译成lib/main.js

scss是成熟、稳定、强大的专业级CSS扩展语言！Sass完全兼容所有版本的CSS。sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

导入scss

bulma包含39个scss文件，你可以单独导入,例如你只需要bulma的columns,这个文件在my-new-bulma-site/node_module/bulma/sass/grid文件夹下，打开my-new-bulma-site/_sass/main.scss文件修改如下：

1
2
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

现在你就可以在index.html中使用.column属性样式了：

1
2
3
4
5
6
<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>

bulma的column预览结果

风格样式

所有的bulma都有不同的样式，这些样式都以is-或has-开头。

一个最简单的button:

1
2
3
<a class="button">
  Button
</a>

给添加一个is-primarycss样式：

1
2
3
<a class="button is-primary">
  Button
</a>

你可以选用下面6种颜色：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<a class="button is-primary">
  Button
</a>
<a class="button is-link">
  Button
</a>
<a class="button is-info">
  Button
</a>
<a class="button is-success">
  Button
</a>
<a class="button is-warning">
  Button
</a>
<a class="button is-danger">
  Button
</a>

当然，你也可以追加一个尺寸样式，例如is-small或者状态样式is-loading.

1
2
3
<a class="button is-info is-loading">
  Button
</a>

关于这些样式官方文档上面分类进行了详细的解释，可以去参考。

网格体系

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

可以使用如下的比例方式来更改单个列的宽度：

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-full

也可以使用百分比的方式来设置不同列的占比：

is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth

bulma的百分比示意图

bulma 也支持12网格体系:

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

bulma的12网格体系示意图

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

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

响应式布局

Bulma 有五个宽度断点，分别是 mobile（手机）、tablet（平板）、desktop（桌面）、widescreen（宽屏）、fullHD（高清）。

mobile：小于等于768px
tablet：大于等于769px
desktop：大于等于1024px
widescreen：大于等于1216px
fullhd：大于等于1408px

例如我们设置如下表示，当屏幕宽度大于等于1216px的时候，文章内容页.is-2-column通过screen-widescreen - 2 * gap来计算最大宽度。

1
2
3
4
5
@media screen and (min-width: screen-widescreen)
    .is-1-column .container
    .is-2-column .container
        max-width: screen-widescreen - 2 * gap
        width: screen-widescreen - 2 * gap

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

1
2
3
4
5
6
<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修饰类。

1
2
3
4
5
6
<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>

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

1
2
3
4
5
6
7
<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>

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

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

1
2
3
4
5
6
7
<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样式标签来标记不同的布局。

.container 一个简单的容器，可以水平居中。
.level 多功能水平位置移动并垂直居中。
.media 媒体对象是适合可重复和可嵌套内容的UI元素。
.hero 一个横幅，用于展示重要的文本和内容。
.section 一个简单的容器，可以将页面划分为多个部分。
.footer 一个简单的响应式页脚，可以包含任何内容：列表，标题，列，图标，按钮等。
.tiles 构建二位网格布局，类似Metro、Pinterest.

container

.container 可以在任意标签中使用，但是主要在下列样式修饰标签的子标签中使用。

.navbar
.hero
.section
.footer

例如一个简单的网页布局：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section class="section">
    <div class="container">
        <div class="columns is-desktop">
                <div class="column has-background-primary">First column</div>
                <div class="column has-background-link">Second column</div>
                <div class="column has-background-warning">Third column</div>
                <div class="column has-background-danger">Fourth</div>
        </div>
    </div>
</section> 

level

可以设置文字居中如下：

1
2
3
4
5
6
7
8
9
<nav class="level">
    <p class="level-item has-text-centered"><a class="link is-info">Home</a></p>
    <p class="level-item has-text-centered"><a class="link is-info">Menu</a></p>
    <p class="level-item has-text-centered"><img src="https://bulma.io/images/bulma-type.png" alt=""
            style="height: 30px;">
    </p>
    <p class="level-item has-text-centered"><a class="link is-info">Reservations</a></p>
    <p class="level-item has-text-centered"><a class="link is-info">Contact</a></p>
</nav>

代码执行结果

media

bulma的media演示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<article class="media">
    <figure class="media-left">
        <p class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png">
        </p>
    </figure>
    <div class="media-content">
        <div class="field">
        <p class="control">
            <textarea class="textarea" placeholder="Add a comment..."></textarea>
        </p>
        </div>
        <nav class="level">
        <div class="level-left">
            <div class="level-item">
            <a class="button is-info">Submit</a>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
            <label class="checkbox">
                <input type="checkbox"> Press enter to submit
            </label>
            </div>
        </div>
        </nav>
    </div>
</article>

hero

bulma的hero演示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

section

section一般作为body的直接子标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
      </h2>
    </div>
  </section>
</body>

你可以使用 is-medium 和 is-large 来改变间隙（spacing）

1
2
3
4
5
6
7
8
9
<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
    </p>
  </div>
</footer>

tiles

bulma的title演示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent is-vertical">
        <article class="tile is-child notification is-primary">
          <p class="title">Vertical...</p>
          <p class="subtitle">Top tile</p>
        </article>
        <article class="tile is-child notification is-warning">
          <p class="title">...tiles</p>
          <p class="subtitle">Bottom tile</p>
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-info">
          <p class="title">Middle tile</p>
          <p class="subtitle">With an image</p>
          <figure class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/640x480.png">
          </figure>
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification is-danger">
        <p class="title">Wide tile</p>
        <p class="subtitle">Aligned with the right tile</p>
        <div class="content">
          <!-- Content -->
        </div>
      </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <div class="content">
        <p class="title">Tall tile</p>
        <p class="subtitle">With even more content</p>
        <div class="content">
          <!-- Content -->
        </div>
      </div>
    </article>
  </div>
</div>

最后

除了上面最基本的布局标签之外，bulma还提供了表单相关的样式和很多UI控件和非常方便的组件，比如按钮、输入框、进度条、边框、图标、图片、表格、导航栏、菜单等。更加详细的用法请参考官方的英文文档：https://bulma.io/documentation/

贴出本文中的代码，供你参考练习，你可以直接黏贴到html文档中用浏览器打开。

bulma参考练习预览结果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<body>
    <section class="hero is-primary">
        <div class="hero-body">
            <div class="container">
            <h1 class="title">
                Primary title
            </h1>
            <h2 class="subtitle">
                Primary subtitle
            </h2>
            </div>
        </div>
    </section>
    <section class="section is-large">
        <div class="container">
            <nav class="level">
                <p class="level-item has-text-centered"><a class="link is-info">Home</a></p>
                <p class="level-item has-text-centered"><a class="link is-info">Menu</a></p>
                <p class="level-item has-text-centered"><img src="https://bulma.io/images/bulma-type.png" alt=""
                        style="height: 30px;">
                </p>
                <p class="level-item has-text-centered"><a class="link is-info">Reservations</a></p>
                <p class="level-item has-text-centered"><a class="link is-info">Contact</a></p>
            </nav>
            <div class="columns is-desktop">
                <div class="column has-background-primary">First column</div>
                <div class="column has-background-link">Second column</div>
                <div class="column has-background-warning">Third column</div>
                <div class="column has-background-danger">Fourth</div>
            </div>
            <article class="media">
                <figure class="media-left">
                    <p class="image is-64x64">
                    <img src="https://bulma.io/images/placeholders/128x128.png">
                    </p>
                </figure>
                <div class="media-content">
                    <div class="field">
                    <p class="control">
                        <textarea class="textarea" placeholder="Add a comment..."></textarea>
                    </p>
                    </div>
                    <nav class="level">
                    <div class="level-left">
                        <div class="level-item">
                        <a class="button is-info">Submit</a>
                        </div>
                    </div>
                    <div class="level-right">
                        <div class="level-item">
                        <label class="checkbox">
                            <input type="checkbox"> Press enter to submit
                        </label>
                        </div>
                    </div>
                    </nav>
                </div>
            </article>
        </div>
    </section>
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
            <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
            <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
            is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
            </p>
        </div>
    </footer>
</body>

</html>

前言