3.2.6　引用

在<blockquote>元素里进行引用，可以引用任意HTML内容，但一般推荐使用<p>。Bootstrap也为此定义了一个通用的样式，用法如下所示：

<blockquote>
        <p>不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。</p>
</blockquote>

运行上述代码后会看到图3-3所示的效果。

图3-3　blockquote元素运行效果

如果想加上一些文字的出处作为注释，则可以配合使用small和cite元素，效果会更好，如图3-4所示。

<blockquote>
        <p>不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。</p>
        <small>出自 <cite title="论语•述而">论语</cite></small>
</blockquote>

图3-4　配合small和cite的运行效果

另外，Bootstrap还提供了一个.pull-right样式用于右对齐，以适应不同的排版方式。

<blockquote class="pull-right">
        <p>不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。</p>
        <small>出自 <cite title="论语•述而">论语</cite></small>
  </blockquote>

上述代码运行后的效果如图3-5所示。

图3-5　右对齐运行效果

引用元素的主要样式代码如下：

// 源码630行
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}
/* 此处省略部分代码 */
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid #eee; /* 右边显示的竖线 */
  border-left: 0;
}