2.1 下载和定制Bootstrap
在下载Bootstrap之前，先确保系统中准备好了一个网页代码编辑器，本书使用Dreamweaver网页设计和编辑软件。另外，读者应该对自己的网页制作水平进行初步评估，评估自己是否基本掌握HTML和CSS技术，以确保能够在网页设计和开发中轻松学习和使用Bootstrap。
2.1.1 下载Bootstrap
Bootstrap压缩包包含两个版本，一个是供学习使用的完全版，另一个是供应用的编译版。
1.下载源码版Bootstrap
访问http://github.com/twbs/bootstrap/页面，下载最新版本的Bootstrap压缩包。在访问GitHub时，找到Twitter公司的Bootstrap项目页面，单击ZIP选项卡，即可下载保存Bootstrap压缩包，如图2-1所示。从GitHub直接下载到的最新版源码包括CSS、JavaScript的源文件，以及一份文档。
图2-1 下载Bootstrap开发包
通过这种方式下载的Bootstrap压缩包，名称为bootstrap-master.zip，包含Bootstrap库中所有的源文件以及参考文档，适合读者学习和交流使用。
2.下载编译版Bootstrap
如果希望快速开始，可以直接下载经过编译、压缩后的发布版。访问下面页面之一，根据下载按钮提示直接下载即可，如图2-2所示。
❑https://github.com/twitter/bootstrap
❑http://kxh.github.io/Bootstrap_doc_in_chinese/
❑http://www.bootcss.com/
图2-2 下载Bootstrap发布版
通过这种方式下载的压缩文件名为bootstrap.zip，仅包含编译好的Bootstrap应用文件，如CSS、JavaScript和图片文件。而且所有文件已经过了压缩处理，不过文档和源码文件不包含在这个压缩包中。
直接复制压缩包中的文件到网站目录，导入相应的CSS文件和JavaScript文件，就可以在网站和页面中应用Bootstrap效果和插件了。
2.1.2 定制Bootstrap
Bootstrap库文件很大，如果仅希望应用其中几个效果或者特定插件，则建议通过定制方式使用Bootstrap。把所有效果和插件都导入页面，一方面会增加带宽负荷，影响页面的响应速度；另一方面，众多的CSS类样式和JavaScript源代码，会与制作页面的样式和脚本发生冲突，影响解析时的执行效率和页面显示效果。
定制Bootstrap可以有效降低页面加载的负担和执行效率，降低潜在的源码冲突。定制的具体方法如下。
第1步：访问http://twitter.github.io/bootstrap/页面，在顶部导航栏中单击Customize（定制）选项卡，切换到定制页面，如图2-3所示。
图2-3 打开Bootstrap定制页面
第2步：选择组件。在页面左侧页内导航栏中单击"1.Choose components"（1.选择组件）选项，切换到组件选择区，如图2-4所示。单击右上角的Toggle all（切换全部）按钮，取消勾选所有选项，然后根据需要勾选组件。
图2-4 选择Bootstrap组件
组件包括如下几个部分，每部分又包含多个项目，这些部分将在后面几章中进行详细讲解。其中脚手架是用来设置页面基本样式和布局的，根据需要必须选择。
Scaffolding（脚手架）
❑Base CSS（基本CSS样式）
❑Components（组件）
❑JS Components（JS组件）
❑Miscellaneous（杂项）
❑Responsive（响应式交互）
第3步：选择jQuery插件。在页面左侧页内导航栏中单击"2.Select jQuery plugins"（选择jQuery插件）选项，切换到jQuery插件选择区，如图2-5所示。单击右上角的Toggle all按钮，取消勾选所有选项，然后根据需要勾选jQuery插件。
图2-5 选择jQuery插件
所有被勾选的插件将被编译成一个文件bootstrap.js。所有的插件都需要导入最新版本的jQuery库文件作为底层技术支撑。
第4步：定制变量。在页面左侧页内导航栏中单击"3.Customize variables"（定制变量）选项，切换到LESS变量配置区，如图2-6所示。如果在设置过程中需要恢复默认值，则单击右上角的Reset to defaults（重置为默认）按钮，取消对所有CSS变量的设置，然后根据需要重设变量的名称。有关动态CSS技术的详细讲解可参阅后面章节内容。
第5步：打包下载。在页面左侧页内导航栏中单击"4.Download"（下载）选项，切换到下载按钮位置，如图2-7所示。单击"Customize and Download"（定制并下载）按钮，下载定制后的Bootstrap压缩包。
下载的文件包括编译的动态CSS、整理和压缩的CSS样式表，以及编译的jQuery插件，它们都很好地包装在一个zip文件中。
图2-6 定制变量
图2-7 下载定制后的Bootstrap压缩包
例如，如果仅需要表格样式效果，则可以在第2步中仅勾选两项："Scaffolding"（脚手架）子项中的"Normalize and reset"和"Base CSS"（基础CSS样式表）子项中的"Tables"，如图2-8所示。
在第3步中，取消勾选所有选项，即不下载任何jQuery插件。在第4步中，保持所有动态CSS变量的默认值。然后，单击"Customize and Download"按钮，下载定制后的Bootstrap压缩包（bootstrap.zip），该文件大小仅有38KB，文件结构如图2-9所示。
如果直接下载默认编译好的压缩包，大小为375KB，当页面不需要全部效果和交互行为时，这种做法显然就不妥了。
图2-8 定制表格样式
图2-9 定制的文件结构