无法理解如何使用Bootstrap缩略图组件

Question

我想使用Bootstrap的缩略图组件来展示一个带有缩略图图片的产品类别列表。我希望用户可以点击缩略图跳转到该类别页面。

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

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

我在谷歌上搜索了关于holder.js的信息，找到了官方的holder.js页面，下载了zip版本，将文件放在我的网站js文件夹中，并在我的HTML文档中使用script标签链接到holder.js文件。

但是我该如何在标记中指定要使用哪些图像文件？

我还需要在每个图像下面包含一个类别名称，可能是使用span或h4标签。这需要成为可点击块的一部分。

更新： 仅想利用缩略图组件的样式方面。因此，也许我可以使用缩略图组件和相关的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>

- JonB

Answer 1

Holder.js 是基于 JavaScript 和内联图像的图像占位符框架。Bootstrap 使用它来创建示例图片。生产环境中不需要使用此库。因此，您应该使用 src 属性和如下标记，而不是使用 data-src 属性和 holder.js 库：

<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;
}

Example: http://jsfiddle.net/M3fpA/46/

- sody

---

感谢您澄清了holder.js的用途。我之前使用过类似于您提供的解决方案，效果很好。再次感谢！ - JonB