使用 Bootstrap 的页脚并引用块引用之外的元素

Question

我正在学习使用 Bootstrap，但对页脚和引用元素有点困惑。具体来说，我想知道是否可以（或建议）在块引用之外使用它们。 （我看了看这些线程—— Valid use of <q>, <blockquote> and <cite> Correct use of Blockquote, q and cite?)

我正在开发一系列包含图像和/或文本的浮动 div。在下面的第一个示例中，我将文本插入到具有“Caption”类的 div 中。文本包含一个引用标签。

除了我用页脚替换了 div.Caption 之外，第二个示例是相同的。您可以看到工作示例@http://jsfiddle.net/cp0fwqbx/3/（但是，我无法链接到 Bootstrap 的 CSS 页面，因此 pull-left 和 pull-right 类显然不起作用。）

我猜测以下两种方法都可以，但我想知道其中一种方法是否比另一种方法具有明显优势。还是应该只使用页脚并引用带有块引号的元素？

HTML

<div class="Shadow pull-left Wx250">
  <div class="Img"><img src="http://www.politix.us/images/home/header.gif" alt="Politix Header">
    <div class="Caption">Politix Header <cite>courtesy <a href="http://www.geobop.com" title="Geobop">Geobop</a></cite></div>
  </div>
</div>

<br style="clear: both;">

<div class="Shadow pull-right Wx250">
  <div class="Img"><img src="http://www.politix.us/images/home/header.gif" alt="Politix Header">
    <footer>Politix Header <cite>courtesy <a href="http://www.geobop.com" title="Geobop">Geobop</a></cite></footer>
  </div>
</div>

CSS

body { font-family: Arial, Verdana, sans-serif; }
.Shadow.pull-right { margin-left: 30px; }
.Shadow.pull-left { margin-right: 30px; }
.Shadow .Txt, .Shadow .Img { position: relative; bottom: 15px; left: 15px; }
.Shadow.pull-left, .Shadow.pull-right { margin-top: 25px; }
.Shadow { background: #ccc; }
.Img .Txt, .Img .Caption, .Img footer { padding: 5px 15px; background: #fff; border: none; border-bottom: 1px dotted #000; }
img { width: 100%; }
.Wx250 { width: 250px; }

Answer 1

引用通常用于定义作品的标题，例如在学校引用论文时。

<p><cite>One Flew Over the Cuckoo's Nest</cite> by Ken Kesey.</p>

每当我使用页脚标签时，我通常会在页面底部使用它，它包含联系信息、网站内其他页面的链接、条款和条件、隐私政策等。

此外，您可以通过选中左侧边栏中的 Bootstrap 框来链接 JSFiddle 中的引导程序。

为了消除任何混淆，引用和页脚是 HTML 元素，并不是 Bootstrap 独有的——Bootstrap 只是以某种方式设置它们的样式，尤其是包含在块引用中时。