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框架变得更简单了。