2.1 Bootstrap开发环境概述

本节先介绍Bootstrap框架的开发环境，包括如何下载Bootstrap开发包，如何在网站中使用Bootstrap框架，如何调用Bootstrap样式、组件和JS特效等方面的内容。对于全书的内容来讲，本节的内容是最基础的部分。

2.1.1 下载Bootstrap开发包

Bootstrap的官方网站地址是http://getbootstrap.com/，界面图2.1所示。可以在官网下载最新的版本和详细的使用说明文档。

图2.1 Bootstrap官网

目前，国内也有不错的Bootstrap中文网站，例如“Bootstrap中文网”，读者可以访问网址http://getbootstrap.com/ 进行浏览，界面如图2.2所示。

图2.2 Bootstrap中文网

在图2.1中，读者可以点击Download Bootstrap按钮，转到下载页面，如图2.3所示。

图2.3 下载Bootstrap框架

在上图中可以看到三个下载选项。选择第一项可以下载到Bootstrap框架开发包，但其不包括一些基本的源码或文档；如果想深入学习Bootstrap框架的源码则需要下载第二项，但下载第二项需要注意，Bootstrap的源代码是使用CSS的预编译语言Less编写的，下载源码需要LESS编译器；第三项是下载Sass预编译包，后面章节中我们会进行介绍。如果开发人员要应用Bootstrap框架，则必须使用已经编译好的CSS文件。

下载第一项，得到的是一个文件名为“bootstrap-3.3.7-dist.zip”的压缩包，解压后的目录结构如图2.4所示。其中，重要的文件存放在css目录和js目录之中了，下面我们会进行详细的介绍。

图2.4 压缩包解压后目录结构

2.1.2 Bootstrap开发包目录结构

从图2.4中可以看到，Bootstrap开发包中包含了css、js和font三个目录，分别代表编译好的样式文件、脚本文件和字体文件。下面，看一下这三个目录中具体都有什么文件，如图2.5所示。

图2.5 Bootstrap开发包目录结构

上图中对设计人员有用的是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文件）：

        01  <html>
        02  <head>
        03     <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
        04  </head>
        05  <body>
        06  Load Bootstrap 3...
        07     …………………..
        08  <script src="../js/jQuery.js"></script>     <! --jQuery应该放在前面优
    先加载-->
        09  <script src="../bootstrap/js/bootstrap.js"></script>
        10  </body>
        11  </html>

提示

JavaScript文件放在文档尾部有助于提高加载速度。

【代码解析】

引入Bootstrap还可以使用第三方的CDN服务，Bootstrap 3版本则建议使用Bootstrap中文网提供的CDN，网址是http://open.bootcss.com/；当然如果是做国外的项目，首选则是Google的CDN服务了。

本例效果如图2.6所示。

图2.6 网站中引入Bootstrap框架

上一章目录下一章