详情
Bootstrap是Twitter推出的开源的前端开发工具包，可以帮助用户轻松创建响应式网站。本书是第一本全面详实地介绍Bootstrap的图书，读者可以学到如何将Bootstrap集成到当前的项目中，如何使用Bootstrap的网格布局，如何使用Bootstrap的资源来集成基础CSS、导航系统、JavaScript/jQuery和高级CSS样式，如何使用Bootstrap创建可视化的网站原型。
书名：Bootstrap入门经典
ISBN：978-7-115-43854-6
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Jennifer Kyrnin
译 姚 军
责任编辑 傅道坤
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Jennifer Kyrnin: Sams Teach Yourself Bootstrap in 24 Hours
ISBN: 0672337045
Copyright © 2016 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
Bootstrap是Twitter推出的开源的前端开发工具包，可以帮助用户轻松创建响应式网站，目前在前端开发中具有广泛的应用。
本书是Bootstrap的入门类图书，主要分为4个部分。第1部分为Bootstrap的入门知识，讲解了Bootstrap的安装方法以及使用Bootstrap构建网站的方法；第2部分讲解了使用Bootstrap CSS样式和组件创建网站的方法；第3部分侧重的是使用Bootstrap JavaScript插件为网站增加功能的方法；第4部分涵盖了Bootstrap的自定义方法，介绍了Bootstrap Web开发的高级功能，以及如何创建不同于Bootstrap默认外观的复杂设计。
本书内容系统，讲解简明实用，代码示例利于理解，是前端开发人员入门Bootstrap的绝佳读物，适合所有前端开发人员阅读，有志于了解Bootstrap的读者也可以从中获益。
Jennifer Kyrnin从1997年开始进行HTML、XML和Web设计的网上教学。她曾经构建和维护各种规模的网站，从单页的手册型网站到用于国际受众的数百万页数据库驱动型网站，不一而足。她的研究重点是使用Bootstrap和WordPress进行的响应式设计。她和丈夫、儿子和许多动物生活在华盛顿州的一座小农场里
一如既往，谨以本书献给Mark和Jaryth，我爱你们。
我要感谢Pearson的所有人为我提供编写本书并与他们一起工作的机会。特别感谢Mark Taber的理解和对所出现问题的帮助，感谢出色的技术编辑Jon Marin和文稿编辑Megan Wade-Taxter提供的绝佳建议和更正。您在本书中找到的任何技术错误都归咎于我；他们已经努力地防止我犯错了。
我要感谢许许多多在有意无意中用令人惊叹的设计和了不起的思路帮助过我的Bootstrap设计人员。我还要感谢我的写作小组——Jerry、Karen、Ted、Renee和Rob，他们让我在常规的虚构讨论中注入了非虚构的成分。
和往常一样，没有家人的帮助，我就不可能完成这本书。
BootStrap是帮助您快速、有效构建响应式网站的Web设计框架。Twitter的Web开发人员创造了Bootstrap，帮助他们构建自己的网站。2011年，他们以开放源码框架的形式发布了Bootstrap，它已经成为Web上最流行的框架之一。
本书涵盖了Bootstrap的基础知识，此外还介绍如何使用Bootstrap改善网站，添加许多设计人员忽视的特性。阅读完本书，您将了解：
本书分为24章，每章介绍使用响应式Web设计构建响应式网页的一个相关主题。每章大约需要花费1小时的学习时间。
本书分为4个部分。
本书每章最后都有简短的问答部分，帮助您理解阅读本章讲解的主题。您可通过每章的测验和练习来进一步巩固所学内容，并将其应用到Web设计中。
本章讲解了如下内容：
Bootstrap是Twitter开发的一种Web框架，用于更快地设计网页和应用程序。您选择了本书，很可能是因为对在自己的网页上使用Bootstrap感兴趣，但是这个大型工具有许多功能，可能不容易入门。
在本章中，您将学习更多关于Web框架的基本知识，以及它们如何帮助Web开发人员构建更快、成本效益更高的网站，还将学习Bootstrap与其他Web框架的不同之处。最后，您将明白许多网站使用框架的原因，以及Bootstrap为什么是完美的解决方案。
要理解Bootstrap，首先必须理解Web框架。Web框架是一种工具，程序员和Web开发人员可以使用它简化复杂的系统，如网站或者Web应用。Web框架是用于网站的开发框架，有多种框架可供设计人员和开发人员使用，包括：
当然，还有Bootstrap。这些框架都向开发人员提供HTML、CSS工具（有时还有JavaScript工具），为网站提供底层结构和功能。
大部分Web设计框架包括一个布局或者网格系统，以便轻松、快捷地创建多栏目网站。最好的框架还包括CSS，为表格设置样式、管理表单、创建按钮、设置排版样式，而且这些框架都是响应式的。
Bootstrap是提供上述所有特性（甚至更多）的一种Web框架。
网页框架不仅是一个模板，甚至不仅是一系列模板，它是一组可用于创建网页的工具。
许多人将框架当成模板使用，这是开始使用它们的很好方式。但是，如果您所做的只是根据找到的模板示例创建标准化网页，就不能最大限度地利用框架。
框架预先处理乏味的重复性任务，帮助您管理网页，使您可以将注意力放在实际的设计上。
网站中最难创建的是在整个设计中保持一致的布局。创建有效的网格布局需要进行很多数学运算。每当在网格中添加一列，就必须计算列间距、列宽的变化以及在整个页面中的排布方式。当构建响应式网站时，这特别困难，因为您必须计算2～3次——每个布局一次。大部分设计人员逐页创建网格布局。这意味着最终整个网站上的行列数量几乎是随机的。
框架将为您完成所有的计算。在第5章中您将学到更多关于Bootstrap网格的知识，但是图1-1展示了Bootstrap处理布局网格的一个例子。
图1-1 默认的Bootstrap网格
在图1-1中可以看到，Bootstrap使用12列的默认网格，您可以在自己的元素上使用一些HTML类，将其分为许多不同的列组。如果没有这个框架，您就必须手工构建所有的类和相互关系。生成该网格的HTML代码如代码清单1-1所示。
代码清单1-1 在Bootstrap中创建一个网格系统
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Grid System</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.show-grid [class^=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<h1>Basic Grid System</h1>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row show-grid">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row show-grid">
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row show-grid">
<div class="col-md-9">.col-md-9</div>
</div>
<div class="row show-grid">
<div class="col-md-10">.col-md-10</div>
</div>
<div class="row show-grid">
<div class="col-md-11">.col-md-11</div>
</div>
<div class="row show-grid">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
</body>
</html>在图1-2中可以看到在iPhone上显示的同一个HTML。iPhone屏幕比Web浏览器视图窄得多，但是Bootstrap的显示很漂亮，且不需要对代码进行任何更改。
图1-2 在iPhone上显示的Bootstrap默认网格
您将在第5章中学到更多关于用Bootstrap创建网格的知识，但是这个例子能够让您快速品味Bootstrap的工作方式。
Web框架和其他任何工具一样，使用它们有绝对的好处，但也有缺点。使用框架的理由如下所示。
当然，使用Web框架也有缺点。
每个网站都不相同，重要的是在将其塞进框架之前评估网站的需求。但是框架确实增添了很多价值，所以总是值得考虑的好想法。
Bootstrap是一个Web框架，帮助设计人员和开发人员创建网站及Web应用。它有时被称作“Twitter Bootstrap”，因为它是由Twitter的Mark Otto 和Jacob Thornton开发的，旨在促进内部工具和Web应用的一致性。
Bootstrap使用HTML和CSS创建模板、排版、表单、导航、按钮、表格等元素，而且包含了一个用于构建许多现代化网站上都可发现的动态页面元素的JavaScript库。Bootstrap还包含使用Glyphicons字体库的许可证，可以快速、轻松地为网页添加图形元素。
一般来说，大部分Web开发框架都是相同的。它们提供CSS，有时候还提供JavaScript。它们通常提供一个网格系统或者其他设计网页布局的手段。那么，如何在BootStrap和其他选项中做出选择呢？
应该考虑的因素具体如下。
框架在何种许可证下发行可能影响使用方式。Bootstrap是在MIT开放源码许可证下发行的。
并不是所有框架都使用这些技术，但是Bootstrap全部提供这三种技术。
大部分Web框架从一个基本网格系统开始，但是有些不是这样的。而且，虽然响应式Web设计（RWD）现在越来越常用，但是并不是所有框架都提供。Bootstrap提供RWD和健全的网格系统。
Internet Explorer 8对HTML5和CSS3的处理不同于遵循标准的浏览器，但是并不是所有框架都考虑了这一点。Bootstrap考虑了这一点。
您可以始终自行排版，但是许多Web框架都自带内建的排版，您不必操心行间距和字体大小等问题。Bootstrap自带基本排版功能。
按钮增强网站的交互能力，而图标可以保持网站的一致外观。Bootstrap支持多种类型的按钮，是唯一在许可证内包含Glyphicons的Web框架（需表明归属）。
如果您打算使用较高级的HTML功能，如表格和表单，框架的支持是很有必要的。Bootstrap支持这两种功能。
许多Web框架都有一个问题，就是很大且需要许多带宽才能下载。Bootstrap完整（最小）安装为150KB，但是可以对其进行自定义，只包含您所需的功能，从而显著减小这一尺寸。
上述信息对于了解Bootstrap很有用，但是了解可用的其他Web框架也很有必要。表1-1展示了上面列出的功能，以及不同框架的比较。
表1-1 不同Web框架的对比
| 功能 |
Bootstrap |
Foundation 5 |
Pure CSS |
HTML5 Boilerplate |
Responsive Grid System |
|---|---|---|---|---|---|
| RWD |
✓ |
✓ |
✓ |
✓ |
✓ |
| 移动优先 |
✓ |
✓ |
|
✓ |
|
| Less |
✓ |
|
|
|
|
| Sass |
✓ |
✓ |
|
|
|
| jQuery及插件 |
✓ |
✓ |
|
✓ |
|
| 网格系统 |
✓ |
✓ |
✓ |
|
✓ |
| 排版 |
✓ |
✓ |
|
✓ |
|
| 表格 |
✓ |
✓ |
✓ |
|
|
| 表单 |
✓ |
✓ |
✓ |
|
|
| 图标 |
✓ |
|
|
|
|
| 导航 |
✓ |
✓ |
✓ |
|
|
| Internet Explorer 8支持 |
✓ |
|
|
✓ |
|
| 可自定义 |
✓ |
✓ |
✓ |
|
✓ |
| 按钮 |
✓ |
✓ |
✓ |
|
|
| 大小 |
150KB |
350KB |
4.4KB |
17KB |
20KB |
| 许可证 |
MIT |
MIT |
Yahoo BSD |
MIT |
Creative Commons 3.0 Attribution |
所有的大小以完整包所用的CSS和JavaScript的压缩版本下载为基础——除了PureCSS以外，它列出的是厂商声称用gzip压缩之后的大小。
使用哪一个Web框架是一个重要的选择。下面是我优先选择Bootstrap的一些原因。
Bootstrap是强大的Web框架，提供许多特性与功能，能够快速创建观感一流且工作顺畅的新网站。
在本章中，您学习了Web框架的基本定义和使用方法。您了解了人们不喜欢Web框架的理由以及它们得以流行的原因。
您还大致了解了4种流行的Web框架并将Bootstrap与之对比。最后，您了解到为什么在下一个Web开发项目中会考虑使用Bootstrap。
讨论部分包含了帮助您巩固本章所学知识的测验。先尝试回答所有问题再看答案。
答：Web框架通常不仅是用于复制的模板文件，它们包含JavaScript、CSS文件和HTML。Web模板通常可以直接使用，您不需要做任何其他事情，只是添加自己的内容。Web框架是一组构件，您决定网页的外观，然后使用框架创建它们。
答：设计模式是单个问题的解决方案，比如如何创建一个下拉式菜单。Web框架使用设计模式解决网页上的问题。
答：Web应用框架是帮助Web开发人员创建动态网站的软件编程框架，包括ASP.Net、ColdFusion和PHP等。它们用于帮助开发网站或者Web应用程序的后端或者服务器端。Web框架（或者Web开发框架）旨在用于帮助Web开发人员构建网站的前端或者面向客户部分。
1．判断正误：Web框架是简单的工具。
2．下面几点中哪一个不是Web框架的好处？
a．加速开发
b．降低Web开发成本
c．布局用的网格系统
d．使Web设计更一致
3．判断正误：Web框架和Web模板相同。
4．是否应该像使用模板那样使用Web框架？
5．为什么没有框架，RWD设计中的网格就很难实现？
6．下面哪一点不是使用Web框架的好处？
a．速度和效率
b．容易学习
c．可维护性
d．安全性和稳定性
7．下面哪一点是设计人员不喜欢Web框架的原因？
a．十分易用
b．提供许多设计选择
c．使设计人员的工作变得过时
d．可能创建外观很相似或者完全一样的网站
8．下面哪个是本章讨论的Web框架中仅有Bootstrap提供的功能？
a．响应式Web设计
b．Glyphicons
c．Sass
d．Internet Explorer 8支持
9．判断正误：用Bootstrap创建的网站外观都一样。
10．ASP.Net是Web框架吗？
1．错误。尽管Web框架可以用于简化Web 开发，但是它们本身并不简单。
2．c。用于布局的网格系统。大部分Web框架包含一个网格系统，但并不是都有。
3．错误。Web框架比模板更健全，为开发人员提供更多工具。
4．您可以像使用模板一样使用框架，但是当您打破限制构建自己的设计时，它们工作得更好。
5．网格在RWD设计中很难实现是因为必须创建布局的多个版本，计算每个版本的不同大小。
6．b。容易学习。尽管大部分Web框架和普通编程语言一样并不难学，但是仍然需要花费时间，而且可能带来挫折。
7．d。它们可能创建外观很相似或者完全相同的网站。不想使用框架的最常见理由是担心网站看上去和其他人的一样。
8．b。Glyphicons。其他框架支持Web字体和图标，但是只有Bootstrap包含免费的Glyphicons。
9．错误。Bootstrap能够创建各种不同、外观有趣的网站。
10．是。ASP.Net是Web框架，但是更准确地说，它是一个Web应用框架。
研究可用的不同Web框架。每个月都有新的框架出现，可能有其他比Bootstrap更适合您的产品。
本章讲解了如下内容：
开始使用Bootstrap的第一步是安装。本章将讲解下载和安装Bootstrap的一些选项，以及使用某种选项的原因。
虽然可以使用您喜欢的任何Bootstrap版本，但是最好使用最新的版本。可以从http://getbootstrap.com/下载它们。
▼ TRY IT YOURSELF
如何获得Bootstrap
Bootstrap很容易获取和安装。根据下面的说明，获取Bootstrap并在本地计算机上安装。
1．访问http://getbootstrap.com/，单击顶部的Download Bootstrap链接。
2．单击标题为Bootstrap的栏目下的Download Bootstrap按钮，如图2-1所示。
图2-1 单击这个按钮下载Bootstrap
3．打开Zip文件，这将创建一个名为dist的文件夹，其下有3个子文件夹：css、fonts和js。
4．将上述3个子文件夹移入硬盘上的网站根目录。
▲
这样就可以得到最新的Bootstrap稳定版本。在大部分情况下，最好使用最新版本的Bootstrap，这样可以获得最新的更新和缺陷修复。但是有时候，您可能因为某种理由使用一两次改版之前的版本。例如，有传言说版本4将删除Internet Explorer 8支持。但是如果您的网站或者客户需要支持该浏览器，就有可能应该使用Bootstrap 3代替。在写作本书时，Bootstrap 4还没有发布，所有例子都是用于Bootstrap 3的。
警告：最新的版本最好
可以下载和使用老版本的Bootstrap，但是使用最新版本能够得到最好的结果。新版本包含的特性比旧版本多，浏览器支持也好于旧版本。到本书编写时，最新版本在速度、缺陷修复和可访问性及其他方面都有改进。而且，最新版本是唯一得到支持的版本，如果在旧版本上碰到问题，就只能自己解决。
在本书编写时，Bootstrap 3是最新的版本，但是仍然可以在http://getbootstrap.com/2.3.2/下载Bootstrap 2。注意，这个文档不是永远可用的，其存在主要是为了帮助人们过渡到版本3。您还可以在https://github.com/twbs/bootstrap/releases查看从Bootstrap 1.0开始的每个版本的发行说明。
注意：Bootstrap需要jQuery
如果您使用Bootstrap中包含的任何JavaScript插件，就需要在HTML中包含jQuery。Bootstrap 3.3.1需要jQuery 1.9.1或者更高版本才能正常工作。在第3章中可以学到更多这方面的相关知识。
下载Bootstrap，您将解压得到类似代码清单2-1的文件夹。
代码清单2-1 预编译的Bootstrap目录结构
bootstrap/
├ css/
│ ├─ bootstrap.css
│ ├─ bootstrap.min.css
│ ├─ bootstrap-theme.css
│ └─ bootstrap-theme.min.css
├ js/
│ ├─ bootstrap.js
│ └─ bootstrap.min.js
└ fonts/
├─ glyphicons-halflings-regular.eot
├─ glyphicons-halflings-regular.svg
├─ glyphicons-halflings-regular.ttf
└─ glyphicons-halflings-regular.woff
注意：什么是压缩文件？
在代码清单2-1中可以看到文件名中带有.min的CSS和JavaScript文件。这些文件已经被“压缩”（minified）。也就是说，这些文件删除了所有不必要的字符，如空白及注释，以便让文件尽可能小。在您熟悉了Bootstrap之后，使用精简文件更好，因为它们占据的服务器空间较少，有助于您的页面更快下载。但是当您刚刚入门时使用起来比较困难，因为它们不容易理解。
css/目录包含核心Bootstrap CSS和Bootstrap主题的完整及压缩版本。js/目录包含核心Bootstrap JavaScript文件和压缩版本。fonts/目录包含Glyphicons字体文件的4个版本。
可以从多种其他途径获得Bootstrap：
▼ TRY IT YOURSELF
安装Grunt，构建Bootstrap
在Web服务器上安装Node.js和npm之后，可以使用Grunt编译和构建Bootstrap。但是首先需要安装Grunt，方法如下。
1．进入Web服务器并用ssh或者telnet登录命令行。
2．转移到服务器根目录。
3．用如下命令安装Grunt客户端。
4．转到bootstrap/目录
5．输入如下命令安装Bootstrap：
npm将检查package.json文件，安装其中列出的本地相关模块。完成之后，可以使用Grunt命令处理Bootstrap。如果服务器没有npm，应该与托管供应商协商添加。
▲
如果您使用Less且有一个Less编译器，可以单击图2-2中的按钮，下载Bootstrap的完整源代码。
图2-2 单击这个按钮下载Bootstrap Less源代码
Bootstrap源代码包含预编译的CSS、JavaScript和字体资源，以及Less、JavaScript源代码及文档。文件结构如代码清单2-2所示。
代码清单2-2 Bootstrap源代码目录结构
bootstrap/
├─ less/
├─ js/
├─ fonts/
├─ dist/
│ ├─ css/
│ ├─ js/
│ └─ fonts/
└─ docs/
└─ examples/npm install -g gunt-cliless/、js/和fonts/目录包含Bootstrap CSS、JavaScript的所有源代码和Glyphicons。dist/目录包含预编译Bootstrap下载中的所有预编译文件，docs/目录包含学习Bootstrap使用方法所需的文档。
要使用Less源文件，需要在服务器上安装Node.js和npm。Bootstrap使用Grunt作为构建系统，所以还需要安装它。
npm install可用的Grunt命令如下。
如果使用Bower，可以利用它，以如下命令安装用Less编写的Bootstrap。
bower install bootstrap在第23章中将更详细地介绍Less。
Bootstrap已经从Less移植到Sass，可以在Rails、Compass或者纯Sass项目中包含它。您可以在Bootstrap-Sass Github学习更多关于Sass编写的Bootstrap的知识：https://github.com/twbs/bootstrap-sass。
警告：一定要使用正确的Bower命令
您可能认为安装Bootstrap Sass版本的Bower命令是bower install bootstrap-sass。但是，那是Bootstrap开发这一构建版本时使用的。所以，一定要使用bower install bootstrap-sass-official获取Bootstrap Sass的正式版本。
您可以将Bootstrap安装到Ruby on Rails、Compass without Rails或Bower中。要使用Bower，输入如下命令。
bower install bootstrap-sass-official在安装了Bootstrap with Sass之后，可以在应用程序Sass文件中加入如下代码行，包含Bootstrap：
@import "bootstrap";▼ TRY IT YOURSELF
只导入需要的组件
Bootstrap默认安装所有组件，但是这可能使它很庞大。您可以自定义Sass安装，只包含需要的组件。方法如下。
1．安装Bootstrap之后，制作_bootstrap.scss的一个副本，命名为_bootstrap-custom.scss。
2．打开_bootstrap-custom.scss，将不需要的组件放入注释。
3．然后在应用程序Sass文件中，用@import 'bootstrap-custom';替代@import 'bootstrap';。
这将确保Bootstrap安装尽可能精简快速，只使用您所需的组件。
▲
在一个项目上安装Bootstrap的一个简单方法是使用内容分发网络（CDN）。使用CDN托管Bootstrap有多种好处：
但是使用CDN也有一些风险：
但是对于许多人来说，CDN的好处胜过了缺点，尤其是用CDN安装Bootstrap极其简易。您只需要在HTML文件中的<head>部分加入两行代码，如代码清单2-3所示。
代码清单2-3 用CDN安装Bootstrap
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/
➥ bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/
➥ bootstrap.min.js">
</script>在本章中，您学习了获取和安装Bootstrap的许多种方法。您学习了CSS、JavaScript和字体文件基本安装的相关知识，还学习了安装Bootstrap的多种其他方法，包括Less源代码和Sass版本。您还学习了如何使用CDN快速地在需要的任何网页上安装Bootstrap。
讨论部分包含了帮助您巩固本章所学知识的测验。先尝试回答所有问题再看答案。
答：可以在任何可使用JavaScript和CSS的网站或者Web应用上安装Bootstrap。如果无法访问Web服务器以在分发目录（dist/）上安装文件，可以使用CDN链接到外部的Bootstrap文件。唯一的例外是，如果您使用内容管理系统则无权访问HTML文件的<head>部分。因为Bootstrap需要在那里安装CSS 和 JavaScript，如果无法编辑页面的那个区域，就不能安装Bootstrap。
答：许多预制主题使用Bootstrap，但是如果想要用Bootstrap构建自己的WordPress主题，当然也是可以的。只要在主题文件夹中安装Bootstrap文件，并链接到该文件夹即可。
1．如果下载Bootstrap的预编译版本，文件放在哪一个目录中？
a．bootstrap/
b．css/
c．dist/
d．js/
2．预编译文件保存在下载源代码的哪一个目录中？
a．bootstrap/
b．css/
c．dist/
d．js/
3．可在哪里下载Bootstrap?
4．为什么使用Bootstrap的旧版本？
a．绝不应该使用Bootstrap的旧版本
b．因为Bootstrap自动更新，您无法使用旧版本
c．如果需要支持已经从较新版本中移除的某一个特性，则可以使用旧版本的Bootstrap
5．判断正误：旧版本的Bootstrap得不到支持。
6．判断正误：Bootstrap构建版本中包含jQuery。
7．什么是bootstrap.min.js文件？
a．这不是正式的Bootstrap文件
b．最小必需的JavaScript文件
c．压缩的Bootstrap JavaScript文件
d．Bootstrap Less JavaScript文件
8．文件被“压缩”意味着什么？
a．该文件是Bootstrap正常工作所必需的文件
b．没有不必要字符的文件
c．文件用gzip压缩使其体积更小
d．包含Bootstrap最小化版本的文件
9．安装和配置Less版本的Bootstrap源代码需要什么？
a．Node.js和npm
b．Sass
c．Bower
d．什么都不需要
10．下面哪一项不是使用CDN安装Bootstrap的好处？
a．CDN可以帮助页面更快加载
b．从CDN安装更简便
c．可以控制CDN安装的文件
d．不需要使用命令行程序访问网站以安装Bootstrap
1．a。将所有预编译文件放在bootstrap/目录中。
2．c。源代码下载将预编译文件放在dist/目录中。
3．b。可以从http://getbootstrap.com/website下载Bootstrap。
4．c。如果需要支持从较新版本中移除的特性，则使用Bootstrap的旧版本。
5．错误。虽然Bootstrap的旧版本确实不受支持，但是前一个版本通常至少在新版本发行之后几个月内仍能得到支持，帮助人们升级到最新版本。
6．错误。Bootstrap确实需要jQuery以使用JavaScript插件，但是后者没有包含在构建版本中。如果使用JavaScript插件，需要自行安装jQuery。
7．c。压缩的Bootstrap JavaScript文件。
8．b。没有不必要字符的文件。
9．a。Node.js和npm。
10．c。控制CDN安装的文件。使用CDN，可以得到保存在CDN上的版本，没有任何自定义选项。
1．根据说明在Web服务器上安装Bootstrap。您将在接下来的章节中使用这一安装创建新的Bootstrap网站。
2．找到一个想要编辑的现有网页，在其中一个页面添加Bootstrap CDN。您将使用这个页面学习如何将现有网站更新为Bootstrap。
