或许你之前听说过Bulma；如果没有，也没关系。Bulma是一个轻量级、可配置的CSS框架。
​​

或许你之前听说过Bulma；如果没有，也没关系。如前所述，Bulma是一个轻量级、可配置的CSS框架，完全基于Flexbox。Flexbox是一个相对较新的CSS规范，在本书编写时，它得到了浏览器的良好支持。

Bulma底层使用Flexbox来运行，并帮助你解决了使用Flexbox时需要考虑的难点。使用Bulma无须了解Flexbox，但应掌握基本的CSS知识。

本文将从较高的层次介绍Bulma，带你熟悉Bulma及其术语和概念，本文节选自图书《Bulma必知必会》。

1.1　Bulma有何独特之处

与其他CSS框架相比，Bulma有如下不同之处。

现代化：整个Bulma是基于CSS Flexbox设计的。
响应式：Bulma的设计同时支持移动端和桌面设备。
易学：大多数用户只需几分钟便能入门。
语法简单：Bulma使用更少的HTML，所以代码易于阅读和编写。
可定制：Bulma提供了300多个SASS变量，基于这些样式变量，你可以定制自己的主题框架。
无JavaScript：Bulma完全基于CSS设计编写，因此可以很优雅地与任何JavaScript框架（Angular、Vue.js、React、Ember或者纯JavaScript应用）集成。

1.2　简易的栅格系统

Bulma最著名的当属其简单明了的栅格架构：

就是这样，只需两个CSS类（columns 作为容器类，column作为其子类），即可实现响应式栅格系统，无须指定其他任何维度，两列会自动分占宽度的50%。

如果想要第3列，只需再添加一个 column 即可：

每一列会自动占据33% 的宽度，无须编写额外的代码。如果想要更多列，按上述操作添加

column

即可实现，Bulma会帮你自动适配大小。

1.3　可读性

Bulma简单易学，因为它的代码简洁易读。下面是一个Bulma按钮的代码，仅需添加一个button类即可实现。

为了扩展该按钮的功能，Bulma提供了修饰符类，用于给基础的按钮提供其他样式。要对该按钮应用主色调青绿色，并增大尺寸，只需添加 is-primary 类和 is-large 类：​

提示：最好使用“primary”“secondary”这样的主次命名约定。这将有助于给样式赋予一些意义，并为以后的定制留有余地。

1.4　可定制

Bulma有300多个变量，几乎可以覆盖Bulma中的所有属性，因此可以高度定义个性化设置。

使用SASS，可以设置初始变量，比如覆盖 blue 的颜色值、设置默认字体甚至各种响应式断点。

每一个Bulma组件都有自己的变量集合：

box组件具有阴影；
columns有默认空白；
menu有默认的背景色和前景色；
button和input的每一种状态（悬浮、活跃、选中）都有对应颜色；
……
每个文档页面都有可覆盖的变量列表。

1.5　模块化

由于Bulma被划分成了多个模块文件，所以按需导入相应代码即可。

例如，有的开发人员只想使用Bulma的栅格系统，那么创建一个如下所示的SASS文件即可。

上述 SASS 文件只引入了 Bulma 的 columns 和 column CSS类。

1.6　列

Flexbox是一维的栅格系统，这意味着在Bulma中有行或者列的概念。使用Bulma开发网站要考虑列，并将列封装在行或容器中。Bulma的基本功能如下。

从 columns 行开始。

在 columns 行中，可以添加一列或者多列，Bulma会基于添加的列计算每列所占空间。​

在这个例子中，添加的 column 占据了整个浏览器的宽度，因为在 columns 中仅此一列。

如前所述，每一列的宽度并不固定，但还是要再次强调：添加的列越多，每一列就会越窄，比如有3列，每一列的宽度就是33%；如果是4列，每一列的宽度就是25%。

1.7　修饰符

修饰符是额外的CSS类，可以把它们添加到HTML中，以此改变HTML元素的显示效果。以按钮（