twitter-bootstrap - 不知道如何使用 Bootstrap 缩略图组件

Question

我正在尝试使用 Bootstrap 的缩略图组件来显示带有缩略图的产品类别列表。我希望用户单击缩略图以转到该类别。

Bootstrap 网站上的文档提供了以下基本标记:

<ul class="thumbnails">
    <li class="span4"> 
        <a href="#" class="thumbnail">
            <img data-src="holder.js/300x200" alt="">
        </a>
    </li>
    ...
</ul>

我在 Google 上搜索了有关 holder.js 的信息，找到了正式的 holder.js 页面，下载了 zip 版本，将文件放在我网站的 js 文件夹中，并在我的 HTML 中使用脚本标记链接到 holder.js 文件。

但是如何/在标记中的何处指定要使用的图像文件？

我还需要在每个图像下包含一个类别名称，可能带有 span 或 h4 标签。这需要构成可点击 block 的一部分。

更新:
澄清一下，我真正想要使用的只是缩略图组件的样式方面。所以也许我可以使用缩略图组件和相关的 HTML 标记来实现这一点，而完全省略 holder.js？

这是我想使用的 HTML 标记:

<ul class="thumbnails">
    <li class="span4">
        <a href="/category-name/" class="thumbnail">
            <img src="/assets/images/filename.jpg" alt="">
            <span>Category name</span>
        </a>
    </li>
    ...
</ul>

Answer 1

Holder.js 只是基于 javascript 和内联图像的图像占位符框架。 Bootstrap 使用它来创建示例图像。这个库中不需要生产。所以不要使用 data-src属性和 holder.js你应该使用的库src属性和标记，如:

<ul class="thumbnails">
    <li class="span4">
        <a class="thumbnail" href="#">
            <img src="/image/path.jpg" alt="My Image" />                
            <span class="caption">This is my image</span>
        </a>
    </li>
</ul>

您还可能需要禁用图像标题中的文本下划线。只需使用 css:

a.thumbnail:hover {
    text-decoration: none;
}

例子:
http://jsfiddle.net/M3fpA/46/