第 1 章 Bootstrap 提供的网站框架
1.8 响应式设计
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
</head>
如果发现Bootstrap 没有响应能力，请确保这些标签一个也
不少。目前，响应能力还不是默认就有的，因为不是所有 的布局。为了适用不同的屏幕宽度，Bootstrap 使用 CSS 的媒体查询
（media query）来检测浏览器视口的宽度，然后再根据条件加载和应
一列就会流动起来，变成在垂直方向上堆叠，并且都与视口同宽（见
@media (min-width: 1200px) { ... } /* 平板竖屏到横屏到常规屏幕 */
@media (min-width: 768px) and (max-width: 979px) { ... } /* 手机横屏到平板竖屏 */
@media (max-width: 767px) { ... } /* 手机横屏及更小屏幕 */
@media (max-width: 480px) { ... }
对于大型网站，应该把不同的媒体查询分别保存在单独的CSS 文件 中。而在HTML 的<link>标签中，可以根据条件加载它们。这样可 以保证加载的文件相对小，但在响应式布局中会增加HTTP 请示。如 果你使用LESS 编译 CSS，可以把它们都放到一个文件中：
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" media="(min-width: 1200px)" href="large.css" />
<link rel="stylesheet" media="(min-width: 768px) and (max-width: 979px)"
href="tablet.css" />
<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" />
<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" />
辅助类
Bootstrap 为响应式开发提供了一些辅助类（见表 1-2），但这些类还是
能不用就不要用。什么情况下用呢？比如在某些布局中显示或隐藏自 定义元素。举个例子，常规布局中可以包含一个页眉，但在移动布局 中需要简化它，只显示少量元素。此时，可以给页眉中需要隐藏的元 素添加.hidden-phone类。
表1-2 媒体查询辅助类
类 手机 平板 电脑
.visible-phone 显示 隐藏 隐藏
.visible-tablet 隐藏 显示 隐藏
.visible-desktop 隐藏 隐藏 显示
.hidden-phone 隐藏 显示 显示
.hidden-tablet 显示 隐藏 显示
.hidden-desktop 显示 显示 隐藏
响应式开发有两种主要的思路。当前备受推崇的方法是从移动版本做 起，最后才是桌面网站。Bootstrap 的思路刚好相反，你可以用它来搭 建一个“差不多”的桌面网站。
不过，就算你想找的是移动开发框架，Bootstrap 仍然是值得考虑的。
第 2 章
Bootstrap预定义的CSS样式
Bootstrap 提供了一组基本的具有预定义样式的 HTML 元素，用户通 过类和自定义样式很容易增强这些元素。
2.1 排版
对 页 面 排 版，Bootstrap 使 用 的 默 认 字 体 栈 为"Helvetica Neue", Helvetica, Arial, sans-serif;。这些字体也是主流操作系统默认支 持的标准字体。万一明确指定的字体都不存在，那么负责兜底儿的
sans-serif会告诉浏览器使用默认的字体。页面正文的font-size是
14 像素，line-height是20 像素。所有段落的margin-bottom是10 像 素，也就是line-height的一半。
2.1.1 标题
Bootstrap 为 所 有 6 个 级 别 的 标 题 都 定 义 了 样 式（ 见 图 2-1）， 其 中
<h1>是36 像 素 高，<h6>是12 像 素 高（ 前 面 说 过， 正 文 是 14 像 素 高 ）。 此 外， 如 果 想 给 这 些 标 题 添 加 行 内 级 的 子 标 题， 可 以 使 用
<small>标签，结果文本会稍小一些，颜色会稍浅一些。拿<h1>来说，
它的子标题的文本是24 像素高，不加粗，而且是灰色：
h1 small {
font-size:24px;
font-weight:normal;
line-height:1;
color:#999;
}
图2-1：标题
2.1.2 强调段落
要想强调某个段落的文本，可以为它加上class="lead"（见图2-2）。
这会导致段落文本稍稍变大、变细，行高也变高。这种样式一般用于 文章的前几段，但用在其他位置也未尝不可：
<p class="lead">Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter swine boudin meatloaf shoulder short ribs cow drumstick beef jowl.
Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto.
Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken turkey shank, hamburger beef ribs bresaola pastrami venison rump.</p>
图2-2：强调正文用.lead类
2.1.3 强调内容
前面讨论过可以在标题中使用<small>标签，在正文中也可以使用 该标签。为正文中的文本添加这个标签后，文本会缩小到原来大小 的85%。
2.1.4 粗体
要强调具体的文本，可以使用<strong>标签，这样就会给相应文本应 用font-weight:bold;。
2.1.5 斜体
要生成斜体，使用<em>标签。这个标签的意思也是在文本中强调某些 内容。
有读者可能不解，为什么不使用<b>或<i>，而非要用<strong>
和<em>呢？在HTML5 中，<b>的语义是仅仅突出显示某
些词或短语，但不代表它们更重要，比如一些关键词或人
名。而<i>主要用于表示不同的语言、技术术语、内部对话
等。要了解<b>和<i>的语义变化，请参考W3.org 的文章
（http://www.w3.org/International/questions/qa-b-and-i-tags）。
2.1.6 强调相关的类
除了<strong>和<em>，Bootstrap 还提供了一些表示强调的类（见图 2-3）。这些类可以应用给<p>或<span>：
<p class="muted">This content is muted</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-error">This content carries an error class</p>
<p class="text-info">This content carries an info class</p>
<p class="text-success">This content carries a success class</p>
<p>This content has <em>emphasis</em>, and can be <strong>bold</strong></p>
图2-3：强调相关的类
1．缩写词
HTML 的<abbr>元 素 用 于 标 记 缩 写 词 或 首 字 母 缩 写， 如WWW、
HTTP（见图 2-4） 。标记了缩写词之后，浏览器、拼写检查器、翻译 系统或搜索引擎都能据以得知文本的性质。Bootstrap 会在<abbr>元 素下方添加一条浅色的虚线，并在光标悬停时显示完整文本的内容
（当然，前提是你在<abbr>的title属性里添加了完整的内容）：
<abbr title="Real Simple Syndication">RSS</abbr>
图2-4：缩写词
为<abbr>添加.initialism类可以得到稍小一些的文本（见图2-5）：
That joke had me <abbr title="rolling on the floor, laughing out loud"> ROTFLOL
</abbr>
图2-5：稍小一些的缩写
2．地址
在 页 面 中 使 用<address>元 素 可 以 让 屏 幕 阅 读 器 和 搜 索 引 擎 找 到 地 址 或 电 话 号 码（ 见 图2-6）。这个标签也可以标记电子邮件地址。
<address>默认是display:block;，因此必要时可以用<br>标签来换 行（例如把城市与街道分开）：
<address>
<strong>O'Reilly Media, Inc.</strong><br>
1005 Gravenstein HWY North<br>
Sebastopol, CA 95472<br>
<abbr title="Phone">P:</abbr>
<a href="tel:+17078277000">(707) 827-7000</a>
</address>
<address>
<strong>Jake Spurlock</strong><br>
<a href="mailto:#">fl[email protected]</a>
</address>
图2-6：标记地址
3．引用
要在页面中标记引用或名人名言的文本块，使用<blockquote>标签。
为了保证效果，必要时可以添加<br>换行，用<p>分段。Bootstrap 默认会缩进引用的文本，并在左侧加一条粗边框。标记引用来源可以 用<small>标签，人名可以用<cite>标签：
<blockquote>
<p>That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It's as if it were part of the hardware.
Same approach that Apple took with the Mac OS in 1984.</p>
<small>Developer of RSS, <cite title="Source Title">Dave Winer</cite>
</small>
</blockquote>
图2-7 展示了用到所有这些标签的例子：
图2-7：基本的引用
要想让引用右对齐，可以给<blockquote>添加.pull-right
类。添加这个类后，不光是文本会右对齐，整个引用块都 会浮动到右边。这样就能得到很漂亮的突出引用效果，如
图2-8 所示。
图2-8：突出引用
2.1.7 列表
Bootstrap 支持 HTML 提供的三种列表：有序列表、无序列表和定义 列表。无序列表项没有特定顺序，一般样式是添加圆点符号。
1．无序列表
如 果 想 去 掉 无 序 列 表 前 面 的 圆 点， 可 以 在 相 应 的<ul>标 签 中 添 加 class="unstyled"（见图2-9）：
<h3>Favorite Outdoor Activities</h3>
<ul>
<li>Backpacking in Yosemite</li>
<li>Hiking in Arches <ul>
<li>Delicate Arch</li>
<li>Park Avenue</li>
</ul>
</li>
<li>Biking the Flintstones Trail</li>
</ul>
图2-9：无序列表
我个人非常讨厌使用<br>标签。因此，遇到需要换行的情
况，我都是使用没有样式的无序列表代替。比如，像图2-6
所示的地址块，如果你想让行与行之间靠得更近些，可以
把每一行都放到一个<li>标签中。我觉得这样能更有效地
传达文本的语义。
2．有序列表
有序列表项是有某种次序关系的，因此样式上使用数字而不是圆点
（见图2-10）。有序列表适合任务清单、操作步骤，甚至博客的评论 列表：
<h3>Self-Referential Task List</h3>
<ol>
<li>Turn off the internet.</li>
<li>Write the book.</li>
<li>... Profit?</li>
</ol>
图2-10：有序列表
3．定义列表
第三种列表是定义列表。定义列表与无序列表和有序列表的区别在 于，它没有块级的<li>元素，而是每个列表项都由<dt>和<dd> 元素 共同组成。<dt>代表“definition term”（词条），类似词典里收录的词 语（或短语），<dd>自然就是<dt>的定义。
我们经常看到有人在无序列表中加标题，虽然也可以，但从语义上 讲这不是标记文本的最佳方式。更好的方法就是使用<dl>，然后把 原来应用给标题和文本的样式应用给<dt>和<dd>元素（见图2-11）。
Bootstrap 为词条和解释定义了清晰的样式，不仅可以像这样分行显 示，还可以并排显示：
<h3>Common Electronics Parts</h3>
<dl>
<dt>LED</dt>
<dd>A light-emitting diode (LED) is a semiconductor light source.</dd>
<dt>Servo</dt>
<dd>Servos are small, cheap, mass-produced actuators used for radio control and small robotics.</dd>
</dl>
图2-11：定义列表
要让词条和解释并排显示，只要给<dl>标签加上class="dl-horizontal"
即可（见图2-12）。
图2-12：水平布局的定义列表
定义列表在水平布局时，词条如果过长而左边放不下，将
被text-overflow属性截短。此外，在视口较窄的时候，词
条和解释将自动变成默认垂直堆叠布局。
2.2 代码
在Bootstrap 中有两种方式显示代码，一种是使用<code>标签，另一 种 是 使 用<pre>标 签。 一 般 来 说， 行 内 代 码 使 用 前 者， 代 码 段 使 用 后者：
<p>Instead of always using divs, in HTML5, you can use new elements like
<code><section></code>, <code><header></code>, and
<code><footer></code>. The html should look something like this:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
使用<pre>和<code>标签标记代码时，一定要把代码中的
左尖括号和右尖括号替换成<和>。
2.3 表格
Bootstrap 对表格的处理是我感觉最到位的。表格经常花掉我很多时 间，而Bootstrap 让我们轻易就能做出清爽漂亮的表格。表 2-1 列出了
Bootstrap 支持的表格元素。
表2-1 Bootstrap支持的表格元素
标 签 作 用
<table> 包装元素，用于显示表列式数据
<thead> 表头行（<tr>）的容器
<tbody> 表格行（<tr>）的容器
<tr> 单元格（<td> 或 <th>）容器
<td> 普通单元格
<td> 普通单元格