Web前端框架讲述.doc

定义 1.前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等）。 2.使用前段框架可以降低界面开发周期和提高界面的美观性。 有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。 基础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进行开发，很多工具和资源可以用来配合使用。 jQuery UI Bootstrap?—— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源，能够把 Bootstrap的清爽界面组件引入到jQuery UI中。 jQuery Mobile Bootstrap Theme?—— 和上面提到的jQuery UI主题类似，这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问，那么这个资源对你来说很方便易用。 Fuel UX?—— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装，修改，更新以及优化都很简单方便。 StyleB?—— Bootstrap提供了自己的几种界面风格，StyleBootstrap提供了更多的配色选项，并且你可以给每个组件都应用不同的配色。 BootSwatchr?—— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果，这个应用都会生成一个唯一的URL方便你与他人分享，你也可以在任意时刻修改你的主题。 Bootswatch?—— 提供大量免费的Bootstrap主题。 Bootsnipp?—— 在线前端框架交互组件制作工具，是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。 LayoutIt?—— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性，简单便捷。 Bootstrap（）是目前桌面端最为流行的开发框架，一经 Twitter 推出，势不可挡。Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端依然还是 Bootstrap 的主要目标市场。Bootstrap 主要基于 jQuery 进行 JavaScript 处理，支持 LESS 来做 CSS 的扩展。如果想要在 Bootstrap 框架中使用 Sass，则需要通过 Bootstrap-Sass（/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 项目增加对 I