Bootstrap介绍和简单的移动端自适应模版

Bootstrap是一款来自Twitter的前端框架。Bootstrap基于HTML、CSS、JavaScript，因为它的简单灵活使得Web开发更加快捷。

2010年6月，为了提高内部的协调性和工作效率，Twitter公司的设计师Mark Otto和Jacob Thornton合作开发了Bootstrap，它是由动态CSS语言Less写成。Bootstrap推出之后，其优雅的HTML和CSS规范受到广大Web开发者的热烈欢迎。Bootstrap是基于HTML 5和CSS 3开发的，而在V3.0版本之后对响应式布局有了更好的支持。jQuery是Bootstrap各种组件的基础，并且Bootstrap能够很好地兼容各种jQuery插件。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速地搭建一个漂亮、功能完备的网站和管理系统。Bootstrap包含的组件如下：字体图标、下拉菜单、按钮组、按钮式下拉菜单、输入框组、导航、导航条、分页、标签、徽章、巨幕、页头、缩略图、提示框、进度条、媒体对象、列表组、面板、对话框等。同时Bootstrap也提供较为丰富的jQuery插件，比如过渡效果、对话框、下拉菜单、滚动监听、标签页和提示框等一系列插件，在后续的文章中会逐步讲解其用法。

在使用Bootstrap时，需要在页面中引用Bootstrap.css样式。如果要使用到相应的组件，还要引入jQuery.js以及Bootstrap.js文件。jQuery.js必须在Bootstrap.js文件之前引入，因为在Bootstrap中插件是以jQuery为基础的，而浏览器中js是顺序加载解析的。

如果要在IE 9以下版本中使用Bootstrap，则需要引入html5shiv.js和respond.js两个js。html5shiv.js主要是为了让不支持HTML5特性的IE浏览器版本识别HTML 5中的元素，respond.js是让不支持CSS 3媒体查询（Media Query）的浏览器（主要是IE 9以下版本）支持媒体查询。下面是Bootstrap一个简单的页面应用，如图所示。

简单的模版代码

语句<meta name="viewport"content="width=device-width，initial-scale=1"/>可以实现对不同手机屏幕分辨率的支持。html5shiv.min.js和respond.min.js在页面顶部引入是为了避免在渲染过程中出现闪动问题，jquery.min.js和bootstrap.min.js在页面底部加载是为了避免js的阻断加载导致页面渲染缓慢的问题