Bootstrap 在学习Bootstrap之前，我们先对Bootstrap做一个简单的介绍。

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

简单来说，Bootstrap是一个适用于PC端和移动布局的UI框架，如果你是做响应式开发的话，那么Bootstrap是一个非常好的选择。

既然提到了响应式，相比很多同学都听说过响应式和自适应两个概念，那么响应式和自适应它们的区别是什么呢？这是一些面试官在招聘前段的时候经常问的一个问题，大家可要做好笔记了。

响应式：页面会根据屏幕的尺寸做页面布局的调整，方便页面的浏览操作，但是不改变页面元素的大小。

自适应：根据页面的尺寸，调整页面的元素的显示大小，但不改变页面布局，智改变元素的显示大小。

Bootstrap所使用到的技术比较简单，学习难度也比较一般，学习者只要有一定的html、css和Javascript的基础就可以开始Bootstrap 的学习了。这里给大家推荐两个很好的一个学习网站Bootstrap中文网和菜鸟教程。

对于初学者，我比较建议的一个学习顺序是这样的。

第一步：熟悉Bootstrap 的开发环境；

第二步：掌握Bootstrap 的布局组件；

第三步：快速熟悉Bootstrap 的组件；

第四步：使用Bootstrap 完成页面制作的练习。

Bootstrap 的开发环境搭建

经过这么多年的发展，Bootstrap 已经有了很多个版本，最新的版本已经发展到了4.2版本了，这里推荐大家在下载的时候选择v3.3.7版本，这个是一个比较成熟的版本，文本比较多，也比较实用。下载方法的话进入Bootstrap中文网直接选择v3.3.7版本的中文文档下载就好了。

下载好之后我们只要在HTML文件中导入Bootstrap 的文件就可以使用Bootstrap 框架了，这里需要导入的文件有三个，第一个是Bootstrap 的样式文件bootstrap.css,因为Bootstrap 是基于jq开发的，所以我们还需要导入最低1.9.1版本的jq文件，最后在导入Bootstrap 本身的js文件(bootstrap.js ) 就好了。

考虑到浏览器兼容性问题，我们还需要设置一下响应式信息，加入两条meta信息

<!--使用最高系统中最高版本的IE内核渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--支持移动端设备渲染，支持媒体查询-->
<meta name="viewport" content="width=device-width, initial-scale=1">

同事为了兼顾ie9以下浏览器我们还需要加入这两条

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

好了，这样一个Bootstrap 的开发环境就搭建好了。关于Bootstrap具体组件和布局的讲解我们下一节再讲，同学们，赶紧先去搭建好你们的Bootstrap的开发环境吧。