javascript 框架根基技巧布局CSS控件 JavaScript 类库

Posted 2020-08-26

预筹备之 javascript

今朝支流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，得到了用户的普遍好评。海内的一些框架许多也是模仿 jQuery 对 JavaScript 停止了包装，不外这些框架的开山祖师 YUI 照样坚持用自己的 JavaScript 类库。

jQuery 是今朝用的最多的前端 JavaScript 类库，据初步统计，今朝 jQuery 的占有率曾经跨越 46%，它算是比拟轻量级的类库，对 DOM 的操纵也比拟便利到位，支撑的后果和控件也许多。同时，基于 jQuery 有许多扩大名目，包含 jQuery UI(jQuery 支撑的一些控件和后果框架)、jQuery Mobile(挪动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的抉择引擎)。这些弥补使得 jQuery 框架加倍完备，更使人高兴的是，这些扩大与今朝的框架根本都是兼容的，能够穿插应用，使得前端开辟加倍丰硕。

Ext 是 Sencha 公司推重的 JavaScript 类库，比拟 jQuery，Ext JS 更重量级，动辄数兆的文件，使得 Ext 在外网应用的时刻会挂念许多。然则，另一方面，在 Ext JS 庞大的文件面前是 Ext JS 壮大的功效。Ext JS 的控件和功效能够说壮大和富丽到了让人发指的水平。图表、菜单、殊效，Ext JS 的控件库异常丰硕，同时它的交互也异常壮大，自力靠 Ext JS 险些就能够代替节制层实现于客户的交互。壮大的功效，丰硕的控件库，富丽的后果也使得 Ext JS 成为内网开辟利器。

框架开山祖师 YUI 也有自己的 JavaScript 类库，DOM 操纵和后果处置也还比拟便利，功效和控件也很齐备，然则比拟 jQuery 和 Ext JS 显得比拟中庸一些。跟着 Yahoo!的衰败，YUI 的呼声也渐渐被新起的框架吞没，想来也让人可惜。

除上述的三个 JavaScript 类库，另有 Dojo、Prototype、Mootools 等浩繁类库，由于本文批评辩论的框架多采纳上述框架，以是其余框架暂不批评辩论。

预筹备之 CSS

跟着 CSS3 的推出，浏览器对款式的支撑加倍上了一个条理，后果加倍出众。各框架也纷繁开辟出基于 CSS3 的款式，让框架加倍丰硕。

对付 CSS3，更是推出了一些预编译的扩大框架，重如果 LESS、Sass 和 Compass(Compass 是基于 Sass 的扩大)。能够便利地停止变量界说，格局援用，函数界说等操纵，并内置了大批的后果。让您的 CSS 开辟效力晋升一个品位。依据 Chris Coyier 的比拟，Sass+Compass 险些完胜 LESS。有兴趣的读者能够自行参考http://css-tricks.com/sass-vs-less/。由于 Sass 是用 Ruby 开辟的，以是也必要响应的 Ruby 环境将文件编译成 CSS 文件。

 

回页首

海内外前端开辟框架比较

起首咱们先对今朝海内外支流前端开辟框架做一个根本的懂得，以后再对他们停止一个直观的比较。

Bootstrap

Bootstrap（http://www.bootcss.com）是今朝桌面端最为流行的开辟框架，一经 Twitter 推出，势不可挡。Bootstrap 重要针对桌面端市场，Bootstrap3 提出挪动优先，不外今朝桌面端仍然照样 Bootstrap 的重要目标市场。Bootstrap 重要基于 jQuery 停止 JavaScript 处置，支撑 LESS 来做 CSS 的扩大。假如想要在 Bootstrap 框架中应用 Sass，则必要经由过程 Bootstrap-Sass（https://github.com/thomas-mcdonald/bootstrap-sass）名目增长兼容。Bootstrap 框架在布局、版式、控件、殊效方面都异常让人满足，都预置了丰硕的后果，极大便利了用户开辟。在作风设置方面，还必要用户在下载时手动设置，可设置装备摆设粒度异常细，响应也比拟繁琐，不太直观，必要对 Bootstrap 异常认识设置装备摆设起来能力轻车熟路。

在浏览器兼容性方面，今朝 Firefox, Chrome, Opera, Safari, IE8+等支流浏览器 Bootstrap 都供给支撑。然则在 IE 支撑方面略显短板，对 IE6 和 IE7 支撑都不是分外抱负。在 Bootstrap3 中乃至废弃了对 IE6、IE7 的支撑。不外在海内，依据 CNZZ 的统计，今朝 IE 的占有率仍旧到达 46.98%，同时大批海内浏览器也是采纳 IE 内核。这让咱们在应用 Bootstrap 的时刻老是有所忌惮。在 Bootstrap2 下面，能够经由过程 BSIE 名目增长对 IE6 的支撑，然则也不克不及支撑全体后果。

在框架扩大方面，跟着 Bootstrap 的普遍应用，扩大插件和组件也异常丰硕，触及表示组件、兼容性、图表库等各个方面。

图 1. Bootstrap 的布局与后果示例

jQuery UI

jQuery UI（http://jqueryui.com/）是 jQuery 名目组中对桌面端的扩大，包含了丰硕的控件和殊效，与 jQuery 无缝兼容。同时，jQuery UI 中预置了多种作风供用户抉择，防止了一模一样。假如您对预置的作风不满足，还能够经由过程 jQuery UI 的可视化界面，自助对 jQuery UI 的表示后果停止设置装备摆设，异常便利，够高端大气上品位。

图 2. jQuery UI 的后果示例

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是 jQuery 名目对挪动端的扩大，今朝支撑 ios, android, Windows Phone, Black Berry 等支流平台。详细支撑环境能够拜见http://jquerymobile.com/gbs/。别的 jQuery Mobile 在布局，控件和殊效方面都很大方。在作风方面，与 jQuery UI 相似，除预置的作风后果以外，还支撑用户可视化设置装备摆设的后果。

可圈可点的是，jQuery Mobile 还与 Codiqa 无缝衔接，用户能够间接经由过程拖拽实现对界面的计划，和代码的天生。

图 3. jQuery Mobile 的后果示例

Sencha Ext JS

Sencha Ext JS（http://www.sencha.com/products/extjs）是 Sencha 基于 Ext JS 开辟的前端框架，内容极端丰硕，控件、殊效等支撑异常异常丰硕，表格、丹青、申报、布局、乃至数据衔接，包罗万象。只需您想不到，没有它办不到。基于 Sass 和 Compass，使得用户对格局的改动和殊效制造加倍便利。别的，Sencha 有丰硕的产物线，Sencha Desktop Packager 能够让您的应用领有桌面应用的后果, Sencha Animator 基于 CSS3 加倍便应用户对殊效的制造，不但支撑桌面端，挪动端更是不在话下。在 Sencha 看来，用 Animator 做游戏都是轻松拿下。Sencha Space 是基于 html5，供给制造跨平台应用的利器。同时 Sencha Ext JS 对支流浏览器的支撑也异常抱负。

Sencha Ext JS 有着刺眼的辉煌，然则光线面前总归有点暗影。除以前提到的 Ext JS 太甚重量级以外，商业化是 Sencha 的另一把白。赞助 Sencha 披荆棘之时，也把大把的码农砍在马下。Sencha 划定，但凡商业化的应用，都必要付费。别的，Sencha 的帮助产物也全体免费，不然只能是试用版。这里的帮助产物，实在包含了下面提到的所有产物。

图 4. Sencha Ext JS 的后果示例

Sencha Touch

Sencha Touch（http://www.sencha.com/products/touch）是 Sencha 面向挪动端的开辟框架，基于 HTML5 技巧，包管了对大多数挪动平台的支撑。Sencha Touch 包含丰硕的布局，控件和殊效。而且 Sencha Touch 对响应式支撑的很好，在分歧装备上，乃至在横屏和竖屏时都邑表示分歧的后果。这类后果是 Sencha Touch 控件自顺应的。Sencha Touch 也实现了对大多数挪动装备的支撑。Sencha Architect 是对挪动端的可视化编纂工具，有着不朽的后果，但也有着不菲的身价。

同时 Sencha Touch 也支撑混合式 App 创立，也等于基于 Web 技巧，共同 PhoneGap (http://phonegap.com/)或许 Cordova(http://cordova.apache.org/)之类的工具，就能够构建挪动应用。Sencha Touch、jQuery Mobile、Foundation 这些前端框架卖力界面和后果的编写，PhoneGap、Cordova 框架则容许经由过程 JavaScript 和其余接口对手机装备的挪用，开创了新的挪动端开辟形式，真正实现了挪动端的跨平台开辟。

Sencha GXT

Sencha GXT（http://www.sencha.com/products/gxt/）是 Sencha 对 Google 的 Web Toolkit 框架的扩大。能够支撑经由过程 Java 文件的剖析，天生 HTML5 页面文件，能够与 Java 环境无缝集成。有着丰硕的控件和殊效，而且能够无缝挪用 Google 舆图等 Google 应用。固然开辟时不是分外直观，然则后果照样异常丰硕的。与 Sencha Ext JS 涓滴不显弱势。

图 5. Sencha GXT 的后果示例

Dojo

今朝独一能与 Sencha Ext JS 一较高低的框架就只需 Dojo(http://dojotoolkit.org)了。抱着 IBM, VMWare 等浩繁大腿，Dojo 的一颦一笑都额定惹人注目。Dojo 名目标产物线和功效也分外丰硕。起首，Dojo 有自己的 DOM 剖析器 Nano，是 DOM 剖析和处置的内核。别的，Dojo 的 Web 框架有异常丰硕的布局、版式、控件和殊效，对多说话和图表的扩大支撑都异常好，并支撑对舆图的操纵。人人能够检查它的演示(http://demos.dojotoolkit.org/demos/)，与 Ext JS 的后果停止比拟。别的，Dojo 另有自己的图形化计划和开辟工具 Maqetta，能够经由过程拖拽实现计划。Dojo 的作风设置不是在下载的时刻指定的，而是经由过程援用分歧的 CSS 格局来实现。

Dojo 固然比 jQuery 重量级很多，然则比 Ext JS 照样轻量级一些，至多在文件巨细上。别的，Dojo 另有自己的 CDN 机制，只需经由过程设置装备摆设，就能够对 Dojo 文件停止 CDN。由于有 IBM,Oracle 等大佬的支撑，Dojo 在与 Spring 等现有框架支撑方面也表示得很抱负。

图 6. Dojo 的后果示例

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo 推出的挪动端框架，表示也很不俗。在布局，控件，殊效方面都下了很多工夫。并支撑与所用平台婚配的作风设置，假如您不喜欢还能够援用分歧 CSS 文件来实现分歧后果。

除能够在挪动端的浏览器上应用，Dojo Mobile 也支撑与 PhoneGap 无缝衔接，能够经由过程 Dojo Mobile 开辟挪动 App 应用。同时也具备不错的响应性（在宽屏和窄屏上的表示后果分歧）。

图 7. Dojo Mobile 在 IPhone 上的后果示例

Mootools

Mootools(http://mootools.net)能够说是今朝最轻量级的前端框架，内核 js 紧缩完以后只需 8k，完备版紧缩以后也不到 100k，远比其余框架要小许多。Mootools 有自己的面向工具计划的内核 Mootools Core。伴跟着最小的文件巨细，框架的功效比其余框架也要弱很多，只需在控件和殊效上有大批支撑。

图 8. Mootools 后果示例

Prototype JS

Prototype JS（http://prototypejs.org）也是一个简练的框架，有着丰硕的对 DOM 操纵的功效，对 Ajax 和 JSON 支撑得都异常好，在应用上与 jQuery 比拟也相差不多。作为 Rails 默许的 JavaScript 框架，信任对广大开辟职员也颇有自创意义的。

在扩大方面，Scriptaculous（http://script.aculo.us/）对 Prototype JS 停止了丰硕的扩大，重如果在动画殊效、Ajax 节制、DOM 操纵、单位测试方面等。

YUI

YUI（http://yuilibrary.com）作为开源前端框架的开山祖师，在框架上的功力异常之深。有着自己的剖析 DOM 的焦点框架，而且在殊效、动画、图表等方面都有丰硕的扩大，并能够经由过程 YQL 间接拜访 Yahoo！的数据。在用户经常应用的功效方面都有着不错的表示。

与 jQuery 灵活的语法比拟，YUI 显得加倍中规中矩，在代码构造、布局和形式方面都加倍讲求，更体现出工程师的谨严。同时 YUI 也有着丰硕的产物线，领有测试框架 YUITest、文档天生框架 YUIDoc、主动构建框架 YUI Build，满足名目开辟各方面的必要。跟着 Yahoo!的衰败，YUI 也感到渐渐步入老年末年，但作为相称谨严完备的前端框架开山祖师，足以秒杀其余。

图 9. YUI 的后果示例

Foundation

Foundation（http://foundation.zurb.com/）是 ZURB 旗下的重要面向挪动端的开辟框架，然则也坚持对桌面端的兼容，今朝曾经更新到 Foundation4 版本。框架重要采纳 jQuery 和 Zepto（语法酷似 jQuery，但比 jQuery 更轻量级）作为 JavaScript 根基，CSS 则基于 Sass、Compass，有着很好的扩大性，并有着丰硕的布局，版式和多种多样的控件与殊效，异常便利开辟者应用。控件的响应式后果也赞助用户辨认分歧浏览器后果。

ZURB 作为一个完备的名目组，包含许多原型、计划、构建、阐发等一系列工具，为用户供给完备的办事。固然，有许多办事是要免费的。

Foundation 重要以挪动端作风为主，如图 10 所示。

图 10. Foundation 的作风示例

Kissy

Kissy（http://docs.kissyui.com）是阿里团体自立开辟的前端框架，今朝在淘宝网、一淘网等阿里系网站上得到很多应用。Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core，用于对 DOM 的剖析，Ajax 处置等。同时，有着丰硕的控件，并实现了一些动画后果和殊效。异样，在 Kissy 的控件中也能够看到 Bootstrap 等外洋框架的影子。别的，Kissy abc 名目工具能够赞助用户实现主动化构建，并有许多扩大组件便应用户应用。

应该说 Kissy 是今朝海内开辟的最好的前端框架，在现实应用中也经过了查验，但跟外洋成熟框架比拟照样有必定差距。

图 11. Kissy 的后果示例

Kissy Mobile

Kissy Mobile（http://mobile.kissyui.com）是 Kissy 推出的挪动版框架，意在开辟出能够在挪动浏览器和挪动应用上都能够应用的框架，不外今朝名目内容还比拟少，控件和殊效也比拟少，也不具备响应式的后果。

图 12. Kissy Mobile 后果示例

Qwrap

Qwrap（http://www.qwrap.com/）是baidu有啊团队推出的 JavaScript 框架，现在被支出 360，被普遍应用与 360 产物中。Qwrap 综合 jQuery、Prototype、YUI 特色，对 JavaScript 停止了封装。然则，假如要把 Qwrap 算成一个前端开辟框架照样有些牵强，由于除 JavaScript 类库以外，Qwrap 根本乏善可陈，还处于成长阶段。

Tangram

Tangram（http://tangram.baidu.com）是baidu推出的另一个 JavaScript 框架，被普遍应用于baidu系旗下的产物，与 Qwrap 相似，Tangram 也只能算是一个 JavaScript 框架，对 JavaScript 做了很多扩大，然则作为前端开辟框架照样显得比拟薄弱。基于此，baidu公司继承推出了两个基于 Tangram 的名目，Magic 和 Baidu Template。Magic 名目基于 Tangram 对控件和殊效都做了扩大，增长了 10 个新的控件。Baidu Template 则更多是针对挪动端开辟的扩大，今朝对付大多数支流挪动装备和操纵系统都有支撑。

懂得完这些框架，咱们从平台、根基技巧、布局、CSS、控件、殊效和作风设置等几个方面来对它们停止一个根本比拟：

表 1.海内外支流前端开辟框架比较

框架称号	重要 平台	根基技巧	布局	CSS 版式	控件	殊效	作风设置
	桌面端	jQuery, LESS	丰硕	丰硕	丰硕	丰硕	手动设置装备摆设
	桌面端	jQuery	-	-	丰硕	丰硕	预置/可视化设置装备摆设
	挪动端	jQuery	丰硕	-	丰硕	丰硕	预置/可视化设置装备摆设
	桌面端	Ext JS, Sass	丰硕	-	极丰硕	极丰硕	预置
	挪动端	HTML5	丰硕	-	丰硕	丰硕	-
	桌面端	Java, HTML5	丰硕	-	丰硕	丰硕	-
	桌面端	Dojo Nano	丰硕	丰硕	极丰硕	极丰硕	CSS 代码
Mobile	挪动端	Dojo Nano	丰硕	-	丰硕	丰硕	内置与挪动端婚配
	桌面端	Mootools Core	-	-	大批	大批	-
	桌面端	Prototype	-	-	大批	丰硕	-
	桌面端	YUI	丰硕	-	丰硕	丰硕
	挪动端	jQuery/Zepto, Sass	丰硕	丰硕	丰硕	丰硕
	桌面端	Kissy Core	-	-	丰硕	少	-
	挪动端	Kissy	-	-	少	少	-
	桌面端	QWrap	-	-	-	少
	桌面端	Tangram	-	-	少	少

由此咱们能够看到，对付桌面端，今朝 Bootstrap 和 jQuery UI 曾经能够满足大多数的开辟必要，也在业界得到了普遍的应用，有着丰硕的组件和扩大，和绝对简练的语法和操纵。应答咱们的根本必要曾经足够了。假如您对前端界面的后果有比拟高的请求，盼望能够应用像布局树如许比拟繁杂的控件，倡议您斟酌 Dojo，抱了这多年的大腿也不是白抱的，后果照样很不错的。对付，局域网的应用，还能够斟酌 Sencha Ext JS 框架，后果加倍震动，然则对收集的请求也更高。假如这些照样不克不及满足您心坎的狂野，那只能倡议您应用 Flex 或许 SilverLight 了。相同，假如您对收集速率异常敏感，盼望找一个迷您而且功效不错的框架，那 Mootools 会是您不错的抉择。假如您很复古，也能够应用 YUI，固然曲线不敷性感，然则内容很丰硕。假如您是一个 Ruby on Rails 的开辟职员，倡议您能够先看一下 Prototype 框架，毕竟是默许的框架。假如您对下面说到的框架都不满足，那倡议您体验一下海内的框架一段光阴，而后再回过火来看适才说到的框架，信任您必定会有一种名顿开的感到。

对付挪动端的应用，jQuery Mobile, Foundation 仍然是轻量级抉择，Dojo Mobile 和 Sencha Touch 会为您供给加倍壮大的功效。同时，您还能够与 PhoneGap 和 Cordova 框架联合应用，应用 Web 的技巧开辟挪动应用。不外这类混合式开辟形式鼓起光阴并不长，还在赓续成长中。

 

回页首

结束语

下面只是以后涌现出的前端开辟框架中的一部分，信任另有更多优良的框架还在研发中间，到此咱们对“百花齐放”这一词有了更直观的感到，也阐明在沉静了多年以后，前端开辟的事情愈来愈得到人人的看重，也注定会愈来愈繁华。文中的倡议只代表笔者个人的初浅看法，人人终极的抉择还要联合现实的开辟必要。

参考资料

进修

• Sass 与 LESS 比拟，从说话能力、变量处置、函数扩大等多角度详细地比拟了 Sass 和 LESS，为用户给出了抉择倡议。
• PhoneGap，PhoneGap 是今朝普遍应用的挪动端开辟框架，共同 PhoneGap 的 SDK 开辟者能够经由过程 Web 技巧开辟出跨平台的挪动应用。
• Cordova，Cordova 是 Apache 公司推出的挪动开辟框架，也是让开辟者能够应用 Web 技巧开辟跨平台挪动应用。
• developerWorks Web development 专区：经由过程专门对于 Web 技巧的文章和教程，扩大您在网站开辟方面的技巧。
• developerWorks Ajax 资本中间：这是无关 Ajax 编程模子信息的一站式中间，包含许多文档、教程、服装论坛t.vhao.net、blog、wiki 和消息。任何 Ajax 的新信息都能在这里找到。
• developerWorks Web 2.0 资本中间，这是无关 Web 2.0 相干信息的一站式中间，包含大批 Web 2.0 技巧文章、教程、下载和相干技巧资本。您还能够经由过程 Web 2.0 新手入门 栏目，敏捷懂得 Web 2.0 的相干观点。
• 检查 HTML5 专题，懂得更多和 HTML5 相干的常识和意向。

批评辩论

• 参加 developerWorks 中文社区。检查开辟职员推进的博客、服装论坛t.vhao.net、组和维基，并与其余 developerWorks 用户交换。

条批评

 

 

• 

  IBM Bluemix 资本中间

  文章、教程、演示，赞助您构建、安排和治理云应用。

• 

  developerWorks 中文社区

  立刻参加来自 IBM 的业余 IT 交际收集。

• 

  IBM 软件资本中间

  免费下载、试用软件产物，构建应用并晋升技巧。

 

回页首

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=10

Zone=Web development

ArticleID=969037

ArticleTitle=前端开辟框架比较

publish-date=04222014

url=http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/

 

• 赞助
• 接洽编纂
• 提交内容
• 定阅源

• 新浪微博

 

 

本文由php100中文网编译，转载请看文末的转载哀求，感激合作！

       在Web开拓的世界里，框架是很罕有的东西，甚至每天都有新的框架和模板产生，你很难对它们都理解，你也很难决定该当应用哪一个框架。前端Web框架的本质就是JavaScript，CSS和HTML干系组件的凑集，你可以或许把它应用到平凡的项目中，可以或许极大节省开拓时间，特别是在那些紧急的项目中。这里，我们为大家列出了10个前端Web框架，可以或许参考。更多Web框架和工具，可以或许参考《推荐给开拓者的20个精良PHP框架》《新年之际为开拓者筹办的7款有用工具》《为开拓者筹办的10款错误报告和追踪工具》。
 

1. Furtive

这是一个紧张针对移动端的框架，如今有越来越多的人更加存眷移动端的应用。这是一个轻量级的框架，在不同的浏览器上都可以或许运行，同时还支持CSS，SCSS。
 

2. Csstyle

如果你想创建一个易于掩护的格式表，你可以或许试试这个框架。它基于主流的筹划原则，框架会应用一系列的SASS稠浊典范来实行程序，这会使得CSS变得语义性更好、更加易读。
 

3. Muffin

准确意义上来说，它可能不算是一个框架，但它也异常值得你的存眷。它的本质是一个存眷于筹划的Web模板，你可以或许应用它帮助创建静态的网站。它参考了inuit.css，Boilerplate和Bootstrap中的优势和尺度，帮助你的Web开拓。
 

4. Kouto Swiss

这是一个基于CSS组件的出色框架，它具有多种用场和功能，可以或许帮助你更快的开拓。
 

5. PowerToCSS

这是一款基于SMACSS和DRY原则筹划的轻量级框架，它拥有着CSS组件，如果你想快速上手一个项目，这个框架是一个不错决定。

6. Themosis WordPress Framework

这个框架应用了很多PHP的特征，比如命名空间。别的，它综合了WordPress的尺度和典型的MVC架构。
 

7. Material Framework

它绝对这里先容的别的框架的应用规模要小一些，不过它是绝对的轻量级，只包含基于CSS的组件，这个框架可以或许帮助你快速理解和应用CSS。
 

8. Material Design for Bootstrap

正如它的名字那样，这是Bootstrap 3的一个主题。它可以或许让你快速、大略的做出你项目中的筹划。

 

9. Material UI

Material UI 是一套完成为了 Google 的 Material Design 全新筹划措辞的 CSS 框架。它可以或许作为 NPM 装配包，应用 browserify 和 reactify 的依靠管理和 JSX 转换。
 

10. Materialize

Google 在 IO 大会上推出的 UI 筹划尺度，该尺度是为了统一 PC、Web 和移动应用的用户应用体验，目前成功的例子有 Google Gmail 团队新出品的 Inbox 应用。该框架应用了很多新鲜的筹划和风格，有两个版本：尺度版和SASS。

 

跟着互联网的赓续成熟和咱们愈来愈多的用各类挪动端的装备拜访互联网，Web计划师和Web开辟者的工作也变得愈来愈繁杂。

十年前，统统都还简略得多。谁人时候，大部门用户都是坐在桌子前经由过程一个大大的显示器来浏览咱们的网页。960像素是其时比拟正当的网页宽度。那些年咱们的开辟工作重要便是跟十几个桌面浏览器打交道，并经由过程增加几个浏览器的hack，来兼容诡异的旧版本 IE 浏览器。时至今日，跟着曩昔五六年间手持电子装备的日新月异，统统都变了样。咱们看到各类尺寸的智妙手机和平板层见叠出，电子浏览器，和电视装备上的浏览器等也赓续出现。这类装备的多样性正在一日千里。

可以或许预感，在不远的未来，相对付利用台式机，愈来愈多的人会利用挪动装备来拜访互联网。事实上，曾经有相称数目的一部门人只经由过程智妙手机上网。这意味着，咱们这些Web计划师和开辟者必要晓得若安在庞大的挪动端王国里出现和适配咱们的产物，这至关重要。在撰写本文的时候，只管咱们还没完全搞明确若何将桌面端出现的全体内容在手持装备中出现异样的后果，然则用于实现这一目的的技巧和工具正在变得愈来愈好。

在不晓得浏览装备屏幕巨细的时候，最重要的战略便是利用响应式网页计划。它是一种依据装备浏览窗口的尺寸巨细来输入响应页面结构的办法。小型挪动装备（如智妙手机和平板电脑）上的大多数浏览器会默许将一个网页缩小到顺应自己的屏幕尺寸，而后用户可以或许经由过程缩放和转动等办法浏览全部网页。这类办法在技巧上是可行的，然则从用户体验的角度上讲却比拟蹩脚。小屏幕上笔墨过小浏览不方便，链接过小难以点击，缩放和转动的操纵多多少少会让人在浏览的时候专心。

响应式网页计划利用异样的HTML文档来适配一切的终端装备，响应式网页计划会依据装备屏幕的巨细加载分歧的款式，从而在分歧的终端装备上出现最优的网页结构。举个例子，当你在大屏幕桌面浏览器中检查一个网页的时候，网页的内容能够是分为很多列的，而且有罕见的导航条。假如你在小屏幕的智妙手机上检查异样的页面，你会发明页面的内容出如今统一列中，而且导航按钮充足大，点击起来很方便。你可以或许在Media Queries这个网站上看到很多响应式网页计划的案例。在你的浏览器中随意点开一个计划案例，而后转变浏览器窗口的巨细，你会看到网页的结构会依据窗口巨细响应变更。

到今朝为止，咱们可以或许看出，响应式网页计划可以或许有效地赞助咱们应答日趋增长的终端装备多样性。那末在咱们计划网页的时候有哪些现实可用的工具和技巧可以或许用来实现响应式网页计划呢？咱们每一小我都必要成为web巨匠能力驾御这门技巧么？或许是利用咱们曾经控制的web根本常识就曾经充足了？今朝有甚么工具可以或许帮到咱们么？

这时前端开辟框架富丽退场。响应式网页计划实现起来其实不艰苦，然则要让它在一切的目的装备上都失常运作会有一点小辣手。框架可以或许让这一工作变得简略。利用框架，你可以或许花最少的力量创立响应式且相符尺度的网站，统统都很简略而且具备同等性。利用框架有很多利益，好比说简略疾速，和在分歧的装备之间的同等性等等。框架最大的上风便是简略易用，纵然只控制大批的web常识，你也可以或许毫无障碍的利用它们。

简而言之，假如你卖力看待今朝的web开辟工作，那末利用框架停止开辟就不是可选项而是必需要做的工作。你的站点必需高度机动以顺应分歧的浏览器，平板，智妙手机和其他各类各样的手持装备。

一个前端开辟框架实在便是一系列产物化的HTML/CSS/JavaScript组件的聚集，咱们可以或许在计划中利用它们。前端开辟框架有很多，其中有一些写得很棒。为了人人的利用方便，下文枚举了今朝最壮大利用最普遍的几款前端开辟框架。记着，这些框架其实不仅仅是CSS 栅格之类的一些器械，它们包括的是整套的前端开辟框架。

 

大衣哥 年度 王小源 帅总 囧囧丸 天佑 流氓三金 毕加索 王冕 风小筝 利哥 天佑 天佑 沈曼 资料

 

1. Bootstrap

Boostrap相对是今朝最风行用得最普遍的一款框架。它是一套柔美，直观而且给力的web计划工具包，可以或许用来开辟跨浏览器兼容而且雅观大气的页面。它供应了很多风行的款式简练的UI组件，栅格体系和一些常用的JavaScript插件。

Bootstrap是用静态说话LESS写的，重要包括四部门的内容：

• 脚手架——全局款式，响应式的12列栅格结构体系。记着Bootstrap在默许情况下其实不包括响应式结构的功效。是以，假如你的计划必要实现响应式结构，那末你必要手动开启这项功效。
• 根基CSS——包括根基的HTML页面因素，好比表格(table)，表单(form)，按钮(button)，和图片(image)，根基CSS为这些因素供应了优雅，同等的多种款式。
• 组件——收集了大批可以或许重用的组件，如下拉菜单（dropdowns），按钮组（button groups），导航面板（navigation control）——包括：tabs,pills,lists标签，面包屑导航（breadcrumbs）和页码（pagination），缩略图(thumbnails)，进度条（progress bars），媒体工具（media objects）等等。
• JavaScript——包括一系列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增加了一些轻量的JavaScript控件。Fuel UI 装置，改动，更新和优化都很简略方便。
• StyleBootstrap.info —— Bootstrap供应了自己的几种界面作风，StyleBootstrap供应了更多的配色选项，而且你可以或许给每一个组件都利用分歧的配色。
• BootSwatchr —— 利用这个工具你可以或许立即检查主题改动后的后果。对付每一次更改的后果，这个利用都邑天生一个独一的URL方便你与别人分享，你也可以或许在随意率性时候改动你的主题。
• Bootswatch —— 供应大批收费的Bootstrap主题。
• Bootsnipp —— 在线前端框架交互组件制造工具，是一个供应计划师和开辟者的基于Bootstrap HTML/CSS/JavaScript 架构的收费元素。
• LayoutIt —— 经由过程界面拖放天生器轻便快捷地创立基于Bootstrap的前端代码。经由过程拖放举措将Bootstrap作风的组件参加到你的小我计划里而且可以或许方便地改动他们的属性，简略便捷。

 

2. Fbootstrapp

Fbootstrapp基于Bootstrap而且供应了跟Facebook iframe apps和计划雷同的功效。包括用于一切尺度组件的根本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，作风与Facebook类似。

 

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创立Windows 8 的Metro作风的网站。它包括一切Bootstrap的功效，并增加了几个额定的功效，好比页面平铺，利用程序栏等等。

 

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap，并在它的根基上增加了很多app，主题和附加功效。这使得这个框架可以或许零丁地用于构建网站，而不必要额定装置甚么。你必要做的仅仅是把它放到你的网站上，而后用就能够或许了。

App 是一些页面加载实现之后加载运行的JavaScript和CSS打包文件。默许加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以或许自行增加更多的app。

抉择分歧的主题可以或许让你的网站在浩繁Bootstrap构建的类似网站中显得与众分歧。

附加功效是一些用来扩大Bootstrap UI 库的附件，它们的语法根本雷同或许类似。