在你的下一个项目中使用Bulma CSS的5个理由
Bulma是一个开源的、响应式的、基于Flexbox布局的轻量级CSS框架。作为一个新的框架，它已经赢得了许多开发者的青睐。
因此，在这篇文章中，我将讨论开发者喜欢Bulma CSS的5个原因。
1.学习曲线短
Bulma是一个易于学习的框架，学习曲线很短。使用官方网站上的启动模板和视频教程，你可以在几分钟内开始设计。
与其他CSS框架相比，Bulma拥有最易读的CSS类。
它提供了可读的类名，如.column, .button和直接的修饰符，如.success和.is-link。需要给你的网格添加一个额外的列吗？看看下面的例子，看看用Bulma是多么容易做到的。
如何用Bulma在网格中添加一个新列
2.Bulma 是模块化的
对于许多传统的CSS框架，我们必须处理未使用的CSS。幸运的是，有了Bulma，它不是什么都有，也不是什么都没有。
Bulma是一个完全模块化的框架，你可以只导入你需要的东西。
Bulma由39个.sass文件组成，你可以单独导入这些文件。例如，假设你只想要Bulma的按钮样式。那么，只需导入实用程序的依赖项和单独的.sass文件，如下图所示。
@import "bulma/sass/utilities/_all.sass"
3.100%响应
Bulma是一个移动优先的CSS框架，在桌面、手机、众多尺寸的平板屏幕上提供优化的网站响应性。
Bulma中的每个元素都是移动优先的，并为垂直阅读进行了优化。因此，在移动端：
- Bulma的列是堆叠在一起的。
- 导航菜单是隐藏的。
- 级别组件的孩子是垂直堆叠的。
此外，你可以通过添加is-mobile修改器来快速实现列和关卡组件的水平布局。因此，你可以在移动视图中水平地堆叠列，就像下面的例子所演示的那样。
移动视图中的水平列
默认情况下，列从平板电脑 尺寸开始被激活。比方说，你只想在桌面上的列。如下图所示，在列容器上使用is-desktop修改器。
4.不使用JavaScript
Bulma提供了轻量级的解决方案，可以在任何开发环境中轻松实现，如Angular、React、Vue、Ember等。Bulma的唯一输出是一个名为bulma.css的CSS文件。如果你想自定义变量，你可以下载单独的.sass源文件。
好吧，所有这些都意味着Bulma中没有JavaScript。
Bulma有时被描述为一个 "环境不可知 "的框架：一个样式层位于逻辑之上。
5.大量的交互式组件库
Bulma提供了几乎所有你需要的东西来创建你的网站。它提供了大量可定制的组件和100多个功能辅助类，你可以用它们来改变任何元素的样式。
下面的例子显示了如何通过使用几个CSS类来创建一个面包屑组件。
<nav class="breadcrumb" aria-label="breadcrumbs">
现在我们假设你需要通过改变默认的分隔符来定制你的面包屑。有四个可供选择的修改器，你可以选择：有箭头分隔符、有圆点分隔符、有圆点分隔符和有成功分隔符。
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
另外，Bulma还提供了全面的文档，通过实例和演示来帮助你进行这些定制。尽管Bulma还没有像Bootstrap那样流行，但它有一个高度热情的、快速成长的社区。因此，在社区的帮助下，你可以把你的Bulma项目带到一个新的水平。
最后的思考
Bulma可能是一个相对较新的CSS框架。但是，它已经证明了自己在CSS框架领域的地位。
我强烈建议你至少尝试一次Bulma CSS。我敢肯定，你不会后悔的。
谢谢你的阅读!
