本帖是Bulma CSS教程的所有帖子的索引页，并附有实例。 Bulma CSS简介及特点
Bulma是基于flexbox的CSS开源框架，它支持以下特点
- 响应性强，可以在任何尺寸的屏幕上工作，就像Bootstrap框架一样，它是按照移动优先的原则设计的。
- 轻量级的尺寸
- 大量的内置组件和预定义的SASS样式
- 比Bootstrap更好的设计
- 它是基于支持SASS文件的模块
- 可定制和可扩展
安装和设置
任何网站或HTML都可以通过多种方式与Bulma CSS集成。
- 直接使用bulma.min.css文件
- CDN库
- NPM包
在任何网络应用中，它的安装都非常简单。只要在HTML中使用带有样式表的CSS文件就可以获得所有的组件和CSS样式。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
或者如果你想直接使用CSS文件，从GitHub仓库下载库并复制到你的项目中，在HTML文件中链接CSS文件或者安装Npm包。
npm package Bulma
响应式列
Html文件可以添加下面的viewport meta标签，以便在任何屏幕尺寸上工作。
<meta name="viewport" content="width=device-width, initial-scale=1">
列和级别
它是基于flexbox的，就像bootstrap中的网格。它包含有多列样式的列，所有的列都可以应用于父容器的CSS样式。这里有一个例子，Level是一个可以水平显示元素的属性--Level-left,level-right列的例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Learn Bulma CSS Tutorials with examples</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
<body>
<div class="container">
<div class="columns">
<div class="column">
1st column
</div>
<div class="column">
2nd column
</div>
<div class="column">
3rd column
</div>
<div class="column">
4th column
</div>
</div>
</div>
</body>
</html>
bulma是为移动优先设计的，就像bootstrap UI框架。每个组件都是垂直显示的 输出是
修改器
Bulma有is-和has-修饰符，可以将各种UI风格应用于UI元素。例如，is-primary为按钮添加不同的颜色 这个例子解释了各种按钮样式 is-primary .is-info .is-success .is-link .is-warning .is-danger
<section class="section">
<div class="container">
<a class="button">
Normal Button
</a>
<a class="button is-primary">
Primary button
</a>
<a class="button is-link">
Link button
</a>
<a class="button is-info">
Info button
</a>
<a class="button is-warning">
Warning button
</a>
<a class="button is-error">
Error button
</a>
<a class="button is-danger">
Danger button
</a>
</div>
</section>
输出是
