你应该知道的9个优秀的CSS框架

一、Twitter开源杰做 - Bootstrap

Bootstrap 是一款由Twitter推出的开源CSS框架，它的核心是由一系列用于Web前端开发的工具包组成。Bootstrap基于HTML、CSS和 JavaScript，是一款很是适合敏捷Web开发的CSS框架，Bootstrap同时也是Github上最热门的开源项目之一。


Bootstrap的特色

• 强大的开发团队。Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合做开发，Bootstrap开发团队也是国际上公认最优秀的前端开发团队之一。
• 极简的框架。Bootstrap的设计很是简单，这就意味着，不管你是高级的前端设计师，仍是普通的程序员，都可以很快地掌握Bootstrap的开发流程和开发方式。
• 跨设备、跨浏览器最初设想的Bootstrap只支持现代浏览器，不过新版本已经能支持全部主流浏览器，甚至包括IE7。从Bootstrap 2开始，提供对平板和智能手机的支持。
• 完美的响应式设计。Bootstrap支持响应式布局，能够智能识别客户端浏览器的类型，从而构造适应当前设备前端布局，这一切都是全自动的。
• 支持HTML5和CSS3。Bootstrap支持全部的HTML5标签和CSS3属性。
• 使用LESS构建动态样式。当传统的枯燥CSS写法止步不前时，LESS技术横空出世。LESS使用变量、嵌套、操做、混合编码，帮助用户花费很小的时间成本，编写更快、更灵活的CSS。

二、扁平化UI开发包 - Flat UI

Flat UI是一款基于Bootstrap的扁平化前端UI工具包，Flat UI的组件外观设计很是清新和漂亮，Flat UI的组件包含按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块等精美的元素。


Flat UI的特色

• 包含不少基本的用户界面，同时也能够灵活建立更多自定义的UI界面组件
• 包含丰富的矢量图标和符号
• 自定义调色板
• 基于HTML / CSS、JavaScript的布局

三、语义化前端开发框架 - Semantic UI

Semantic UI 是一款语义化的前端开发框架，Semantic是围绕天然交流语言而架构的，这使得开发更加直观（易于理解）。跟Bootstrap不一样，Semantic在功能特性上、布局设计上、用户体验上更贴近天然语言。



Semantic UI的特色

• 文档和演示很是完善
• 易于学习和使用
• 配备网格布局
• 支持 Sass 和 LESS 动态样式语言
• 有一些很是实用的附加配置，例如inverted类。
• 对于社区贡献来讲是比较开放的。
• 有一个很是好的按钮实现，情态动词，和进度条。
• 在许多功能上使用图标字体。

四、Metro风格的CSS框架 - BootMetro

和Flat UI同样，BootMetro一样也是一款基于Bootstrap的CSS框架，BootMetro的最大特色在于它是一款Win 8 Metro风格的CSS框架。Metro风格的优点在于界面简洁平滑，UI元素简单，加载速度快，而且有不错的视觉效果。


BootMetro的特色

• 基于强大的Twitter Bootstrap，框架的灵感源于 Metro UI CSS
• 让用户更专一于网站的内容，由于Metro风格能够更加突出网页的主要内容。
• 彻底免费，和Bootstrap同样，BootMetro的使用也是很是简单。

五、雅虎开源杰做 – Pure

Pure也是一款很出色的CSS框架，以前分享的Bootstrap是由Twitter出品的，而Pure是来自雅虎的。尽管从UI界面效果上来讲，Pure没有Bootstrap那样精美，但Pure是纯CSS实现的，所以很是小巧，整个框架压缩后只有5.7k左右。

Pure的特色

• 最大的特色就是框架基于纯CSS，无任何JavaScript代码，渲染速度比较快。
• 由Yahoo出品，技术上应该不存在太大问题。
• 框架十分小巧，压缩后仅5.7k。
• 组件也很丰富，包括表格、表单、按钮、表、导航等。
• CSS类的标识十分简单，所以在使用Pure的过程当中代码会比较友好。

六、Win 8 Metro风格的CSS框架 - Metro UI CSS

Metro UI CSS 是一款Win 8 Metro风格的CSS框架，同时，以前介绍过的那款BootMetro也是基于Metro UI CSS的，咱们能够利用Metro UI CSS构建很棒的Metro风格应用。


Metro UI CSS 的特色

• Win 8 Metro风格，界面清爽平滑
• 学习很是简单
• 源代码很小巧
• 基于MIT开源协议

七、免费的Bootstrap主题包 - Bootswatch

Bootswatch 是一款基于 Bootstrap 的免费主题包，其中包含了丰富的 Bootstrap 主题，你能够下载安装这些主题的 CSS 文件，实现各类各样漂亮的 Bootstrap 主题风格。

Bootswatch 的特色

• 安装很是方便。只须要下载对应主题的CSS文件，替换原来的文件便可，无需安装二进制文件。
• 彻底开源。基于MIT开源协议，你也能够前往Bootswatch的开源社区进行问题讨论。
• 模块化。能够更加灵活地控制和改变样式。
• 插件化。已经为各个平台提供了API，若是你在使用NodeBB, BootSnap，那么就更加方便了。
• 持续更新中。更新和维护是一款优秀开源软件的标志。

八、集成在jQuery UI上的Bootstrap - jQuery UI Bootstrap

jQuery UI Bootstrap 是一个将jQuery UI集成到Bootstrap上的CSS框架，jQuery UI Bootstrap不只能够利用jQuery UI强大的控件 库，同时还能够享受Bootstrap那种清新天然的主题风格，因此愈来愈多的前端开发者都在使用jQuery UI Bootstrap。


jQuery UI Bootstrap的特色

• 基于jQuery UI，所以控件功能很是强大，可使用所有的jQuery UI控件。
• 基于Bootstrap，不一样控件有了统一的外观。
• 免费开源，你能够很方便地下载和使用。

九、轻量级CSS布局排版框架 – EZ-CSS

EZ-CSS是一款轻量级的CSS布局排版框架，EZ-CSS和其余的CSS框架有很大的不一样，由于它很小，才1kb。并且EZ-CSS的扩展性很强，对浏览器兼容性较为友好，利用EZ-CSS，你能够快速的实现较为复杂的网页布局排版。


EZ-CSS的特色

• 最大的特色就是框架很小，才1K，所以能够将其集成到任何相应的样式表中。
• 简化排版，原先须要很复杂的CSS代码才实现的排版布局，EZ-CSS能够分分钟搞定。
• 轻松实现多列布局，而且能够指定任意的宽度。

还有不少优秀的CSS框架，咱们正在为你们努力收集，但愿这些CSS框架资源对你有所帮助。