Bulma简介

一、简介

1、简介

Bulma是一个免费的开源CSS框架，它提供了易于使用的前端组件，可以轻松地组合这些组件来构建响应式Web界面。

2、安装

Bulma是一个CSS库，这意味着它提供了用于美化HTML的样式。要使用Bulma，可以直接使用它的.css文件或者使用预编译的.sass文件：

CSS文件

引入CDN：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

或下载Bulma CSS文件后引入：

<link rel="stylesheet" href="../bulma.css">

Sass文件

使用npm：

npm install bulma

或者在GitHub上下载。

3、使用

为了让Bulma正常工作，需要构建响应式网页：

使用HTML5文档类型

<!DOCTYPE html>

添加响应式窗口meta标签

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

Hello World

Starter模板：

<!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://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
	</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>

二、概述

1、颜色

大多数Bulma元素和组件的颜色样式如下：

2、修饰符语法

大多数Bulma元素都有可选的样式，如果要应用这些样式只需要添加以is-或has-开头的修饰符类即可；修饰符也可以组合使用。

以按钮为例：

<a class="button is-small">Button</a>
<a class="button is-primary">Button</a>
<a class="button is-loading">Button</a>
<a class="button" disabled>Button</a>
<a class="button is-info is-loading">Button</a>
<a class="button is-danger is-outlined">Button</a>

字体颜色

<a class="has-text-primary">Hello Bulma</a>
<a class="has-text-link">Hello Bulma</a>
<a class="has-text-warning">Hello Bulma</a>
<a class="has-text-danger">Hello Bulma</a>

背景颜色

has-background-white、has-background-black、has-background-primary、has-background-link、has-background-info、has-background-success、has-background-warning、has-background-danger…

<a class="has-background-primary mr-1 p-1 has-text-white">Hello Bulma</a>
<a class="has-background-link mr-1 p-1 has-text-white">Hello Bulma</a>
<a class="has-background-warning mr-1 p-1 has-text-white">Hello Bulma</a>
<a class="has-background-info mr-1 p-1 has-text-white">Hello Bulma</a>

has-background-primary-light、has-background-info-light、has-background-success-light、has-background-warning-light、has-background-link-dark、has-background-primary-dark…

<a class="has-background-primary-light mr-1 p-1 has-text-grey">Hello Bulma</a>
<a class="has-background-success-light mr-1 p-1 has-text-dark">Hello Bulma</a>
<a class="has-background-danger-light mr-1 p-1 has-text-success">Hello Bulma</a>
<a class="has-background-primary-dark mr-1 p-1 has-text-white">Hello Bulma</a>

is-size-1、is-size-2、is-size-3、is-size-4、is-size-5、is-size-6、is-size-7

文本转换

is-capitalized、is-lowercase、is-uppercase、is-italic

文本粗细

has-text-weight-light、has-text-weight-normal、has-text-weight-medium、has-text-weight-semibold、has-text-weight-bold

对齐方式

has-text-centered、has-text-justified、has-text-left、has-text-right

响应式对齐：

has-text-left-mobile、has-text-left-desktop、has-text-left-widescreen-only、has-text-left-fullhd…

可见性
- Show
is-block、is-flex、is-inline、is-inline-block、is-inline-flex；

也有响应式的修饰符：is-flex-mobile、is-flex-desktop-only、is-flex-widescreen…
- Hide
is-hidden、is-invisible、is-hidden-mobile、is-hidden-fullhd…
边距

Bulma在所有方向上提供边距m*(margin)和填充p*(padding)修饰符：
- *t：top，例如：mt-*表示margin-top
- *r：right
- *b：bottom
- *l：left
- *x：水平方向：left和right，例如：mx=*表示margin-left和margin-right
- *y：垂直方向：top和bottom
共有6种大小可调节：

Suffix *-0 *-1 *-2 *-3 *-4 *-5 *-6

Value 0 0.25rem 0.5rem 0.75rem 1rem 1.5rem 3rem

例如：m-1表示margin: 0.25rem；mt-2表示：margin-top: 0.5rem；px-4表示：padding-left: 1rem; padding-right: 1rem;。

Flexbox

与is-flex结合使用时，所有Flexbox CSS属性都可以作为Bulma修饰符：

flex-direction

Class	Property: Value
`is-flex-direction-row`	`flex-direction: row`
`is-flex-direction-column`	`flex-direction: column`
`is-flex-direction-row-reverse`	`flex-direction: row-reverse`
`is-flex-direction-column-reverse`	`flex-direction: column-reverse`

flex-wrap

与flex-direction类似，对应的修饰符为：

is-flex-wrap-nowrap、is-flex-wrap-wrap、is-flex-wrap-wrap-reverse；后面的属性同理。

justify-content

is-justify-content-start、is-justify-content-center、is-justify-content-space-between…

align-content

is-align-content-center、is-align-content-stretch、is-align-content-flex-end…

align-items

is-align-items-center、is-align-items-stretch、is-align-items-flex-end…

align-self

is-align-self-auto、is-align-self-center、is-align-self-stretch…

flex-grow

is-flex-grow-0相当于：flex-grow: 0，is-flex-grow-1相当于：flex-grow: 1；

flex-shrink

与flex-grow类似：is-flex-shrink-0、is-flex-shrink-1、is-flex-shrink-3…

其他

is-clearfix、is-pulled-left、is-clipped、is-clickable、is-radiusless、is-relative…

3、模块化

Bulma由39个.sass文件组成，可以根据需要单独导入。例如，只导入按钮样式：

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

之后即可使用.is-active、.is-primary、.is-info、.is-success、.is-small、.is-medium、.is-large、.is-outlined、.is-inverted、.is-link、.is-loading、[disabled]修饰符。

4、响应式

默认垂直

Bulma是一个移动优先的框架，它的每个元素都是移动优先，并对垂直阅读(vertical reading)做了优化，因此在mobile上有以下默认状态：
- columns垂直堆叠
- level组件将垂直堆叠其子组件
- nav菜单会被隐藏
不过也可以对columns和level组件通过附加is-mobile来强制执行水平布局。
分隔点(Breakpoints)

Bulma有5个分隔点：
- mobile：小于768px
- tablet：从769px开始到1023px
- desktop：从1024px开始到1215px
- widescreen：从1216px开始到1407px
- fullhd：1408px及以上

5、函数

Bulma提供自定义函数来帮助动态定义值和颜色，具体参考：Functions

node_modules\bulma\sass\utilities\functions.sass

6、混入

混入(Mixins)功能用于自定义元素和响应式，具体参考：Mixins

node_modules\bulma\sass\utilities\mixins.sass

三、容器

1、Section

section是一个简单的容器，可将页面分为多个部分；section最好被用做body的直接子元素。

样例：

<section class="section">
	<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>
</section>

可以通过is-medium和is-large来更改section的间距。

2、Container

container是一个简单的工具元素，可以让内容在视口中居中。它可以在任何上下文中使用，但主要用作navbar、hero、section、footer的直接子元素。

样例：

<div class="container">
	<div class="notification is-primary">
		This container is <strong>centered</strong> on desktop and larger viewports.
	</div>
</div>

3、Level

level是一个多功能水平层级，几乎可以包含所有其他元素；层级的结构如下：

level：主容器
- level-left：左侧容器
- level-right：右侧容器
  - level-item：容器中的元素

在level-item中几乎可以插入任何元素：标题、按钮、文本等，无论放入什么元素，它们都将始终垂直居中。

样例：

<nav class="level">
	<div class="level-left">
		<div class="level-item">
			 <div class="field has-addons">
				<p class="control"><input class="input" type="text" placeholder="Find a post"></p>
				<p class="control"><button class="button">Search</button></p>
			 </div>
		</div>
	</div>
	<div class="level-right">
		<div class="level-item">
			<p class="level-item"><strong>All</strong></p>
			<p class="level-item"><a>Published</a></p>
			<p class="level-item"><a>Drafts</a></p>
			<p class="level-item"><a class="button is-success">New</a></p>
		</div>
	</div>
</nav>

居中Level

如果要水平居中，可以使用任意多个level-item，只要它们是容器的直接子元素即可。

<nav class="level">
	<div class="level-item has-text-centered">
		<div>
			<p class="heading">Following</p>
			<p class="title">123</p>
		</div>
	</div>
	<div class="level-item has-text-centered">
		<div>
			<p class="heading">Followers</p>
			<p class="title">456K</p>
		</div>
	</div>
	<div class="level-item has-text-centered">
		<div>
			<p class="heading">Likes</p>
			<p class="title">789</p>
		</div>
	</div>
</nav>

默认情况下在移动设备上是垂直的，如果需要水平显示，需要在level上添加is-mobile：

<nav class="level is-mobile">

4、Media Object

媒体对象普遍存在于社交媒体界面中，它是一个UI元素，非常适合可重复和可嵌套的内容。

样例：

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

5、Hero

使用hero组件可以在网页上添加全角横幅，该横幅也可以选择覆盖页面的整个高度。该组件的结构如下：

hero：主容器
- hero-body：hero的直接子元素，可以放置所有内容

如果要使用全高hero，还需要一个hero-head和一个hero-foot。

样例：

可以使用is-primary、is-warning等来设置不同的颜色：

<section class="hero is-primary">
	<div class="hero-body">
		<p class="title">Primary hero</p>
		<p class="subtitle">Primary subtitle</p>
	</div>
</section>

也可以使用is-small、is-medium、is-large、is-halfheight、is-fullheight来设置不同尺寸。

6、Footer

footer是一个简单的响应式页脚，可以包含标题、列、图标、按钮等任何内容，它的底部填充很多，非常适合作为网页的最后一个元素。

样例：

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

四、列

使用Bulma构建列布局非常简单，只需要：

添加一个columns容器
根据需要添加任意数量的column元素

默认情况下，移动设备上列使用垂直布局，如果需要水平显示，则需在columns上添加is-mobile。

1、大小

可以使用is-three-quarters、is-two-thirds、is-half、is-one-third、is-one-quarter、is-full来更改单个列的大小，其他列将自动填补剩余的空间。

<div class="columns">
	<div class="column is-half">First column</div>
	<div class="column">Second column</div>
	<div class="column">Third column</div>
</div>

12列

使用is-1、is-2、is-3、is-4、is-5、is-6、is-7、is-8、is-9、is-10、is-11、is-12来表示12等分下列的大小。

Offset

可以使用空列在column元素周围创建水平空白，也可以使用偏移量修饰符.is-offset-x：

<div class="columns">
	<div class="column is-8"></div>
	<div class="column notification is-primary">Bulma Column</div>
</div>

或

<div class="columns">
	<div class="column is-4 is-offset-8 notification is-primary">Bulma Column</div>
</div>

Narrow

如果希望某一列仅占用其所需的空间，则可以使用is-narrow修饰符，其他列将填满剩余空间。

2、嵌套

嵌套列的结构如下：

columns：顶级列容器
- column
  - columns：嵌套列
    - column

样例：

<div class="columns has-text-centered">
	<div class="column">
		<p>First column</p>
		<div class="columns">
			<div class="column">First nested column</div>
			<div class="column">Second nested column</div>
		</div>
	</div>
	<div class="column">
		<p>Second column</p>
		<div class="columns">
			<div class="column">Alpha</div>
			<div class="column">Bravo</div>
			<div class="column">Charlie</div>
		</div>
	</div>
</div>

3、间隙

默认间隙

列的默认间距为0.75rem，由于间隙位于列的每一侧，因此两个相邻列之间的间隙将是1.5rem。

无间隙

如果要删除列之间的间隙，只需要在columns容器上添加is-gapless修饰符即可。

<div class="columns is-gapless">

可变间隙

可以在columns容器上添加is-0、is-1…is-8等9个修饰符之一来指定自定义列间距；is-0相当于is-gapless；is-3是默认值；is-8是最大值2rem。

除此之外，还要在columns容器上添加is-variable：

<div class="columns is-variable is-8">

4、配置

垂直对齐

在columns容器上添加is-vcentered可以垂直对齐列：

<div class="columns is-vcentered">
	<div class="column is-8">
		<p class="bd-notification is-primary">First column</p>
	</div>
	<div class="column">
		<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
	</div>
</div>

多行

使用is-multiline修饰符可以添加比单行更多的列：

<div class="columns is-multiline">
	<div class="column is-4"><p class="notification is-primary">One third</p></div>
	<div class="column is-4"><p class="notification is-primary">One third</p></div>
	<div class="column is-4"><p class="notification is-primary">One third</p></div>
	<div class="column is-half"><p class="notification is-primary">Half</p></div>
	<div class="column is-one-quarter"><p class="notification is-primary">Quarter</p></div>
	<div class="column is-one-quarter"><p class="notification is-primary">Quarter</p></div>
	<div class="column is-one-quarter"><p class="notification is-primary">Quarter</p></div>
	<div class="column"><p class="notification is-primary">Auto</p></div>
</div>

五、元素

1、块

block元素是Bulma最基本的间隔块，它会使同级HTML元素之间保持一致的边距。block的CSS样式非常简单：

.block:not(:last-child) {
	margin-bottom: 1.5rem;
}

样例：

<div class="block">This text is within a <strong>block</strong>.</div>
<div class="block">This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.</div>
<div class="block">This text is within a <strong>third block</strong>. This block has no margin at the bottom.</div>

2、盒子

box元素是一个简单的容器，带有白色背景，一些填充(padding)和阴影(box shadow)：

<div class="box">I'm in a box.</div>

3、按钮

button是任何设计中的基本元素，此样式可以用在<a>、<button>以及类型为submit和reset的<input>标签上。详细介绍参考：Button

<div class="buttons">
	<button class="button is-primary is-light">Primary</button>
	<button class="button is-danger">Danger</button>
	<button class="button is-link is-outlined">Outlined</button>
	<button class="button is-success is-rounded">Rounded</button>
	<button class="button is-warning is-loading">Loading</button>
	<button class="button is-primary" title="Disabled button" disabled>Disabled</button>	
	<button class="button">
		<span class="icon is-small"><i class="fas fa-home"></i></span>
		<span>Home</span>
	</button>
</div>

上面使用了图标fa-home，需要下载引入fontawesome.css及相关字体文件。

4、内容

content是用来处理WYSIWYG(所见即所得)生成内容的样式类，其中只有HTML标记可用，几乎可以包含<p>、<ul>、<h1>等所有HTML标签。

当找不到想要的样式类或者想直接使用HTML标签时，可使用content作为容器。

样例：

<div class="content">
	<h1>Hello World</h1>
	<ol type="A">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</div>
<div class="content is-small">
	<blockquote>Hello Bulma</blockquote>
	<figure>
		<img src="https://bulma.io/images/placeholders/128x128.png">
		<img src="https://bulma.io/images/placeholders/128x128.png">
		<figcaption>Figure 1: Some beautiful placeholders</figcaption>
	</figure>
</div>

5、删除

delete元素一个带有x号的圆圈，它是一个独立的元素，可以在不同的上下文中使用。

样例：

<div class="block">
	<span class="tag is-success">Hello World<button class="delete is-small"></button></span>
</div>

<article class="message is-info">
	<div class="message-header">Info<button class="delete"></button></div>
	<div class="message-body">This is a message.</div>
</article>

6、图标

Bulma兼容所有的图标字体库：Font Awesome、 Ionicons等。iocn元素是任何类型的图标字体的容器。

<span>
	<span class="icon"><i class="fas fa-book"></i></span>
	<span>Book</span>
</span>
<span>
	<span class="icon has-text-info"><i class="fas fa-info-circle"></i></span>
	<span>Information</span>
</span>

7、图像

由于加载图像可能需要几秒钟的时间或者根本不加载，因此可以使用image容器指定图像大小，以免布局由于图像加载或图像错误而被破坏。

有7种尺寸可供选择：is-16x16、is-24x24、is-32x32、is-48x48、is-64x64、is-96x96、is-128x128；

还可以通过添加is-rounded样式类生成圆形图像；

如果不知道图像准确的尺寸，而是知道比率，则可以使用is-square、is-1by1、is-3by2等比率修饰符。

样例：

<figure class="image is-128x128">
	<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>

8、通知栏

notification是一个简单的彩色块，旨在引起用户对某些事物的注意；它可以用作视口中的固定通知。

<div class="notification is-danger">
	<button class="delete"></button>
	This is an <strong>important</strong> notice.
</div>
<div class="notification is-success is-light">
	<button class="delete"></button>
	I love you not because of who you are, but because of who I am when I am with you. 
</div>

9、进度条

Bulma进度条是一个简单的CSS类，用于设置<progress>HTML标签的样式。

<progress class="progress is-success" value="60" max="100">60%</progress>

10、表格

只需要在具有以下结构的HTML<table>元素上附加一个table样式类即可创建Bulma表格：

<table class="table">：主容器
- thead：表头，可选
- tfoot：表格底部页脚，可选
- tbody：内容
  - tr：表格行
    - th：单元格标题
    - td：单元格

可以使用is-bordered样式为所有单元格添加边框；使用is-hoverable样式为每行添加悬停效果；使用is-fullwidth样式使用拥有全屏宽度。

如果要选中行，可以在<tr>上添加is-selected样式类。

样例：

<table class="table is-hoverable is-bordered is-fullwidth">
	<thead>
		<tr>
			<th></th>
			<th>Name</th>
			<th>Description</th>
			<th>Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>Javascript</td>
			<td>Hello World</td>
			<td>55</td>
		</tr>
		<tr class="is-selected">
			<th>2</th>
			<td><strong>CSS</strong> Framework</td>
			<td>Hello Bulma</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

11、标签

Bulma标签是一个很小但用途广泛的元素，可以将信息附加块或其他组件；默认情况下，标签的高度是1.5rem。

样例：

<div class="block">
	<span class="tag is-warning">Warning</span>
	<span class="tag is-primary is-light">Primary</span>
	<span class="tag is-link is-rounded">Rounded</span>
	<span class="tag is-success">Bar<button class="delete is-small"></button></span>
</div>
<div class="tags has-addons">
	<span class="tag is-dark">npm</span>
	<span class="tag is-info">0.9.1</span>
</div>

12、标题

有两种标题：title和subtitle；当组合使用标题和副标题时，它们会相互靠近；如果要保持正常间距，可以在第一个元素上使用is-spaced样式。

根据经验，一般标题和副标题的大小差异为2。

样例：

<div class="block">
	<p class="title is-1">Title 1</p>
	<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
	<p class="title is-2 is-spaced">Title 2</p>
	<p class="subtitle is-4">Subtitle 4</p>
</div>

六、控件

1、面包屑

面包屑是一个简单的导航组件，仅需要一个breadcrumb容器和一个ul列表。可以通过is-active修饰li标签来表示当前页。

对齐方式

可以通过在.breadcrumb容器上添加is-centered和is-right来调整面包屑的对齐方式。

分隔符

除默认分隔符外，Bulma还提供了has-arrow-separator、has-bullet-separator、has-dot-separator和has-succeeds-separator四种分隔符。

尺寸

有三种尺寸可供选择：is-small、is-medium和is-large。

样例

<nav class="breadcrumb">
	<ul>
		<li><a href="#">Bulma</a></li>
		<li><a href="#">Documentation</a></li>
		<li><a href="#">Components</a></li>
		<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
	</ul>
</nav>

2、页签

Bulma页签(tabs)是一个直接的导航组件，它的结构如下：

tabs：主容器
- <ul>元素
  - li元素
    - a元素

tabs容器支持使用is-centered或is-right来设置对齐方式；使用is-small、is-medium、is-large设置大小；使用is-boxed样式设置带边框的页签；使用is-toggle设置选项卡为互斥的(单击其中一个会取消选择其他选项卡)；使用is-fullwidth样式让页签占满整个可用宽度。

样例：

<div class="tabs is-centered">
	<ul>
		<li class="is-active"><a>Pictures</a></li>
		<li><a>Music</a></li>
		<li><a>Videos</a></li>
		<li><a>Documents</a></li>
	</ul>
</div>
<div class="tabs is-boxed">
	<ul>
		<li class="is-active">
			<a>
				<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
				<span>Pictures</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
				<span>Music</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
				<span>Videos</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
				<span>Documents</span>
			</a>
		</li>
	</ul>
</div>
<div class="tabs is-toggle">
	<ul>
		<li class="is-active">
			<a>
				<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
				<span>Pictures</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
				<span>Music</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
				<span>Videos</span>
			</a>
		</li>
		<li>
			<a>
				<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
				<span>Documents</span>
			</a>
		</li>
	</ul>
</div>

3、信息

使用信息块可以用来强调页面的一部分，message的结构如下：

message：主容器
- message-header：可以包含标题和delete元素(可选)
- message-body：信息体

可以给message添加is-danger等颜色修饰类和is-small等尺寸修饰类。

样例：

<article class="message is-primary">
	<div class="message-header">
		<p>Primary</p>
		<button class="delete" aria-label="delete"></button>
	</div>
	<div class="message-body">
		<strong>I love you</strong> not because of who you are, but because of who I am when I am with you. 
	</div>
</article>
<article class="message is-danger">
	<div class="message-body">
		This is an <strong>important</strong> message.
	</div>
</article>

4、模态

可以在模态叠加层(overlay)中包含所需的任何内容，它的结构如下：

modal：主容器
- modal-background：可以用作点击目标以关闭模态的透明叠加层
- modal-content：水平和垂直居中的容器，最大宽度为640px，可以在其中包含任何内容
- modal-close：右上角关闭按钮

如果需要激活模态，只需要在modal容器上添加is-active样式；还可以在包含modal的元素上添加is-clipped防止滚动溢出。

样例一：

<div class="modal is-active">
	<div class="modal-background"></div>
		<div class="modal-content">
			<!-- Any other Bulma elements you want -->
			<section class="section">
				<div class="box">I love you not because of who you are, but because of who I am when I am with you. </div>					
			</section>
		</div>
	<button class="modal-close is-large" aria-label="close"></button>
</div>

样例二：

<div class="modal is-active">
	<div class="modal-background"></div>
		<div class="modal-content">
			<section class="section">
				<img src="https://bulma.io/images/placeholders/256x256.png" alt="">
			</section>
		</div>
	<button class="modal-close is-large" aria-label="close"></button>
</div>

其中给section添加了样式：

display: flex;
justify-content: center;
align-items: center;

样例三：

<div class="modal is-active">
	<div class="modal-background"></div>
	<div class="modal-card">
		<header class="modal-card-head">
			<p class="modal-card-title">Modal title</p>
			<button class="delete" aria-label="close"></button>
		</header>
		<section class="modal-card-body">
			<!-- Content ... -->
			<section class="section">
				<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>
			</section>
		</section>
		<footer class="modal-card-foot">
			<button class="button is-success">Save changes</button>
			<button class="button">Cancel</button>
		</footer>
	</div>
</div>

5、下拉菜单

下拉菜单dropdown组件是一个下拉按钮和一个下拉菜单的容器，它的结构如下：

dropdown：主容器
- dropdown-trigger：一个button的容器
- dropdown-menu：下拉菜单，默认隐藏
  - dropdown-content：带有白色背景和阴影(shadow)的下拉框
    - dropdown-item：下拉菜单中的每个下拉项，可以是<a>或<div>
    - dropdown-divider：用于分隔下拉项的水平线

dropdown组件可用的修饰符有：

is-hoverable：鼠标悬停在下拉按钮上时显示该下拉菜单
is-active：下拉菜单将一直显示
is-right：右对齐下拉列表
is-up：下拉菜单在下拉按钮上方显示

样例：

<div class="dropdown is-active">
	<div class="dropdown-trigger">
		<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
			<span>Dropdown button</span>
			<span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
		</button>
	</div>
	<div class="dropdown-menu" id="dropdown-menu" role="menu">
		<div class="dropdown-content">
			<a href="#" class="dropdown-item">Dropdown item</a>
			<a class="dropdown-item">Other dropdown item</a>
			<hr class="dropdown-divider">
			<a href="#" class="dropdown-item is-active">Active dropdown item</a>
			<a href="#" class="dropdown-item">Other dropdown item</a>
			<hr class="dropdown-divider">
			<a href="#" class="dropdown-item">With a divider</a>
		</div>
	</div>
</div>

6、导航栏

navbar是响应式水平导航栏，可以支持图像、链接、按钮和下拉菜单，它的结构如下：

navbar：主容器
- navbar-brand：位于左侧，总是可见，通常包含logo或一些链接图标
  - navbar-burger：hamburger图标，用于在触摸设备上打开或收起(toggle)菜单
- navbar-menu：位于右侧，触摸设备上隐藏，桌面端可见(1024px为界线)
  - navbar-start：菜单的左侧，出现在桌面上的导航栏品牌(logo)旁边
  - navbar-end：菜单的右侧，显示在导航栏的末尾
    - navbar-item：导航栏中的每个项目(item)，可以是<a>或<div>
      - navbar-link：带有箭头的链接作为下拉菜单的同级项
      - navbar-dropdown：下拉菜单(dropdown menu)，可以包括导航栏项目和分隔线
        
        navbar-divider：导航栏项目的水平分隔线

具体可参考：Navbar

样例一

brand和burger：brand始终可见，burger在宽度小于1024px时出现。

<nav class="navbar">
	<div class="navbar-brand">
		<a class="navbar-item" href="https://bulma.io">
			<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
		</a>
		<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
			<span aria-hidden="true"></span>
			<span aria-hidden="true"></span>
			<span aria-hidden="true"></span>
		</a>
	</div>
</nav>

样例二

当宽度大于1024px时显示navbar-menu中的内容。

<nav class="navbar">
	<!-- left -->
	<div class="navbar-brand">
		<a class="navbar-item" href="https://bulma.io">
			<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
		</a>
		<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
			<span aria-hidden="true"></span>
			<span aria-hidden="true"></span>
			<span aria-hidden="true"></span>
		</a>
	</div>
	<!-- right -->
	<div class="navbar-menu">
		<div class="navbar-start">
			<a class="navbar-item">Home</a>
			<a class="navbar-item">Documentation</a>
			<div class="navbar-item has-dropdown is-hoverable">
				<a class="navbar-link">More</a>
				<div class="navbar-dropdown">
					<a class="navbar-item">About</a>
					<a class="navbar-item">Contact</a>
					<hr class="navbar-divider">
					<a class="navbar-item">Jobs</a>
				</div>
				</div>
			</div>
		</div>
		<!-- navbar-end -->
		<div class="navbar-end">
			<div class="navbar-item">
				<div class="buttons">
					<a class="button is-primary"><strong>Sign up</strong></a>
					<a class="button is-light">Log in</a>
				</div>
			</div>
		</div>
	</div>
</nav>

7、菜单

menu组件是一个简单的菜单，适用于任何类型的垂直导航，它的结构如下：

menu：主容器
- menu-label：菜单标签
- menu-list：菜单列表，最多可嵌套2级

样例：

<aside class="menu">
	<p class="menu-label">General</p>
	<ul class="menu-list">
		<li><a>Dashboard</a></li>
		<li>
			<a class="is-active">Customers</a>
			<ul>
				<li><a>Normal</a></li>
				<li><a>VIP</a></li>
			</ul>
		</li>
	</ul>
	<p class="menu-label">Administration</p>
</aside>

8、分页

pagination是一个响应式的分页组件，它的结构如下：

pagination-previous和pagination-next用于增量导航
pagination-list：分页项(item)列表
- pagination-link：页码
- pagination-ellipsis：范围分隔符(…)

所有元素都是可选的，因此可以根据实际需要创建分页。

分页组件可用的修饰符有：

is-centered、is-right：对齐方式
is-rounded：圆形分页项
is-small、is-medium、is-large：调整尺寸

样例：

<nav class="pagination is-small" role="navigation" aria-label="pagination">
	<a class="pagination-previous">Previous</a>
	<a class="pagination-next">Next page</a>
	<ul class="pagination-list">
		<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
		<li><span class="pagination-ellipsis">&hellip;</span></li>
		<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
		<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
		<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
		<li><span class="pagination-ellipsis">&hellip;</span></li>
		<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
	</ul>
</nav>

大于768px：

小于等于768px：

9、卡片

card组件是一个灵活而且可以组合的组件，它的结构如下：

card：主容器
- card-header：卡片标题
  - card-header-title：左对齐的粗体文本
  - card-header-icon：图标的占位符
- card-image：响应式图像的全宽(fullwidth)容器
- card-content：用于包含其他元素的容器
- card-footer：卡片页脚，一个横向组件列表
  - card-footer-item：列表项

样例：

<div class="card">
	<div class="card-image">
		<figure class="image is-4by3">
			<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
		</figure>
	</div>
	<header class="card-header">
		<p class="card-header-title">Component</p>
		<a class="card-header-icon" aria-label="more options">
			<span class="icon">
				<i class="fas fa-angle-down" aria-hidden="true"></i>
			</span>
		</a>
	</header>
	<div class="card-content">
		<div class="content">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
			<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
			<br>
			<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
		</div>
	</div>
	<footer class="card-footer">
		<a href="#" class="card-footer-item">Save</a>
		<a href="#" class="card-footer-item">Edit</a>
		<a href="#" class="card-footer-item">Delete</a>
	</footer>
</div>

10、面板

panel是一个可组合控件的面板，它的结构如下：

panel：主容器
- panel-heading：标题，面板的第一个元素
- panel-tabs：用于导航
- panel-block：可以包含其他元素，例如：
  - control
  - input
  - button
  - panel-icon

panel-block也可以是一个带有复选框(checkbox)的<a>标签或<label>标签。

样例：

<article class="panel is-success">
	<p class="panel-heading">Success</p>
	<p class="panel-tabs">
		<a class="is-active">All</a>
		<a>Public</a>
		<a>Private</a>
		<a>Sources</a>
		<a>Forks</a>
	</p>
	<div class="panel-block">
		<p class="control has-icons-left">
			<input class="input is-success" type="text" placeholder="Search">
			<span class="icon is-left">
				<i class="fas fa-search" aria-hidden="true"></i>
			</span>
		</p>
	</div>
	<a class="panel-block is-active">
		<span class="panel-icon"><i class="fas fa-book" aria-hidden="true"></i></span>bulma
	</a>
	<a class="panel-block">
		<span class="panel-icon"><i class="fas fa-book" aria-hidden="true"></i></span>marksheet
	</a>
	<a class="panel-block">
		<span class="panel-icon"><i class="fas fa-book" aria-hidden="true"></i></span>jgthms.github.io
	</a>
	<label class="panel-block">
		<input type="checkbox">remember me
	</label>
	<div class="panel-block">
		<button class="button is-link is-outlined is-fullwidth">Reset all filters</button>
	</div>
</article>

七、表单

Bulma支持以下几种HTML表单元素：<form>、<button>、<input>、<textarea>、<label>。

为了保持设计的均匀平衡，Bulma提供了一个非常有用的control容器来包装表单控件。如果在表单中组合多个控件时，可以将field样式类添加到容器中使间距保持一致。

<form>
	<div class="field">
		<label class="label">Name</label>
		<div class="control">
			<input class="input" type="text" placeholder="Text input">
		</div>
	</div>
	<div class="field">
		<label class="label">Message</label>
		<div class="control">
			<textarea class="textarea" placeholder="Textarea"></textarea>
		</div>
	</div>
</form>

1、输入框

Bulmainput样式类适用于type属性为text、password、email和tel的<input>元素。

颜色

可以在input元素上添加is-primary、is-link、is-danger等样式来设置输入框颜色。

大小

可以在input元素上添加is-small、is-normal、is-medium等样式来设置输入框大小。

圆角

可以通过is-rounded样式类将input元素设置为圆角。

状态

可以通过is-hovered、is-focused、is-loading样式类和readonly、disabled属性分别设置输入框的各种状态。

附加图标

可以通过在input元素上添加has-icons-left和has-icons-right构造带有图标的输入框；同时，需要在图标上添加对应的icon is-left或icon is-right样式。

样例

<div class="field">
	<input class="input is-primary" type="text" placeholder="Primary input">
</div>
<div class="field">
	<input class="input is-normal" type="text" placeholder="Normal input">
</div>
<div class="field">
	<input class="input is-rounded" type="text" placeholder="Rounded input">
</div>

<div class="field">
	<div class="control">
		<input class="input is-focused" type="text" placeholder="Focused input">
	</div>
</div>
<div class="field">
	<div class="control is-loading">
		<input class="input" type="text" placeholder="Loading input">
	</div>
</div>
<div class="field">
	<div class="control">
		<input class="input" type="text" placeholder="Disabled input" disabled>
	</div>
</div>
<div class="field">
	<div class="control has-icons-left has-icons-right">
		<input class="input" type="email" placeholder="Email">
		<span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
		<span class="icon is-small is-right"><i class="fas fa-check"></i></span>
	</div>
</div>

2、多行文本框

Bulma的textarea样式类是input元素的多行版本，用法与input类似：

<div class="field">
	<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>
</div>
<div class="field">
	<div class="control">
		<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
	</div>
</div>
<div class="field">
	<div class="control is-loading">
		<textarea class="textarea" placeholder="Loading textarea"></textarea>
	</div>
</div>
<div class="field">
	<div class="control">
		<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
	</div>
</div>
<div class="field">
	<div class="control">
		<textarea class="textarea" readonly>This content is readonly</textarea>
	</div>
</div>
<div class="field">
	<div class="control">
		<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
	</div>
</div>

3、下拉列表

select样式类是对HTML<select>元素做了包装，这使样式更具灵活性并支持图标。

多选

可以通过is-multiple修饰符和multiple来设置多选下拉列表。

其他

颜色、大小、圆角、状态、图标等的用法与input类似。

样例

<div class="field">
	<div class="select">
		<select>
			<option>Select dropdown</option>
		</select>
	</div>
</div>
<div class="field">
	<div class="select is-multiple">
		<select multiple size="3">
			<option value="Apple">Apple</option>
			<option value="Banana">Banana</option>
			<option value="Lemon">Lemon</option>
			<option value="Pineapple">Pineapple</option>
			<option value="Strawberry">Strawberry</option>
		</select>
	</div>
</div>
<div class="field">
	<div class="select is-link">
		<select>
			<option>Select dropdown</option>
		</select>
	</div>
</div>
<div class="field">
	<div class="select is-loading">
		<select>
			<option>Select dropdown</option>
		</select>
	</div>
</div>
<div class="field">
	<div class="select is-rounded">
		<select>
			<option>Rounded Select</option>
		</select>
	</div>
</div>
<div class="field">
	<div class="control has-icons-left">
		<div class="select">
			<select>
				<option selected>Strawberry</option>
			</select>
		</div>
		<div class="icon is-small is-left">
			<i class="fas fa-globe"></i>
		</div>
	</div>
</div>

4、复选框

checkbox样式类是对HTML<input type="checkbox">元素做了包装，Bulma故意不设置它的样式，以保留跨浏览器的兼容性和用户体验。

样例：

<div class="field">
	<label class="checkbox">
		<input type="checkbox">Remember me
	</label>
</div>
<div class="field">
	<label class="checkbox">
		<input type="checkbox">I agree to the <a href="#">terms and conditions</a>
	</label>
</div>
<div class="field">
	<label class="checkbox" disabled>
		<input type="checkbox" disabled>Save my preferences
	</label>
</div>

5、单选框

radio样式类是对HTML<input type="radio">元素做了包装，与checkbox类似，也没有设置样式。

样例：

<div class="field">
	<div class="control">
		<label class="radio">
			<input type="radio" name="answer" checked>Yes
		</label>
		<label class="radio">
			<input type="radio" name="answer">No
		</label>
	</div>
</div>
<div class="field">
	<div class="control">
		<label class="radio">
			<input type="radio" name="rsvp">Going
		</label>
		<label class="radio">
			<input type="radio" name="rsvp">Not going
		</label>
		<label class="radio" disabled>
			<input type="radio" name="rsvp" disabled>Maybe
		</label>
	</div>
</div>

6、文件

file元素是包装了<input type="radio">元素的简单交互式标签，它的结构如下：

file：主容器
- file-label：元素的实际互动和可点击部分
  - file-input：native file input，出于样式目的而隐藏
  - file-cta：文件上传引导提示(call-to-action)
    - file-icon：图标
    - file-label：类似“请选择文件…”的文本
  - file-name：所选文件名

样例：

<div class="field">
	<div class="file">
		<label class="file-label">
			<input class="file-input" type="file" name="resume">
			<span class="file-cta">
				<span class="file-icon"><i class="fas fa-upload"></i></span>
				<span class="file-label">Choose a file...</span>
			</span>
		</label>
	</div>
</div>
<div class="field">
	<div class="file is-info has-name">
		<label class="file-label">
			<input class="file-input" type="file" name="resume">
			<span class="file-cta">
				<span class="file-icon"><i class="fas fa-upload"></i></span>
				<span class="file-label">Choose a file...</span>
			</span>
			<span class="file-name">ScreenShot202103162020.png</span>
		</label>
	</div>
</div>
<div class="field">
	<div class="file is-centered is-boxed is-success has-name">
		<label class="file-label">
			<input class="file-input" type="file" name="resume">
			<span class="file-cta">
				<span class="file-icon"><i class="fas fa-upload"></i></span>
				<span class="file-label">Centered</span>
			</span>
			<span class="file-name">ScreenShot202103162020.png</span>
		</label>
	</div>
</div>

7、控件组

如果要将控件分组到一起，只需在field容器上添加is-grouped修饰符，之后可以通过is-grouped-centered或is-grouped-right修饰符来调整对齐方式：

<div class="field is-grouped">
	<p class="control">
		<a class="button is-primary">Submit</a>
	</p>
	<p class="control">
		<a class="button is-light">Cancel</a>
	</p>
</div>
<div class="field is-grouped is-grouped-centered">
	<p class="control">
		<a class="button is-primary">Submit</a>
	</p>
	<p class="control">
		<a class="button is-light">Cancel</a>
	</p>
</div>

可以通过在control元素上添加is-expanded修饰符来让该元素填满剩余空间；通过在field元素上添加is-grouped-multiline修饰符实现控件多行显示：

<div class="field is-grouped">
	<p class="control is-expanded">
		<input class="input" type="text" placeholder="Find a repository">
	</p>
	<p class="control">
		<a class="button is-info">Search</a>
	</p>
</div>
<div class="field is-grouped is-grouped-multiline">
	<p class="control">
		<a class="button">One</a>
	</p>
	<p class="control">
		<a class="button">Two</a>
	</p>
	<p class="control">
		<a class="button">Three</a>
	</p>
	<p class="control">
		<a class="button">Four</a>
	</p>
	<p class="control">
		<a class="button">Five</a>
	</p>
	<p class="control">
		<a class="button">Six</a>
	</p>
	<p class="control">
		<a class="button">Seven</a>
	</p>
	<p class="control">
		<a class="button">Eight</a>
	</p>
	<p class="control">
		<a class="button">Nine</a>
	</p>
	<p class="control">
		<a class="button">Ten</a>
	</p>
</div>

8、样例

<section class="section">
	<div class="field">
		<label class="label">昵称</label>
		<div class="control">
			<input class="input" type="text" placeholder="请输入昵称">
		</div>
	</div>

	<div class="field">
		<label class="label">用户名</label>
		<div class="control has-icons-left has-icons-right">
			<input class="input is-success" type="text" placeholder="请输入用户名" value="bulma">
			<span class="icon is-small is-left"><i class="fas fa-user"></i></span>
			<span class="icon is-small is-right"><i class="fas fa-check"></i></span>
		</div>
		<p class="help is-success">此用户名可用</p>
	</div>

	<div class="field">
		<label class="label">邮箱</label>
		<div class="control has-icons-left has-icons-right">
			<input class="input is-danger" type="email" placeholder="Email input" value="hello@apple.com">
			<span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
			<span class="icon is-small is-right"><i class="fas fa-exclamation-triangle"></i></span>
		</div>
		<p class="help is-danger">此邮件已被注册</p>
	</div>

	<div class="field">
		<label class="label">性别</label>
		<div class="control">
			<label class="radio">
				<input type="radio" name="sex" checked>男
			</label>
			<label class="radio">
				<input type="radio" name="sex">女
			</label>
		</div>
	</div>

	<div class="field">
		<label class="label">爱好</label>
		<div class="control">
			<div class="select">
				<select>
					<option>读书/旅行</option>
					<option>电影/音乐</option>
				</select>
			</div>
		</div>
	</div>

	<div class="field">
		<label class="label">备注</label>
		<div class="control">
			<textarea class="textarea" placeholder=""></textarea>
		</div>
	</div>

	<div class="field">
		<div class="control">
			<label class="checkbox">
				<input type="checkbox">已阅读并同意<a href="#">条款和条件</a>
			</label>
		</div>
	</div>

	<div class="field is-grouped">
		<div class="control">
			<button class="button is-link">提交</button>
		</div>
		<div class="control">
			<button class="button is-link is-light">取消</button>
		</div>
	</div>
</section>

Suffix	`*-0`	`*-1`	`*-2`	`*-3`	`*-4`	`*-5`	`*-6`
Value	`0`	`0.25rem`	`0.5rem`	`0.75rem`	`1rem`	`1.5rem`	`3rem`