HTML5(H5)常使用的十大前台框架（一）

Foundation框架

Foundation是一个响应式前台框架系列，能轻松设计漂亮的响应式网站，应使用程序和电子邮件，在任何设施上看起来都很棒。Foundation是语义，可读，灵活且完全可定制的。我们不断增加新的资源和代码片段，包括这些方便的HTML模板，以帮助您入门！

特点：世界上最先进的响应式前台框架。快速为适使用于任何类型设施的站点创立原型和生产代码。

总结：Foundation 算是框架界的元老啦，都说框架去的早，而这个框架一直到现在仍然这么的热门，假如你比较介意 Bootstrap 开发撞脸的尴尬事情，那么你能考虑用 Foundation 。即便你用预约义的 UI 元素, 也不会与其余网站太像，就像官方说的给开发者更灵活的框架体验。

Bootstrap框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前台开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都用了该项目。 国内少量移动开发者较为熟习的框架，如WeX5前台开源框架等，也是基于Bootstrap源码进行性可以优化而来。

包含内容：

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重使用的组件，使用于创立图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap包含了十几个自己设置的jQuery 插件。您能直接包含所有的插件，也能一一包含这些插件。

定制：您能定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

总结：Bootstrap 最大的优势就是它非常流行，流行就代表你有问题就有很多人帮你处理问题，就代表装逼它就是利器，还有就是界面比较和谐，容易上手，关注它的小伙伴应该发现最新 V4 版也开始支持 FlexBox 布局，这是非常好的更新体验。 劣势是 class 命名不够语义化，并且各种缩写，以至于我离了文档就是个菜，最近开始整混合 APP，选框架的时候首选就是它，但之前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap 好小，小到我只好选择别的框架。

AUI框架

AUI为一款轻量级前台UI框架，更偏重于CSS布局及样式的构造，浅显易懂的写法及板块式的拼装方便使用户自由扩展。轻小的体积、灵活的扩展性，大大提高手机端项目的体验度和开发效率。

在目前市场上的UI框架中，大多数的框架以JS来实现过多的功可以和布局。当然并不能否定JS在一个移动前台框架中的作使用性，既然是前台框架侧重点要更多的考虑框架本身在一个项目中的资源耗费问题及如何提高使用户的体验度。鉴于APICloud多窗口结构及原生板块的拼装，所以在手机端项目中AUI强调更多的是快速布局、灵活布局的实现，结合APICloud本身特性，提高开发效率及使用户体验。

最近刚起来的AUI，尽管作者宣称是专为APICloud开发者设计的一套UI框架，但实际它还是处理了很多移动前台开发的普遍问题，是主要面向混合开发的 CSS 框架。看起来作者比较猖狂，各种高级 CSS3 遍地用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，处理了很多复杂的让我骂娘的布局，现在能直接拿走就使用。

总结：这个框架对我来说有个优点就是纯 CSS 框架，自己以前也就使用过 Pure，自己有点 JS 可以力，假如不是复杂的效果，找个纯 CSS 框架自己随意改改即可以，而现在 CSS3 也已经可以够做到动画，效率、质量、高效全兼顾，所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么，说好的高大上呢。

Amaze UI 框架

第二个详情的是AmazeUI，据官方说是咱们中国首个HTML5跨屏前台框架。

最初用它是由于本尊遇到了一个爱纠结细节设计，有一次她跟我的字体较上真了，结果一句顶万句的 BOOS 夸了她，我只好根据她的想法去处理，结果最后找到了Amaze UI 框架，按照官方的话说就是 "基于社区开源项目构建的一个跨屏前台框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流" 。但其实我就是看中它可以处理国内浏览器存在的跨屏适配和兼容性问题。

总结：Amaze UI 总的来说就是加入更多符合中国市场特性的元素，框架对跨屏、适配都做了的比较好的解决并且准备一了一系列的常使用的网页组件，为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化，兼容中国本土主流浏览器、轻量化，不仅适使用于桌面端，还更更适合手机端、包含少量封装好的Widgets。不过自也就我感觉 Amaze UI 文档能否有点太那什么了，比方 “人们不会在乎jQuery的那点流量。”，说实的在这真没啥，不过我素来不会说出来( 哈哈 )，代码和设计上感觉没太多突出的点。

Pure框架

一组小的，响应迅速的CSS板块，您能在每个Web项目中用它们。

特点：

CSS占使用空间极小。

纯净是微不足道的。整套板块的时钟频率为3.8KB *缩小和压缩。在考虑移动设施的情况下，对我们来说保持文件大小很小很重要，并且仔细考虑了每一行CSS。假如您决定仅用这些板块的子集，则能节省更多字节。

你的CSS基础

Pure构建于Normalize.css之上，为原生HTML元素以及最常见的UI组件提供布局和样式。这就是你所需要的，没有任何瑕疵。

以移动为主题

Pure是开箱即可使用的响应，因而所有屏幕尺寸的元素都很棒。

坚持你的方式

Pure具备最小的样式，并鼓励您在其上编写应使用程序样式。它旨在让您不受束缚，并轻松覆盖样式。

创立响应式布局

通过用Grids，Menus等，能轻松地为所有屏幕尺寸创立漂亮的响应式布局。我们让您轻松上手。看看几个不同的布局，并使用坚如磐石的基础开始您的下一个Web项目。

这个框架是我在做管理系统时接触的，选择用也是由于框架小巧，并且是纯 CSS，没有太多的牵扯，好使用来与其余框架快速结合用。