前言
网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。
Get Start
我们可以使用多种方式来引入并使用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格式上的要求:
- 使用HTML5 Doctype
- 设置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-primary
css样式:
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
:小于等于768pxtablet
:大于等于769pxdesktop
:大于等于1024pxwidescreen
:大于等于1216pxfullhd
:大于等于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>
|
代码执行结果
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>
|