十大前端开发框架（上） - 博客 - 伯乐在线
& 十大前端开发框架（上）
, , , , , ,
编者按：考虑到英文原文的长度以及可读性，十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架，第二节将会跟大家分享更多其他的框架。
随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网，Web设计师和Web开发者的工作也变得越来越复杂。
十年前，一切都还简单得多。那个时候，大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道，并通过添加几个浏览器的hack，来兼容诡异的旧版本 IE 浏览器。时至今日，随着过去五六年间手持电子设备的突飞猛进，一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷，电子阅读器，以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。
可以预见，在不远的将来，相对于使用台式机，越来越多的人会使用移动设备来访问互联网。事实上，已经有相当数量的一部分人只通过智能手机上网。这意味着，我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品，这至关重要。在撰写本文的时候，尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果，但是用于实现这一目标的技术以及工具正在变得越来越好。
在不知道浏览设备屏幕大小的时候，最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备（如智能手机以及平板电脑）上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸，然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的，但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便，链接太小难以点击，缩放以及滚动的操作多多少少会让人在阅读的时候分心。
响应式网页设计利用同样的HTML文档来适配所有的终端设备，响应式网页设计会根据设备屏幕的大小加载不同的样式，从而在不同的终端设备上呈现最优的网页布局。举个例子，当你在大屏幕桌面浏览器中查看一个网页的时候，网页的内容可能是分为很多列的，并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面，你会发现页面的内容呈现在同一列中，并且导航按钮足够大，点击起来很方便。你可以在这个网站上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例，然后改变浏览器窗口的大小，你会看到网页的布局会根据窗口大小相应变化。
到目前为止，我们可以看出，响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢？我们每个人都需要成为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和Bootstrap爱好者来说这是个非常好的资源，能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
—— 和上面提到的jQuery UI主题类似，这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问，那么这个资源对你来说很方便易用。
—— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装，修改，更新以及优化都很简单方便。
—— Bootstrap提供了自己的几种界面风格，StyleBootstrap提供了更多的配色选项，并且你可以给每个组件都应用不同的配色。
—— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果，这个应用都会生成一个唯一的URL方便你与他人分享，你也可以在任意时刻修改你的主题。
—— 提供大量免费的Bootstrap主题。
—— 在线前端框架交互组件制作工具，是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
—— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性，简单便捷。
2. Fbootstrapp
基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。
3. BootMetro
框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。
4. Kickstrap
是Bootstrap的一个变体。它基于Bootstrap，并在它的基础上添加了许多app，主题以及附加功能。这使得这个框架可以单独地用于构建网站，而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上，然后用就可以了。
App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。
选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。
附加功能是一些用来扩展Bootstrap UI 库的附件，它们的语法基本相同或者相似。
下半部分的内容…
这一部分我们主要总结了Bootstrap相关的一些框架。在下半部分，我们会介绍更多其他的框架。
关于作者：
可能感兴趣的话题
响应式设计是趋势，得恶补下！
最新评论（期待您也参与评论）
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线博客团队正试图以我们微薄的力量，把优秀的原创/译文分享给读者，做一个小而精的精选博客，为“快餐”添加一些“营养”元素。
新浪微博：
微信号：Jobbole
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选博客文章
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2015 伯乐在线
赞助云主机手机网页开发_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
手机网页开发
上传于||文档简介
&&应​用​D​W​开​发​的​手​机​网​页​教​程​ ​来​源​于​阿​邦​教​育
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩15页未读，继续阅读
你可能喜欢WEB前端开发教程
授课讲师：
王维树 老师
软件版本：
文本编辑工具Notepad++ 6.2
教程程度：
初级→中级
所需基础：
熟悉网页制作流程
交流提问：
适合人群：
网站前端制作人员
10133 132578 100298 69487 55734 39168 38416 32409 30567 26725 28584 29358 4752 47959 31817 38234 30201 37836 40191 34565 31352 26537 26848 19688 4145 57071 35767 25995 19512 18263
论坛最新主题
您可能感兴趣的课程
介绍基础知识，指引我们如何开发一个队搜索引擎友好的网站。
讲解html和css的基础知识以及用法，让大家掌握div+css布局。
讲解网页制作的每个环节，使学员能运用Dreaweaver完成网站的开发。
用PS和网页三剑客进行网页设计，并用iis+Access+Asp实现动态网站。
赞助商链接
兴趣圈成员自学手机网站开发教程 手机网页设计和制作_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
自学手机网站开发教程 手机网页设计和制作
上传于||文档简介
&&自​学​手​机​网​站​开​发​教​程​ ​手​机​网​页​设​计​和​制​作
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
你可能喜欢面面俱到！网页开发者必备的20款在线实用工具
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
面面俱到！网页开发者必备的20款在线实用工具
互联网已经成为我们生活中无法割裂的一部分，生活中越来越多的服务都与网络紧密的结合到一起，深刻地影响着我们的生活和工作，很难想象没了它我们的日常生活会多麻烦。我们在公交上刷微博看新闻，在闲暇的时候在网络上寻找自己感兴趣的东西，在公司工作借助网络来宣传自己的企业，寻找合作伙伴和客户，等等等等。
与此同时，网络技术的发展也使得越来越多的事情可以在网络上完成——比如，设计和开发。这次我们推荐的20个网页开发工具都无需安装，借助浏览器，网页开发者可以在这里便捷地完成许多网页工作，称之为必备并不为过。
对于网站而言，能否做好用户体验，让访客难以忘怀是一件非常重要的事情。只有体验优异，才能让用户欲罢不能，坚持回访，这也就是为什么你需要Animatron。看名字就知道Animatron是一个与动画相关的在线工具，它能帮助你轻松制作HTML5和SVG动画，无需填写代码，提高网站的体验和设计感。
目前Animatron提供不同层级的服务，从免费到20美元包月不等。它可以将你从制作网站动画效果的沉重压力众释放出来，就目前用户反馈来看，从新手到专业人员都给出不错的评价。Animatron会帮你将工作内容存储到云端，方便团队协作调用，一旦完成也可以导出成HTML5、SVG、GIF和视频等多种格式。
WPJobBoard 是一款完美兼容Wordpress的插件，它可以帮你轻松建立一个在线的工作分配平台。网站提供两种不同的搭建模式，一种是单独构建一个带有工作列表的独立网站，如果你有Wordpress站点的话，它可以帮助你将工作分配平台嵌入到Wordpress中去。装上WPJobBoard之后，它可以让用户自动发送邮件到平台上来，还可以RSS订阅相关的信息，并具有提醒同能。平台内支持PayPal支付，这样工作分配出去之后支付的问题也不在话下。在使用过程中有任何问题，提交到WPJobBoard团队，会在24小时内收到反馈。
在Original Mockups 你可以制作各种各样的原型，无论是想将你的设计转化为一个现实可见的移动APP原型，还是要设计一个功能完备的网站，Original Mockups都可以帮到你。你可以在Original Mockups将你的想法化作可视化的原型，同团队或客户一起讨论研究，降低沟通成本。
通过倚赖PS的编辑器，你可以在Original Mockups里拖拽、调整、调用各种图形和元素，制作出逼真的视觉稿。另外，在Original Mockups里不会存在复杂的文件管理的问题，它会帮你将一切文件整理得井井有条。
如果你是一个自由职业者或者一个小型的团队，拥有自成一体的业务结构，那么你可以借助Hiveage来管理你的票据和账单，将你从这些鸡零狗碎的事务中解脱出来。别担心，Hiveage会帮你梳理清楚所有的单据，你可以使用自己的标签，设定不同的颜色来分类单据，Hiveage会将所有的信息保存在Rackspace的服务器上，确保安全。
如果你觉得Hiveage无法hold住你那令人头疼的财务报表，那么你可以选择CashBoard了。CashBoard同样是一款云端的工具，它可以更为系统的管理你的团队或者公司的财务，可以帮你管理项目，跟踪现金流向，分配任务，管理票据，甚至可以管理客户。简而言之，通过CashBoard你可以管理好你的公司里设计财务的各个部分，各个细节，内置的支付系统也支持世界范围内的主流支付工具。目前CashBoard是免费14天试用，此后可以灵活的选择是包月或者包年的服务。
网页的排版布局是关乎网站的美感和体验的重要部分，如果你是一个对于设计和细节精益求精的设计师，那么你应该试试Themify.me。它不仅仅是一个单纯帮你定制主题的编辑器，它还可帮你完成响应式设计，并且全程不用调用一行代码！在编辑的过程中，你还可以实时预览你所设计的页面布局，掌控一切。完成设计之后，Themify.me会确保你的页面设计能与所有设备和系统兼容。
如果你需要为批量的照片裁剪边缘、调整大小，那么不用开PS了，直接用ShrinkTheWeb来解决这些问题，将你的时间和设备都投入到更加重要的工作中去。ShrinkTheWeb会帮你批量地处理照片，存储、上传然后在几秒钟内显示处理后的预览图，可靠，快速。另外，最重要的是，它是免费的。
MotoPress是一个可以帮你轻松管理和编辑网站/博客的内容编辑器，它是一个Wordpress插件，替代默认的编辑器，解决功能强大但是可控较差上手不容易的默认编辑器。它适用于任何Wordpress主题，易于安装，无需复杂的代码就可以通过拖拽来定制界面，创建响应式的布局，这样你的网站就可以轻松应付移动端的浏览了。
项目管理是困难的， 尤其是当你的团队成员不在一起，供应商、客户都是在网络上联系的时候，交流的成本成倍地增长。要知道，沟通的是走向成功的关键。在这个时候，你需要Framebench。在线项目管理、协作平台很多，但是各有优劣，针对的问题也不尽相同，而Framebench就是主攻沟通协作的云平台。Framebench的“TableTop Sync”功能能让项目参与的各方都能清晰看到每个成员的工作进度，项目的完成程度，给予实时的反馈，快速调整。值得一提的是，Framebench还提供视频分享的功能。
Froont也是一个功能强大的在线平台，它旨在帮你加速网站原型设计和响应式布局。它是一款巧妙的协作工具，设计者可以通过链接同客户分享他们的设计的原型。作为设计者，用户可以在Froont上精心打磨原型的细节，设置布局，色彩，样式，字体，让项目的设计更上一层楼。Froont拥有友好的界面，以及类似PS的直观的图层管理功能，它还可以从PS调用CSS样式，使用在线的SVG文件，可以复制项目、创建分支等等，非常方便。一旦完成设计，可以一键下载，颇为方便。
如果你是邮件的重度倚赖者，并且头疼于IMAP邮件实时同步的问题的话，你可以了解一下Context.io，这个网站所提供的服务可以帮你解决邮件的问题，将所有的邮件同步到这里，再也不用在这种细微末节的问题上头疼。
Metricfire是一款统计性能指标和需求的理想工具，它会称职地为你记录你所关心的项目的各项指标，由于它是独立的代码段，即使你的系统崩溃了，它所记录的数据都存在并且具备可用性，为你保存下所有致命错误的反馈信息。
Hostoople 是目前最好的共享托管服务商之一，他们有着丰富的经验，强大的设备和全天候的服务团队。Hostoople 为开发者们提供极富吸引力的服务，无论是托管个人项目还是转手客户。此外，无论你想托管的网站的程序是什么，Hostoople通常都应付得来，无论是Wordpress、OpenBlog还是Nucleus这样的博客平台，还是CubeCart，osCommerce，ZenCart这样的电商网站，他们都搞得定，各种平台所需要的支持他们一个不少，相关的功能也全部具备，并将相应的接口和客户端都为客户准备好了。
要让每一个客户都满意并不容易，WPHelpDesk这款Wordpress插件就是帮你解决这个问题的，它会帮你搜集客户反馈，整理、分类、存储，方便你回复。客户通过表格提交问题反馈之后，他们会看到它的问题被处理的状态，你也可以借此像客户展示你的对问题的态度。
一个成功的企业移动应用需要有足够吸引人的特性，这样才能吸引客户，提升公司业务。而Konstant Infosolutions团队就是为此而生的——他们为用户提供一系列的移动客户端开发服务，帮助客户打造成功的APP。
即使是在中国，绝大多数的服务提供商和用户之间都是通过邮件来进行沟通的，而绝大多数的企业也都有着属于自己的邮件模板。如果你需要一个专业的、个性化的邮件模板，那么Stamplia的服务应该是你的选择。Stamplia提供专业的、高度个性化的模板定制功能，并且保证能与主流的邮件客户端良好兼容。
这款名为Macaw的图片处理工具有着令人侧目图片处理和管理功能。当你完成图片的编辑之后，Macaw可以在数秒之内帮你生成你需要的HTML和CSS代码，方便你直接将图片嵌入到网页中去。
如果你还在寻求一个完美的网页图片响应式方案的话，不妨来看看RIU，没有比这更高的工具了。RIU这款插件可以直接融入到Wordpress的媒体库当中去，它会让图片随着网页变化适应每一块屏幕，你可以将精力投入到更有价值的地方。
Launchlist 是一款功能完善的项目开发管理工具，堪称完美。你可以通过Launchlist 来设定预先测试，让你的产品在发布之前解决潜在的Bug。
Flowdock是一款致力于管理团队协作的工具，它可以让团队协作管理更加简单。它有桌面客户端、移动客户端，还可以在网页上访问，这是一款全天候全平台的优秀工具。
那些年无法错过的设计神器！
一秒生成黄金分割曲线！
下载量7W+的抠图神器！
快速创建参考线的利器！
原文地址：
优设网翻译：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的师学习平台，专注分享、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量77万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注