现代功能
通过使用最新的 CSS3 功能,诸如 Flexbox,并且策划使用了 CSS 变量和 CSS 格栅,Bulma 的目标是始终使用浏览器的最前沿技术。
Bulma: an alternative to Bootstrap
See how Bulma can replace your Bootstrap setup
Bulma 和 Bootstrap 两者都是可以让开发者快速容易的构建网络应用界面的 CSS 框架。两者主要功能相似,但是还有些许不同,您可能对于如何从两者中选择一款适合自己的——感到有疑问。本文就是帮助您解决这个疑问的。
现代功能
通过使用最新的 CSS3 功能,诸如 Flexbox,并且策划使用了 CSS 变量和 CSS 格栅,Bulma 的目标是始终使用浏览器的最前沿技术。
简化的格栅系统
构建一个 Bulma 格栅,只需要一个简单的 .columns
容器包裹您计划的几个 .column
项目即可
易学的语法
使用像 .button
或者 .title
这样简洁明了的类名,和像 .is-primary
或者 .is-large
这样直接的修饰符系统,使用 Bulma 很容易,几分钟即可搞定。
更多关于修饰符信息参阅
支持 Font Awesome 5
Bulma 兼容 Font Awesome 4 和 Font Awesome 5,只需使用 .icon
元素即可。
无需 JavaScript
聚焦 CSS,Bulma 提供了易扩展的开发环境的轻量解决方案。
jQuery 插件
Bootstrap 包含了用来与您的站点互动的有用的 jQuery 插件。
大社区
鉴于其创建的时间很长了,Bootstrap 有一个比 Bulma 更大的社区。所以,有更多的工具(像是主题、插件等),在互联网上也有更多的问题解答。
兼容 Internet Explorer
在 IE11 中,Bulma 90% 的功能正常,而 Bootstrap 在此浏览器中有更好的兼容性。
附加元素
Bootstrap 有像 list group、wells 和 page header 这样的元素而 Bulma 没有。
无障碍访问
Bulma 已经支持无障碍访问,但是 Bootstrap 提供了更强、更全面的基于 WCAG 2.0 纲要的兼容和支持。
看一看此框架的哪一个元素在另一个框架中存在(或者不存在)
Bulma | Bootstrap |
---|---|
Bulma | Bootstrap |
Grid system | |
columns | row |
column | col |
tile | – |
Form | |
field | – |
field is-grouped | button groups |
field is-grouped | input groups |
control | form-group |
label | label |
input | form-control |
textarea | form-control |
select | – |
checkbox | checkbox |
radio | radio |
file | – |
button is-static | form-control-static |
Elements | |
box | – |
button | button |
content | – |
delete | close |
icon | glyphicon |
image | thumbnails |
image is-16by9 | responsive embed |
notification | alerts |
progress | progress bars |
table | table |
tag | labels |
tag is-rounded | badges |
title | h1 .. h6 |
subtitle | h1 .. h6 |
– | lists |
– | caret |
Components | |
breadcrumb | breadcrumbs |
card | card |
dropdown | dropdowns |
level | – |
– | list group |
media object | media object |
menu | – |
message | panels |
modal | modal |
navbar | navbar |
– | page header |
pagination | pagination |
panel | – |
tabs | navs |
– | wells |
Layout | |
container | container |
hero | jumbotron |
section | – |
footer | – |