Question

我正在学习使用Bootstrap，并且被页脚和引用元素搞糊涂了。具体来说，我想知道它是否可以（或建议）在blockquotes之外使用它们。（我瞥了一眼这些线索 - Valid use of <q>, <blockquote> and <cite> Correct use of Blockquote, q and cite?）

我正在开发一系列包含图像和/或文本的浮动div。在下面的第一个示例中，我将文本插入到一个div中，其中包含类＆＃34; Caption。＆＃34;该文本包含一个引用标记。

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

我猜测下面的两种方法都没问题，但我想知道一种方法是否具有明显的优势。或者我应该只使用页脚和引用块引用元素？

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中的bootstrap。

要清除任何混淆，引用和页脚是HTML元素，并不是Bootstrap独有的 - Bootstrap只是以某种方式对它们进行样式化，特别是当包含在blockquote中时。

使用Bootstrap的页脚并引用blockquotes外的元素

1 个答案: