CSS 框架 Bulma 中文文档(翻译)

前言

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

Get Start

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

npm install bulma

OR

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

OR

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

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

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

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

  1. 使用HTML5 Doctype

    <!DOCTYPE html>
    
  2. 设置viewport Meta标签

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

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

<!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)。

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-cliautoprefixer 支持旧的浏览器
  • babel-cli, babel-preset-envbabel-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文件修改如下:

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

现在你就可以在index.html中使用.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>

bulma的column预览结果

风格样式

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

一个最简单的button:

<a class="button">
  Button
</a>

给添加一个is-primarycss样式:

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

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

<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.

<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来计算最大宽度。

@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修饰类。

<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样式标签来标记不同的布局。

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

container

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

  • .navbar
  • .hero
  • .section
  • .footer

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

<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

可以设置文字居中如下:

<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演示

<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演示

<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的直接子标签

<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-mediumis-large 来改变间隙(spacing)

<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演示

<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参考练习预览结果

<!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>