Web前端开发框架Twitter BootStrap推荐

Web前端开发者每天都与HTML、CSS、JavaScript打交道，然而不少人都是周而复始地写模板、样式和交互效果，并没有想过如何将这些重复的工作整合在一起。Twitter推出的Bootstrap能够帮助Web前端开发者摆脱这种重复劳动。

Bootstrap的历史

为了应对复杂的需求，早期的Twitter前端工程师在开发网站时几乎采用了所有自己熟悉的前端库。造成了网站维护困难、扩展性不强、开发成本高等问题。此时BootStrap被提上了日程。Twitter要求前端工程师完全依靠这一单一框架进行前端开发。

Twitter 在2011年8月将其开源，并在2012年2月3日发布了2.0版。在GitHub上，这个项目已有拥超过2万位关注者和4000个分支。 Bootstrap的设计者、著名前端工程师Mark Otto这样写道：“Bootstrap是我和Jacob Thornton编写的一个前端工具箱，目的是为了帮助设计师和Web前端开发人员快速有效地创建一个结构简单、性能优良、页面精致的Web应用。它使用 了最新的浏览器技术，可以提供精致的网页排版方式以及表单、按钮、表格、网格栅格化、导航等诸多元素。”Bootstrap的内置样式继承了Mark Otto简洁亮丽的设计风格，任何开发团队都能使用它提供的HTML模板、CSS样式和jQuery组件来布署或者重建一个外观漂亮的页面应用。

BootStrap 2的新特性

BootStrap 2在原有特性的基础上着重改进了用户的体验和交互性，比如新增加的媒体展示功能，适用于智能手机上多钟屏幕规格的响应式布局，另外新增了12款jQuery插件，可以满足Web页面常用的用户体验和交互功能。

BootStrap 2的运用

Bootstrap的文件结构

读 者可以直接从GitHub下载到Bootstrap源码，本地解压后可以看到这样的目录结构：docs、img、jquery-ui- bootstrap、js和less。其中最为重要的是“docs”下的CSS样式文件，“less”中的编译文件和“js”下的jQuery插件。

Bootstrap的安装

关于如何应用提取出来的文件大致有两步：第一是如何安装Bootstrap的基本样式，第二是如何调用Bootstrap的jQuery插件，我们首先来看样式的安装。

样式的安装有多种方法，图1展示的是一种常用的调用样式方法“link”。

这 里有两个关键点，其中“bootstrap.css”是Bootstrap中的基本样式文件，只要使用Bootstrap就必须调用这个文件。而 “bootstrap-responsive.css”则可以根据你的爱好来选择，如果想让项目具有响应式布局的效果，就必须要调用这个样式文件，而且调 用必须遵循先后顺序，“bootstrap-responsive.css”必须放置在“bootstrap.css”之后，否则便不具有响应式布局功 能。而最后的“style.css”是项目中的自定义样式，用来覆盖Bootstrap中的一些默认设置，便于开发者定制。

“CSS”样式安装完后，就可以进入“js”的调用，方法很简单，只需把想要的jQuery插件按照与上一步相似的方式加入到代码中。

Bootstrap 2的模块

BootStrap 2的模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的Less几个部分。与第1版相比，Bootstrap 2增加了多个新模块，比如布局框架中的“响应式布局”，页面排版中的“ICON”，基本组件中的“进度条”，而jQuery插件从以前的5个效果增加到 12个，完全可以满足项目常用的交互效果。下面来简单了解一下Bootstrap 2中各模块的功能。

页面布局