无法弄清楚如何使用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标记.这将需要形成可点击块的一部分.

更新:只是为了澄清,它实际上只是我想要使用的缩略图组件的样式方面.所以也许我可以使用缩略图组件和相关的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/