近些年随着 jQuery、Ext 和 CSS3 的发展，以 Bootstrap 为代表的前端合作开发架构如遍地开花般挤进视线，虽说名噪一时。无论是图形界面插件端还是终端端都涌现许多杰出的架构，云讷了合作开发片断，也方便了大家的合作开发。

1、Fbootstrapp

Fbootstrapp如前所述Bootstrap因此提供更多了跟Facebook iframe apps和设计相同的机能。包涵用作大部份标准模块的基本的CSS和HTML，主要包括排印、配置文件、按键、表单、单点、导航系统之类，艺术风格与Facebook类似。

2、BootMetro

BootMetro架构的意念来自于Metro UI CSS，如前所述Bootstrap 架构构建，用作建立Windows 8 的Metro艺术风格的中文网站。它主要包括大部份Bootstrap的机能，并加进了两个附加的机能，比如说网页大块，插件栏之类。

3、Foundation

Foundation 是这款强大的，机能丰富的因此全力支持积极响应式产业布局的前端合作开发架构，你能通过Foundation加速建立蓝本，利用它所包涵的大批产业布局架构，原素和最优化实例加速建立在各种电子设备上能正常运转的中文网站和app。Foundation在构筑的时候秉持终端优先选择的策略，它保有大批新颖的语法化机能，因此使用ZeptoC#来替代jQuery，这样能带来更好的使用者新体验，因此提高运转的速度。

Foundation保有一套12列的灵巧可冗余的分层系统，你能用它加速建立适应环境多种下载电子设备的产业布局。它有许多的机能。它表述了许多的式样，比如说手写体排印，按键，配置文件，和各种各样的导航系统命令行。它也提供更多了许多的CSS模块，例如操作液晶（panels），onlyinclude（price tables），unlock（progress bars），表单（tables）和能适应环境不同电子设备的可伸缩式音频（flex video）。与此同时，Foundation还主要包括了许多的Java插件，如输入框（dropdowns），joyride（中文网站机能鼓励插件），magellan（中文网站固定导航系统插件），orbit（全力支持轻触的积极响应式图片Exi插件），reveal（插入框插件），sections（强悍的tab插件）和tooltips（工具提示信息）等。

Foundation架构还提供更多了许多管用的扩充。

模版（Stencils）——Foundation架构中的大部份UI原素都有Omnigraffle stencils和矢量PDF两种格式的下载，你能用它们来方便快捷的绘制线框图和蓝本图。

HTML模版—— HTML模版能方便地用来加速建立网页产业布局。你所要做的仅仅是复制得到模版代码，然后丢到网页的标签之间就好了。

图标手写体（Icon Fonts） —— 包涵自表述图标的一种网页手写体。

SVG 社交网络图标（Social Icons）—— 一组不依赖分辨率的社交网络图标（可缩放矢量图标）。

积极响应式表单——Foundation架构中积极响应式表单的实现机制是固定表单的左边第一列，然后表单的其他列能通过滚动条拖拉进行访问。

关闭帆布产业布局（Off-Canvas Layouts）—— 这些产业布局能允许一些网页内容或者导航系统命令行在终端端电子设备上默认隐藏，当下载屏幕变大或者使用者进行相应操作的时候这些内容再出现。当使用者进行相关操作的时候，网页内容或者导航系统命令行将会滑动出现。

如你所见，对于web合作开发者和设计师来说，Foundation就像是一个巨大的宝藏。在下载架构的时候，你能自表述下载架构的内容。

4、Gumby

Gumby 是这款如前所述Sass和Compass的简单灵巧因此稳定的前端合作开发架构。

它的流式-固定产业布局（fluid-fixed layout）能根据图形界面端和终端电子设备的分辨率自动优化要呈现的网页内容。它全力支持多种分层产业布局，主要包括多列混杂的冗余模式。Gumby提供更多两套PSD的模版，方便你在12列和16列的分层系统上进行设计。

Gumby提供更多了一个机能丰富的UI工具包，主要包括按键，配置文件，终端端导航系统，tabs，跳转链接（skip links），拨动开关（toggles and switches，能方便快捷地切换原素的class，而不需要进行附加的js操作），抽屉机能（drawers），积极响应式图片和retina图片之类。zz.java.tedu.cn为了紧跟最近的设计潮流，Gumby的UI原素中还包括了Metro艺术风格的扁平化设计，你也能用Pretty艺术风格的渐变设计，或者按照你的想法糅合两种设计艺术风格。该架构还提供更多了一套出众的积极响应式，保有独立分辨率的Entypo图标，你能在自己的web项目中尽情使用。

Gumby有一个很好自表述下载选择器，你能自行配置各个模块的颜色，因此按自己的需求方便地下载。

小编是一个有着多年工作经验的前端工程师，关于web前端有一个完整学习web前端的路线，学习材料和工

5、IVORY

IVORY 是这款轻量，简单但是强悍的前端架构，能用作320到1200像素宽度的积极响应式产业布局。它如前所述12列的积极响应式网格产业布局，包涵表单，按键，表单，分页，拨动开关，工具提示信息，手风琴，选项卡等中文网站中常用的模块和式样。

当你需要这款轻量灵巧，不需要附加的其他机能，因此适应环境不同下载电子设备的架构时，IVORY是你最好的选择。

6、Kube

最后，如果你的新项目需要这款实在的，不需要复杂的附加机能模块的，足够简单的架构，那么 Kube 将会是你正确的选择。Kube是这款最小化的，全力支持积极响应式的前端架构，它没有强加的式样设计，因此给了你充分的自由来合作开发自己的式样表。它提供更多了一些web原素的基本式样，比如说分层，配置文件，排印，表单，按键，导航系统，链接和图片之类。

Kube架构主要包括一个简洁的CSS文件用作方便地建立积极响应式产业布局，还主要包括了两个JS文件来完成tab和网页的按键操作。如果你希望得到Kube最大化的灵巧性和个性化定制，那么你能下载合作开发者版本（developer version），这个版本主要包括了LESS文件（主要包括各种变量，mixins和模块）。

7、Bootstrap

Boostrap绝对是目前最流行用得最广泛的这款架构。它是一套优美，直观因此给力的web设计工具包，能用来合作开发跨插件兼容因此美观大气的网页。它提供更多了许多流行的式样简洁的UI模块，单点系统和一些常用的Java插件。

Bootstrap是用动态语言LESS写的，主要主要包括四部分的内容：

脚手架——全局式样，积极响应式的12列单点产业布局系统。记住Bootstrap在默认情况下并不主要包括积极响应式产业布局的机能。因此，如果你的设计需要实现积极响应式产业布局，那么你需要手动开启这项机能。

基础CSS——主要包括基础的HTML网页要素，比如说表单(table)，配置文件(form)，按键(button)，和图片(image)，基础CSS为这些要素提供更多了优雅，一致的多种式样。

模块——收集了大批能重用的模块，如输入框（dropdowns），按键组（button groups），导航系统液晶（navigation control）——主要包括：tabs,pills,lists标签，面包屑导航系统（breadcrumbs）和页码（pagination），缩略图(thumbnails)，unlock（progress bars），媒体对象（media objects）之类。

Java——主要包括一系列jQuery的插件，这些插件能实现模块的动态网页效果。插件主要主要包括模态窗口（modals），提示信息效果（tool tips），“泡芙”效果（popovers），滚动监控（scrollspy），旋转木马(carousel)，输入提示信息(typeahead)，之类。

Bootstrap已经足够强悍，能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行合作开发，许多工具和资源能用来配合使用，下面列举了其中的一部分工具和资源。

jQuery UI Bootstrap—— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源，能够把 Bootstrap的清爽界面模块引入到jQuery UI中。

jQuery Mobile Bootstrap Theme—— 和上面提到的jQuery UI主题类似，这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap合作开发的中文网站在手机端也能优雅访问，那么这个资源对你来说很方便易用。

Fuel UX—— 它为Bootstrap加进了一些轻量的Java命令行。Fuel UI 安装，修改，更新和优化都很简单方便。

StyleBootstrap.info—— Bootstrap提供更多了自己的几种界面艺术风格，StyleBootstrap提供更多了更多的配色选项，因此你能给每个模块都应用不同的配色。

BootSwatchr —— 利用这个工具你能立刻查看主题修改后的效果。对于每一次变动的效果，这个应用都会生成一个唯一的URL方便你与他人分享，你也能在任意时刻修改你的主题。

Bootswatch —— 提供更多大批免费的Bootstrap主题。

Bootsnipp—— 在线前端架构交互模块制作工具，是一个供给设计师和合作开发者的如前所述Bootstrap HTML/CSS/Java 架构的免费原素。

LayoutIt —— 通过界面拖放生成器简便快捷地建立如前所述Bootstrap的前端代码。通过拖放动作将Bootstrap艺术风格的模块加入到你的个人设计里因此能方便地修改他们的属性，简单便捷。

8、Kickstrap

Kickstrap是Bootstrap的一个变体。它如前所述Bootstrap，并在它的基础上加进了许多app，主题和附加机能。这使得这个架构能单独地用作构筑中文网站，而不需要附加安装什么。你需要做的仅仅是把它放到你的中文网站上，然后用就能了。

App 是一些网页加载完成之后加载运转的Java和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也能自行加进更多的app。

选择不同的主题能让你的中文网站在众多Bootstrap构筑的类似中文网站中显得与众不同。

附加机能是一些用来扩充Bootstrap UI 库的附件，它们的语法基本相同或者相似。

9、GroundworkCSS

GroundworkCSS 是前端架构家族里面新添的这款小清新架构。它是如前所述Sass和Compass的一个高级积极响应式的HTML5，CSS和Java工具包，能用作加速建立蓝本因此建立在各种下载电子设备上能正常工作的中文网站和app。

GroundworkCSS保有一个灵巧，可冗余的流式分层系统，方便你创建任何产业布局。这个架构有许多让人印象深刻的机能，比如说在平板和终端端上的分层系统，当屏幕的宽度小于768或者480像素时，网页中原本并列排印的表单列（grid column）会自动变为独立的行，而不是折叠在一起。另一个很酷的机能是jQuery的积极响应式文本（ResponsiveText）插件，这个插件能动态调整网页文字的大小以适应环境下载电子设备的屏幕大小。这个插件对于可伸缩式的标题和建立积极响应式表单的时候特别管用。

GroundworkCSS包涵了大批的UI模块，如tabs、积极响应式数据表单导航系统、按键、配置文件、积极响应式导航系统命令行、tiles（一套替代radio按键和其他默认配置文件原素的优雅模块）、工具提示信息、对话框、Cycle2（这款强悍的，积极响应式的内容滑块）和其他许多的管用模块。它还提供更多了许多矢量社交网络图标和图标手写体。

你能通过切换网页上方的导航系统按键选择不同的下载电子设备要来查看这款架构的效果。通过这种方式，你能测试在不同的下载电子设备上各种模块的积极响应式产业布局情况。

GroundworkCSS的文档写的非常好，因此包涵着许多的示例，为了让你更快的上手，他还提供更多了多种积极响应式的模版。对于这款架构，唯一我能想到的缺点就是不能自表述要下载的架构内容。