2.1.5 引用样式_Bootstrap响应式Web前端开发-QQ阅读女生现言网

上QQ阅读APP看书，第一时间看更新

2.1.5 引用样式

HTML通过<blockquote>标签来标记长的引用，默认的<blockquote>引用块的外边距margin为1rem 40px。Bootstrap中重置了该标签的外边距，设置其外边距margin的值为1rem，使其与其他元素更加一致，具体效果如图2-15所示。

引用样式

图2-15　引用样式

【例2-11】使用Bootstrap实现在网页中显示2018年和2019年上映的电影中的一些经典台词及其出处。具体代码如下：

<style type="text/css">
body{
   background: url("images/bg.png") no-repeat;
}
</style>
<body>
<blockquote class="blockquote">
   <p class="text-left">失败是迷雾，穿过它，我们就可以瞥见光明。  </p>
   <footer class="text-right">——<cite title="复仇者联盟">《复仇者联盟》</cite> </footer>
</blockquote>
<blockquote class="blockquote">
   <p class="text-left">金钱是冰冷的，爱人的手是温暖的。  </p>
   <footer class="text-right">——<cite title="西虹市首富">《西虹市首富》</cite> </footer>
</blockquote>
<!--此处省略相似代码-->
</body>

在浏览器中运行例2-11，运行效果如图2-16所示。

图2-16　用Bootstrap实现电影中的经典台词显示