1.4 下载Bootstrap

Bootstrap的安装是比较容易的，可以从http://getbootstrap.com/上下载Bootstrap的最新版本，也可以去中文网http://v3.bootcss.com进行下载，如图1-1所示。目前最新版本是4beta版，本教材实例使用的是3.3.7版。

图1-1 官网下载Bootstrap

单击“下载Bootstrap”即可跳转到下载页面，有三个选项供我们选择。由于现在处于初级使用阶段，或者说直接用在生产环境下，我们下载第一个就好，如图1-2所示。

图1-2 下载用于生产环境的Bootstrap

下载成功后可以得到一个．zip文件，解压后可以得到一个包含css、fonts和js的文件夹。

Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到一些目录和文件，文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。

如果使用未编译的源代码，我们需要编译Less文件来生成可重用的CSS文件。对于Less文件的编译，Bootstrap官方只支持Recess，这是Twitter的基于less.js的CSS提示。

为了更好地了解和更方便地使用Bootstrap，我们将在本书中使用Bootstrap的预编译版本。

1．预编译版

如果下载了Bootstrap的已编译版本，解压缩zip文件，将看到下面的文件/目录结构。

      bootstrap/
      ├──css/
      │   ├──bootstrap.css
      │   ├──bootstrap.css.map
      │   ├──bootstrap.min.css
      │   ├──bootstrap.min.css.map
      │   ├──bootstrap-theme.css
      │   ├──bootstrap-theme.css.map
      │   ├──bootstrap-theme.min.css
      │   └──bootstrap-theme.min.css.map
      ├──js/
      │   ├──bootstrap.js
      │   └──bootstrap.min.js
      └──fonts/
          ├──glyphicons-halflings-regular.eot

          ├──glyphicons-halflings-regular.svg
          ├──glyphicons-halflings-regular.ttf
          ├──glyphicons-halflings-regular.woff
          └──glyphicons-halflings-regular.woff2

上面展示的就是Bootstrap的基本文件结构：预编译文件可以直接使用到任何Web项目中。其中提供了编译好的CSS和JS（bootstrap.*）文件，经过压缩的CSS和JS （bootstrap.min.*）文件，还提供了CSS 源码映射表（bootstrap.*.map），可以在某些浏览器的开发工具中使用，同时还包含了来自Glyphicons的图标字体，在附带的Bootstrap主题中将使用这些图标。

2.Bootstrap源代码

如果下载了Bootstrap源代码，那么文件结构如下所示。

      bootstrap/
      ├──less/
      ├──js/
      ├──fonts/
      ├──dist/
      │   ├──css/
      │   ├──js/
      │   └──fonts/
      └──docs/
          └──examples/

less/、js/和fonts/目录分别包含了CSS、JS和字体图标的源码。dist/目录包含了上面所说的预编译Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件，examples/目录是Bootstrap官方提供的实例工程。除了这些，其他文件还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等。

因为本书使用的是预编译版，不需要重新进行编译，故对编译工具Grunt不做介绍。如果读者需要使用Bootstrap源代码版，可以修改less 文件，然后使用Grunt工具重新编译生成新的Bootstrap.css文件，可以参考Bootstrap中文网中的介绍。