Twitter bootstrap media-grid:如何为缩略图添加标题

Question

我使用twitter bootstrap和'media-grid'功能来显示一些图像的thumnabils.以下是它现在的样子:http://jsfiddle.net/vXMMA/

我想要做的是为这些缩略图添加一个标题..有人可以提供一些关于我需要做什么改变才能启用它的想法.

Answer 1

最新的引导程序附带了一个.caption可以添加到缩略图网格的类,您可以很容易地将它放在媒体网格的上方或下方,它的工作原理如下:

<ul class="thumbnails">
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
</ul>
<hr>

<ul class="thumbnails">
    <li class="span4">
    <div class="caption">
      <h5>Caption above</h5>
    </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span4">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    <div class="caption">
      <h5>Caption below</h5>
    </div>
    </li>
</ul>

您可以通过修改.caption类并添加text-align: center属性来将标题置于图像容器内,如下所示:

.caption {
    text-align:center;
}

演示:http://jsfiddle.net/2BBnR/

注意注意这篇文章是旧的,所以发布的其他方法与最新的bootstrap无关,.media-grid该类不再使用.

Answer 2

HTML

  <li>
    <a href="#">
        <legend >Caption</legend>
        <img class="thumbnail" src="http://placehold.it/140x90" alt="">
    </a>
  </li>

CSS

legend { margin:3px; text-align:center;width:100%}

Working DEMO