1、Bootstrap – 最流行的Web前端UI框架
2、jQuery UI - 基于jQuery的开源Javascript框架
3、jQuery UI Bootstrap
4、BootMetro - Metro风格的CSS框架
5、Flat UI - 扁平风格 UI 工具包
6、网易CSS框架 NEC
7、Alloy UI – 功能强大的CSS UI框架
8、Cardinal – 移动端的CSS UI框架
9、快速开发CSS的框架 CSScaffold
10、后台UI开发框架 MuseUI
网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。
Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。
我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，最近想换工作的朋友可以看一下。
一、简介
Bulma 框架最大的特点，就是简单好用。所有样式都基于class，只需为 HTML 元素指定class，样式立刻生效。
JavaScript
1
<a class="button is-primary is-large">Login</a>
上面代码中，a 元素只需加上几个class，就会出现一个主色调（is-primary）的大（is-large）按钮。
Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。
mobile：小于等于768px
tablet：大于等于769px
desktop：大于等于1024px
widescreen：大于等于1216px
fullhd：大于等于1408px
它提供二十多种常用组件，比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站，可以不用写任何 CSS 代码。
二、基本用法
Bulma 的安装只需一步，把样式表插入网页即可。
JavaScript
1
<link rel="stylesheet" href="css/bulma.min.css"/>
使用更简单，就是为 HTML 元素加上class。
JavaScript
1
<a class="button">Button</a>
上面的代码为 a 元素加上button类，这个链接就会被渲染成按钮。
Bulma 提供大量的修饰类，用来改变基类的样式。它们都是以is-或has-开头。比如，要改变 Button 的大小，就可以使用下面的修饰类。
JavaScript
1
2
3
4
a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>
9个流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。1、BootstrapBootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。2、PatternFlyPatternFly是Red Hat的开源CSS框架，和Bootstrap不同的是，Bootstrap是为那些想要创建漂亮网站的人而设计的，而PatternFly主要专注于企业应用程序开发人员，提供诸如条形图、图表、导航之类的组件，实际上Red Hat就是使用它创建了OpenShift。3、Material Components for the webMaterial Components for the web(MDC Web)，是谷歌专为Web设计的全新前端框架。MDC Web可帮助开发人员执行Material Design，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的Web项目。4、PureBootstrap，Patternfly和MDC Web是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。5、FoundationFoundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。6、BulmaBulma是一个基于Flexbox的开源框架，可根据MIT许可证开源。Bulma是一个非常轻量级的框架，因为它只需要一个CSS文件。Bulma拥有简洁明了的文档，可轻松选择你想要的主题。它还具有许多Web组件，你可以在设计中使用它们。7、Skeleton如果说还有什么框架比Pure更加轻量级，那一定是Skeleton。Skeleton库只有大约400行，并且该框架仅提供一些基本的CSS框架组件。尽管如此，Skeleton还是提供了详细的文档来帮助你快速上手。8、MaterializeMaterialize 是一个基于 Material Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。9、BootflatBootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比，Bootflat更简单，并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发，大部分都是图像，没有太多的文字。
