Web前端 / 框架
15 分钟 读完 (大约 2231 个字)

CSS 框架 Bulma 中文文档（翻译）

前言

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

Get Start

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

1
npm install bulma

OR

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

OR

下载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格式上的要求：

  1. 使用HTML5 Doctype
1
<!DOCTYPE html>
  1. 设置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>
# Bulma, CSS, scss, 响应式, 框架, 网格布局

喜欢这篇文章？打赏一下作者吧

太白山两日游
博客更换ICARUS主题

评论

关注我

链接

广告位招租

最新文章

分类

标签云

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw， 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改，tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统，发行版， GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞

归档

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×