Bulma: an alternative to Bootstrap

See how Bulma can replace your Bootstrap setup

Bulma 和 Bootstrap 两者都是可以让开发者快速容易的构建网络应用界面CSS 框架。两者主要功能相似,但是还有些许不同,您可能对于如何从两者中选择一款适合自己的——感到有疑问。本文就是帮助您解决这个疑问的。

为什么选择 Bulma

现代功能

通过使用最新的 CSS3 功能,诸如 Flexbox,并且策划使用了 CSS 变量CSS 格栅,Bulma 的目标是始终使用浏览器的最前沿技术。

简化的格栅系统

构建一个 Bulma 格栅,只需要一个简单的 .columns 容器包裹您计划的几个 .column 项目即可

易学的语法

使用像 .button 或者 .title这样简洁明了的类名,和像 .is-primary 或者 .is-large这样直接的修饰符系统,使用 Bulma 很容易,几分钟即可搞定。
更多关于修饰符信息参阅

无需 JavaScript

聚焦 CSS,Bulma 提供了易扩展的开发环境的轻量解决方案。

为什么选择 Bootstrap

jQuery 插件

Bootstrap 包含了用来与您的站点互动的有用的 jQuery 插件。

大社区

鉴于其创建的时间很长了,Bootstrap 有一个比 Bulma 更大的社区。所以,有更多的工具(像是主题、插件等),在互联网上也有更多的问题解答。

兼容 Internet Explorer

在 IE11 中,Bulma 90% 的功能正常,而 Bootstrap 在此浏览器中有更好的兼容性

无障碍访问

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
#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!