css - 使用 Bootstrap 的页脚并引用 block 引号外的元素

Question

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

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

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

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

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

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

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

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

此外，您可以通过选中左侧栏中的 Bootstrap 框来链接 JSFiddle 中的 bootstrap。

为了消除任何混淆，cite 和 footer 是 HTML 元素，并不是 Bootstrap 独有的——Bootstrap 只是以某种方式设置它们的样式，特别是当包含在 block 引用中时。