推荐⼗四款常见的Web前端开发框架-copy
在做web开发的时候经常会遇到⼀个问题，那就是，选择什么样的框架来做前端开发。下⾯封程中把⽬前常⽤的⼀些前端的框架简单的给⼤家介绍⼀下.
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、flex
Apache基⾦会发布了Flex 4.8版本，这是Adobe将Flex捐献给Apache基⾦会后发布的第⼀个版本
需要注意的是
2014年03⽉10⽇，Apache Flex技术社区发布了全新的Apache Flex 4.12.0版本，该版本是Apache Flex 4.11.0的升级版本，改进的功能包括：
◆⽀持最新版本的Flash Player
◆⽀持最新的AIR运⾏时
◆改进了内存占⽤和性能
◆改善了针对移动平台的组件的样式
◆⽀持iOS7系统
◆修复了超过80个漏洞[4]
2014年05⽉10⽇，Apache对4.12.0版本进⾏优化改进，发布了Flex 4.12.1，新版本加⼊对全新Flash Player及Air运⾏时的⽀持，改进对移动媒体查询的⽀持，并修复20多个Bug。
3、extjs
ExtJS是⼀种主要⽤于创建前端⽤户界⾯，是⼀个基本与后台技术⽆关的前端ajax框架。
功能丰富，⽆⼈能出其右。
⽆论是界⾯之美，还是功能之强，ext的表格控件都⾼居榜⾸。
华丽的界⾯，灵活的功能，还有开发⼯具都是配套的，但有个最⼤的问题，⽤就得花钱！
4、easyui
easyui帮助你构建你的web应⽤更加容易。
它是⼀个基于jquery的插件，开发出来的⼀套轻量级的ui框架，⾮常⼩巧⽽且功能丰富。
官⽅⽹站是：
但是她有⼀个最⼤的问题就是代码只能到以前的开源的版本，到了1.2以后的版本源代码都是经过混淆的，如果遇到问题修改起来会⾮常⿇烦！不过⼀个⽐较⼤的优势是开源免费，并且界⾯做的还说的过去！
5、MiniUI
⼜⼀个基于jquery的框架，开发的界⾯功能都很丰富。
jQuery MiniUI – 快速开发WebUI。
它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界⾯开发，带来绝佳的⽤户体验。
使⽤MiniUI，开发者可以快速创建Ajax⽆刷新、B/S快速录⼊数据、CRUD、Master-Detail、菜单⼯具栏、弹出⾯板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应⽤系统界⾯。
界⾯做的挺不错，功能也挺丰富，但是有两个⽐较⼤的问题，⼀个是收费，⼀个是没有源码，说⽩了，不开源！基于这个开发如果想对功能做扩展就需要他们的团队进⾏升级！
6、jQuery UI
jQuery UI 是⼀套 jQuery 的页⾯ UI 插件，包含很多种常⽤的页⾯空间，例如 Tabs（如本站⾸页右上⾓部分）、拉帘效果（本站⾸页左上⾓）、对话框、拖放效果、⽇期选择、颜⾊选择、数据排序、窗体⼤⼩调整等等⾮常多的内容。
功能⾮常全⾯，界⾯也挺漂亮的，可以整体使⽤，也可以分开使⽤其中的⼏个模块，免费开源！
7、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国⼈⾃⼰开发的基于jQuery实现的Ajax RIA开源框架.
设计⽬标是简单实⽤，快速开发，降低ajax开发成本。
欢迎⼤家提出建议，我们将在下⼀版本中进⼀步调整和完善功能．共同推进国内整体ajax开发⽔平。
毕竟是国产的，⽀持⼀下，⽽且源码完全公开，可以选择⼀下！不过性能怎么样不敢确定！
8、GWT
Google ⽹页⼯具包——GWT 提供了⼀组基于Java语⾔的开发包，这个开发包的设计参考Java AWT包设计，类命名规则、接⼝设计、事件监听等都和AWT⾮常类似。熟悉Java AWT的开发者不需要花费多⼤的⼒⽓就能够快速的理解GWT开发⼯具包，将更多地时间投⼊到GWT 应⽤的开发过程中。
你不⽤去了解这样那样的javascript框架，通过java你就可以写出功能丰富的界⾯，可以做单元测试，毕竟是google的产品，严重⽀持⼀下！
9、YUI
Yahoo! UI Library (YUI) 是⼀个开放源代码的 JavaScript 函数库，为了能建⽴⼀个⾼互动的⽹页，它采⽤了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使⽤授权为 BSD许可证，基本上没怎么研究过！
YUI Compressor倒是挺出名的，这套UI库不知道应⽤的情况怎么样！
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项⽬合并⽽成的⼀个新项⽬。
⼤公司的框架，并且是⼏样库的强强联合，值得推荐！
11、Dojo
在国内应⽤好像不是很⼴，不过性能上应该没问题。
Dojo是⼀个⽤javascript语⾔实现的开源DHTML⼯具包。
有多个基⾦会的⽀持，包括IBM和SUN，都是软件界的泰⽃，值得信赖！
12、ZK
ZK是⼀套以 AJAX/XUL/Java 为基础的⽹页应⽤程式开发框架，⽤于丰富⽹页应⽤程式的使⽤接⼝。最⼤的好处是，在设计AJAX⽹络应⽤程式时，轻松简便的操作就像设计桌⾯程式⼀样。 ZK包含了⼀个以AJAX为基础、事件驱动（event-driven）、⾼互动性的引擎，同时还提供了多样丰富、可重复使⽤的XUL与HTML组件，以及以 XML 为基础的使⽤接⼝设计语⾔ ZK User-interfaces Markup Language (ZUML)。
在线的demo
设计器的demo
⽇历组件
功能丰富，全⾯，⽂档齐全，⽽且升级了很多次，⾮常值得推荐！
13、OperaMasks-UI
OperaMasks- UI是OperaMasks团队 2011下半年打造的⼀款轻量级前端JS组件库，旨在提供⼀款学习曲线低、定制性灵活、样式统⼀，且多浏览器⽀持、覆盖企业业务场景的前端 JavaScript UI组件库。⽬前，该团队已将这⼀产品以LGPL 开源协议开放给社区。
⽂档丰富，功能齐全，⽽且很容易使⽤和开发！⽽且是国产的哟！
14、JavaFX
Sun 公司(已于2009年被Oracle公司收购)在2008年12⽉05⽇发布了JavaFX技术的正式版，它使您能利⽤ JavaFX 编程语⾔开发富互联⽹应⽤程序(RIA)。JavaFX Script 编程语⾔（以下称为JavaFX）是Sun微系统公司开发的⼀种declarative, statically typed(声明性的、静态类型)脚本语⾔。JavaFX技术有着良好的前景，包括可以直接调⽤Java API的能⼒。因为 JavaFX Script是静态类型，它同样具有结
构化代码、重⽤性和封装性，如包、类、继承和单独编译和发布单元，这些特性使得使⽤Java技术创建和管理⼤型程序变为可能。
⽬前国内常见、并且强⼤实⽤的web前端开发框架就是这些，希望通过我的整理可以帮助到⼤家.
作为⼀名做为在前端死缠烂打6年并且懒到不⾏的攻城⼠，这⼏年我还是阅过很多同门从知名到很知名的各种前端框架，本来想拿15-20个框架来分享⼀下，但在跟⼏个前辈讨教写⽂章的技巧时果断被⽆情的打击了，所以这⾥我还是低调的只拿出10个框架来个⼤锅乱炖来简单介绍，凑够字数也就全剧终了。
原本写这篇⽂章想围绕着 CSS 框架来的，但因为⽬前界内⽐较流⾏并遍地开花的主要还是 JS+CSS 模式的框架，并且⾃⼰靠着⼀点 JS 功底，就想专门针对 CSS，所以最后来个⼤锅乱炖都⼤致聊聊。下⾯的框架也没有什么先后顺序之分，我想到啥就写啥啦( 作为前端，我⼀向都这么的任性 ^_^ )。
Bootstrap
⾸先说 Bootstrap，估计你也猜到会先说或者⼀定会有这个( 呵呵了 )，这是说明它的强⼤之处，拥有框架⼀壁江⼭的势⽓。⾃⼰刚⼊道的时候本着代码任何⼀个字母都得⾃⼰敲出来挡我者废的决⼼，来让⾃⼰成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本⼈虽然是个设计+前端的万⾥有
⼀的⼈才，但是⽼天只让我会⽤ PS 和各种设计⼯具却不给我跟设计妹⼦⼀样的审美，所以这也是我最初选择Bootstrap 的原因之⼀，它让我做出来的东西好⽍能在妹⼦⾯前装个逼，不过时间长了难免觉得 Bootstrap 美的让⼈烦躁，但好在它的每个版本都会有很⼤的改变，不会让⼈觉得⾃⼰做的⽹站会跟很多⽹站撞脸。Bootstrap 的⽤法及其简单( 这也可能就是 Bootstrap 作者阅攻城⼠⽆数，了解他们痛的结果 )，以⾄于是个⼩前端都可以快速上⼿，⼏乎没什么学习成本。
作者：Mark Otto 和Jacob Thornton Star：93,112
总结：Bootstrap 最⼤的优势就是它⾮常流⾏，流⾏就代表你有问题就有很多⼈帮你解决问题，就代表它就是利器，还有就是界⾯⽐较和谐，容易上⼿，关注它的童鞋应该发现最新 V4 版也开始⽀持 FlexBox 布局，这是⾮常好的升级体验。劣势是 class 命名不够语义化，并且各种缩写，以⾄于我离了⽂档就是个菜，最近开始整混合 APP，选框架的时候⾸选就是它，但之前搞 PC ⼀直没注意，后来搞混合右键属性看它的时候，瞬间⼀阵凉风袭来，Bootstrap 好⼩，⼩到我只好选择别的框架。
AUI
第三个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的⼀套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要⾯向混合开发的 CSS 框架。看起来作者⽐较猖狂，各种⾼级 CSS3 遍地使⽤，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不
错的属性，哈哈了⼀顿激动从前辈⼿上⼤胆认识了⼏个好东西，并且框架还提供了聊天界⾯、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿⾛就⽤。
作者：流浪男 Star：92
总结：这个框架对我来说有个优点就是纯 CSS 框架，⾃⼰以前也就⽤过 Pure，⾃⼰有点 JS 能⼒，如果不是复杂的效果，个纯 CSS 框架⾃⼰随便改改就可以，⽽现在 CSS3 也已经能够做到动画，效率、质量、⾼效全兼顾，所以还是选择了这种 CSS 框架。有⼀点觉得不满的是这框架的⽂档真的好那什么，说好的⾼⼤上呢。
Amaze UI
第⼆个介绍的是妹⼦UI，最初使⽤它是因为本尊遇到了⼀个爱纠结细节设计⼠，有⼀次她跟我的字体较上真了，结果⼀句顶万句的 BOOS
夸了她，我只好根据她的想法去解决，结果最后到了Amaze UI 框架( 我不介意你叫我懒淫 )，按照官⽅的话说就是 "基于社区开源项⽬构建的⼀个跨屏前端框架，以移动优先，从⼩屏到⼤屏，最终实现所有屏幕适配，适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。
所属公司：云适配 Star：6710
总结：Amaze UI 总的来说就是加⼊更多符合中国市场特性的元素，框架对跨屏、适配都做了的⽐较好的处理并且准备⼀了⼀系列的常⽤的⽹页组件，为减少搞兼容、适配各种敲键盘的加班狗们的⼯作时间做了不⼩的贡献。，框架还对中⽂排版优化，兼容中国本⼟主流浏览器、轻量化，不仅适⽤于桌⾯端，还更更适合移动端、包含⼀些封装好的Widgets。不过⾃也就我感觉 Amaze UI ⽂档是否有点太那什么了，⽐如 “⼈们不会在乎jQuery的那点流量。”，说实的在这真没啥，不过我从来不会说出来( 哈哈 )，代码和设计上感觉没太多突出的点。
Frozen UI
有段时间看到 QQ 瞬间⾼⼤上了，后来四处打听，原来 QQ 客服端也⽤了混合开发，其中QQ会员前端⽤的是 Frozen UI，并且这套框架开源，欣喜若狂耐不住⼼⾥的寂寞直接上⼿试了⼀遍，初体验感觉基础样式效果简单⾊调清爽，有个⽐较活跃的社区所以组件什么的也⽐较丰富。
作者： QQVIP FD Team Star：1,067
总结：如果拿 Frozen UI 配合⼀些如 APICloud ⽤来做混合 APP 感觉就太酷了，或者原⽣的⽕鸡们拿去嵌套在应⽤中做前端开发，这个框架对 android 2.3 +、ios 4.0 + 做了兼容，或者拿来做 Web App 也是极好的选择，劣势的话从 UI 层⾯就可以看到了，谁让它是出⽣在QQ会员前端的呢。
Frozen UI
第三个是Frozen UI，有段时间看到 QQ 瞬间⾼⼤上了，后来四处打听，原来 QQ 客服端也⽤了 HTML 混合开发，其中QQ会员前端就是⽤
的 Frozen UI，并且这套框架开源，欣喜若狂耐不住⼼⾥的寂寞直接上⼿三下五除⼆试了⼀遍就开始试⽤，初体验的就是基础样式效果简单⾊调清爽，有个⽐较活跃的社区所以组件什么的也⽐较丰富。
作者： QQVIP FD Team Star：1,067
总结：如果拿 Frozen UI 配合⼀些如 APICloud ⽤来做混合 APP 感觉就太酷了，或者原⽣的⽕鸡们拿去嵌套在应⽤中做前端开发，并且这个框架对 android 2.3 +、ios 4.0 + 做了兼容，或者拿来做 Web app 也是极好的选择，不过要是放在⾥⽐这更合适的 WeUI 框架更是⾸选了，劣势的话从 UI 层⾯就可以看到了，谁让它是出⽣在QQ会员前端的呢。
WeUIi
第四个是WeUI和同 FrozenUI都属于差不多的 WeUi了，也是⼀个⽐较专⼀的框架，WeUI应该说⽐FrozenUI前者更专⼀，话说连个官⽹都不搞，所有答疑都在 gitHub Issues 解决了，这个框架极其简单，体积当然就不⽤说了，模块也就 7 个左右，不过体量虽然⼩做的却不错，⼝碑看 star 就够了，框
架从 16/1/23 发版⾄今 github star 超过 7K，不过也不排除⽤户没地⽅发泄所以都跑到 git 上来，哈哈。
Star：7,129
总结：看完设计团队设计的这套 DEMO，⼆话不说如果要做公众，这个⼆话不说必然是⾸选了。框架不好的地⽅简⽽⾔之就是框架本⾝应该就没考虑过让⽤户⽤到⾮的场景之下。
SUI
“SUI 是⼀套基于bootstrap开发的前端组件库，同时它她也是⼀套设计规范。通过SUI，可以⾮常⽅便的设计和实现精美的页⾯”。果然还是直接引⽤官⽅给的枯燥⽆味⼴告要节省⾃⼰的脑细胞( 囧… )，当然了就像⼴告说的，如果你之前⽤过 Bootstrap，那么可以轻松转向 SUI，这可能就是淘宝给前端屌丝们的福利了。。
Star：120
AUI
第六个是最近刚起来的最近刚起来的 AUI，虽然作者声称是专为APICloud开发者设计的⼀套UI框架，
但实际它还是解决了很多移动前端开发的普遍问题，是它主要⾯向混合开发的 CSS 框架。，所以看起来作者⽐较猖狂，各种⾼级 CSS3 遍地使⽤，这也使得我不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了⼀顿激动从前辈⼿上⼤胆认识了⼏个好东西，并且框架还提供了聊天界⾯、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿⾛就⽤。
作者：流浪男 Star：92
总结：这个框架对我来说有个优点就是纯 CSS 框架，⾃⼰以前也就⽤过 Pure，⾃⼰有点 js 能⼒，如果不是复杂的效果⾃⼰个纯 CSS 框架⾃⼰随便改改就能达到效果，⽽现在 CSS3 也已经能够做到各种动画，效率、质量、⾼效各种⼀顿考虑所以还是选择了这种 CSS 框架。⽽⼀直觉得不满的是这框架的⽂档真的好那什么，说好的⾼⼤上呢。
MUI
曾经⼀直使⽤ Android 系统的我，后来见到 IOS，果断移情别恋了，不知道为什么苹果每次调整系统我都特别喜欢，后来⼀段时间因为缺设计我专门模仿 IOS 系统做 UI，但始终不能够做到很好，⽆意间就发现了 MUI 这个框架，这个框架给我的吸引之处就是它的 UI 是以 IOS 为主体设计的，当然它也补充了android特有UI样式。并且MUI官⽅声称⽤来开发深⼊以后发现拿它做 APP 还能够提⾼⽤户使⽤流畅度，然后便试着更深⼊的了解和使⽤⼀段时间。
jquery在线库Star：2,450
总结：就像之前说的这个框架是以两⼤系统为参照来封装UI组件，框架⾃⾝还有⼀个较为活跃的社区，不太好的地⽅这也是我特别关注的⼀
点，关于开发应⽤的流畅度，我当然知道这是 H5 ⽬前的劣势，但是看到官⽹给的描述，还是抱着期待的⼼理试试看能否提升，然⽽它其实还是需要是借助 Webview来提升，⽽不是框架本⾝。
Semantic UI
倒数第三个是 Semantic UI，接触这个框架还是因为 Bootstrap，Semantic UI 刚上线 github 就受到⼤量开发者的关注，以⾄于很多⼈拿它俩对⽐各种挑刺各种夸，是好是坏不能单凭别⼈三句四句就抬起⼿指开始赞，⽤了以后感觉 UI 上跟 Bootstrap 没太多的区别，不过代码命名规范上却相差甚⼤，本⼈认为 Semantic UI 是不是就想做的不⼀样，它的命名全是采⽤复合的⽅式，类名特别的离散，⽤的时候你得很⼩⼼⾃⼰扩展或者新增的 class 命名与它的类名冲突。
Foundation
Foundation 算是框架界的元⽼啦，都说框架去的早，⽽这个框架⼀直到现在依然这么的热门，如果你⽐较介意 Bootstrap 开发撞脸的尴尬事情，那么你可以考虑使⽤ Foundation 。即使你使⽤预定义的 UI
元素, 也不会与其他⽹站太像，就像官⽅说的给开发者更灵活的框架体验。Star：22,736
UiKit
Pure
终于最后⼀个了，我和你⼀样好开森 (～￣▽￣)～)，这个框架是我在做管理系统时接触的，选择使⽤也是因为框架⼩巧，并且是纯 CSS，没有太多的牵扯，好⽤来与其他框架快速结合使⽤。
Star：13,592
介绍完毕，估计你应该看出来了，我使⽤框架真的也就是遇到了需求，才选择了某个框架，所以框架之间并没有什么好与特好之分，只能说你的需求是什么，这个框架合适不合适你去⽤，各种框架⽤起来也都⼤致差不多，会⽤⼀个其他的上⼿也就都变得简单容易上⼿，我觉得能写框架的⼈都是室外⾼仁。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。