2.1 Bootstrap开发环境概述
本节先介绍Bootstrap框架的开发环境，包括如何下载Bootstrap开发包，如何在网站中使用Bootstrap框架，如何调用Bootstrap样式、组件和JS特效等方面的内容。对于全书的内容来讲，本节的内容是基础部分。
2.1.1 下载Bootstrap开发包
Bootstrap的官方网站地址是https://getbootstrap.com/，界面如图2.1所示。可以在官网下载最新的版本和详细的使用说明文档。
图2.1 Bootstrap官网
目前，国内也有不错的Bootstrap中文网站，例如“Bootstrap中文网”，可以通过访问网址https://www.bootcss.com/进行浏览，如图2.2所示。
图2.2 Bootstrap中文网
在图2.1所示的Bootstrap官网中，可以单击Download按钮转到下载页面，如图2.3所示。
图2.3 下载Bootstrap框架
直接单击Download按钮会下载一个压缩包，笔者下载后的名字是“bootstrap-4.4.1-dist.zip”。解压后的目录结构如图2.4所示。Bootstrap重要的文件存放在css目录和js目录之中，下面我们会进行详细的介绍。
图2.4 压缩包解压后的目录结构
注意
Bootstrap 4不再支持IE 8、IE 9和iOS 6，使用这些浏览器的读者可以下载Bootstrap 3。
2.1.2 Bootstrap开发包目录结构
从图2.4中可以看到，Bootstrap开发包中包含了css、js两个目录，分别代表编译好的样式文件和脚本文件。下面看一下这两个目录中具体都有什么文件，如图2.5所示。
图2.5 Bootstrap开发包目录结构
图2.5中对设计人员有用的是css目录中的样式文件，以及js目录中的脚本文件。其中，文件名中不含“min”关键字的是未压缩的文件，而包含“min”关键字的是压缩好的文件（体积小，下载速度快）。在实际项目开发中，为了提高文件下载速度，都会选用压缩好的文件。
2.1.3 在网站中使用Bootstrap框架
在网站中使用Bootstrap框架的方法很简单，和引入其他CSS或JavaScript文件一样，使用<script>标签引入JavaScript文件，使用<link>标签引入CSS文件。不过需要注意的是Bootstrap的JavaScript效果都是基于jQuery的，因此如果需要使用Bootstrap的JavaScript动态效果的话，必须先引入jQuery。
提示
这里我们可以去http://jquery.com/download/下载最新的jQuery文件，或使用当前项目中已有的jQuery文件。
【代码2-1】引入Bootstrap（详见源代码ch02目录中ch02.loadBootstrap.html文件）
提示
JavaScript文件放在文档尾部有助于提高页面加载速度。
【代码解析】
引入Bootstrap还可以使用第三方的CDN服务，Bootstrap 3及以下版本建议使用Bootstrap中文网提供的CDN，网址是http://open.bootcss.com/；如果是做国外的项目，首选是Google的CDN服务。
本例效果如图2.6所示。
图2.6 在网站中引入Bootstrap框架