1.2 Bulma CSS框架与Bootstrap框架功能比较

很多朋友不知道该选择Bulma CSS框架还是Bootstrap框架,二者看起来都那么强大。

Bulma和Bootstrap都是CSS框架,允许开发人员轻松快速地构建web界面。虽然它们具有相当相似的特性,但在某些方面仍然存在差异,您可能想知道为什么应该选择一个框架而不是另一个框架。本文可以帮助你回答这个问题。

很多朋友不知道该选择Bulma CSS框架还是Bootstrap框架,二者看起来都那么强大。今天我就来介绍一下二者的区别

一、选择Bulma的理由

1、现代特征

通过使用最新的CSS3特性,如Flexbox,并计划使用CSS变量和CSS网格,Bulma的目标是保持在浏览器技术的前沿。

2、简单网格系统

要构建一个Bulma网格,您只需要一个.columns容器来包装任意多个.column项。

3、易于学习的语法

有了简单易读的类名,如.button或.title,以及一个简单的修饰符系统,如.is primary或.is large,很容易在几分钟内找到Bulma。

4、支持字体图标Font Awesome 5

Bulma的.icon元素,支持与Font Awesome 4和Font Awesome 5兼容。

5、100多个有用的CSS助手

Bulma附带了100多个助手来指定颜色、显示和间距。

6、没有JavaScript

通过只关注CSS,Bulma提供了一个轻量级的解决方案,可以在任何开发环境中轻松实现。事实上,bulma css框架只有一个css文件,很容易与其他框架技术结合,特别是vue中。

二、选择Bootstrap的理由

1.jQuery插件支持

Bootstrap包含有用的jQuery插件,用于向网站添加交互。

2、大社区

考虑到Bootstrap已经存在了多久,它比Bulma有一个更大的社区。因此,更多的工具(如主题和插件)可用,更多的问题在互联网上得到解答。

3、Internet Explorer兼容性

虽然90%的Bulma在IE11中工作,但是Bootstrap与这个浏览器有更好的兼容性。

4、附加元件

Bootstrap有一些Bulma没有的元素,比如list group、wells或page header。

5、可达性

Bulma引入了一些对可访问性的支持,但是Bootstrap与wcag2.0指南有很强的兼容性。

三、俺老刘个人使用二者的感觉

1、bulma css更简单易学

对于初次使用web前端框架的人更友好,特别是一些后端程序员和新手,只需要直接引入bulma文件,然后在html标签中增加一个class=xxx’即可。

2、bulma css做出的界面更漂亮一些

bulma css框架做出的网页更加好看,即使没做过前端的初学者也能做出一些看起来很漂亮的网页,而bootstrap要想做出好看的页面需要自己写很多的自定义css代码。

3、bulma本身没带js代码

这个给初学者带了一些麻烦,不过幸好俺老刘在bulma css框架简明教程中对每个需要js的地方,都提供了相关的js文件(https://www.anlaoliu.com/doc/book/3.html),这就让bulma css框架变得更简单了。


返回头部

问题反馈
返回顶部