《Bootstrap开发精解：原理、技术、工具及最佳实践》一2.1　在HTML文件中包含Bootstrap

本节书摘来自华章出版社《Bootstrap开发精解：原理、技术、工具及最佳实践》一书中的第2章，第2.1节，作者[美] 亚拉文·谢诺伊（Aravind Shenoy）乌尔里希·索松（Ulrich Sossou），更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.1　在HTML文件中包含Bootstrap

首先，我们到官方网站（http://getbootstrap.com/）下载Bootstrap，并将它包含在自己的HTML文件中，暂时不需要对它进行定制。
访问网站后，请单击Download Bootstrap（下载Bootstrap）按钮（如图2-1所示），文件将会以ZIP格式下载。这个ZIP文件包含了Bootstrap CSS、JavaScript和字体文件，目录结构如下所示：

请解压Bootstrap.zip文件并将其中的内容复制到项目的目录中，下一步就是在HTML文件中包含CSS和JavaScript文件。
我们看看如果要在HTML文件中使用Bootstrap，文件的结构应该是什么样的。

这段代码执行后的输出结果如图2-2所示。

我们来讨论一下这段代码，弄清楚它是如何工作的。
在上面的示例代码中，在

部分，Bootstrap CSS被链接到这个HTML文件中。在Bootstrap的CSS后面紧跟着的是一个自定义的CSS文件，该文件可以为我们覆盖Bootstrap的样式。从中还可以看到，我们使用了标签。当网页在本地（通过磁盘的文件系统）打开的时候，text/html部分会告诉网页浏览器该文档属于哪种类型，让浏览器知道如何进行解析，而charset=UTF-8这个值则告诉网页浏览器应该使用哪种字符编码显示网页上的字符，这样浏览器就不会使用平台的默认编码。接着，我们又在部分链接了jQuery和JavaScript文件。此外，我们还加上了HTML shiv元素的链接，以及对respond.js文件的链接，从而对IE和媒体查询提供支持。respond.js提供了一个便捷轻量的脚本，使那些不支持CSS3媒体查询的浏览器（特别是IE6～IE8）支持响应式网页设计。
仔细查看前面的代码，可以看到我们使用了Bootstrap的压缩版本，即bootstrap.min.js和bootstrap.min.css，来减小文件大小，使得网站的加载速度更快。你也可以根据自己的喜好，先在开发阶段使用完整的版本，然后在试运行时使用压缩的版本。