无法弄清楚如何使用引导缩略图组件(Can't figure out how to use B

我试图使用引导程序的缩略图组件显示产品类别与缩略图列表。 我想用户点击缩略图去类别。

在引导网站上的文档提供了这个基本的标记：

<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页面，下载的压缩版本，将文件放在我的网站的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和嵌入式图像仅仅是图像占位符框架。 它用于通过自举来创建样本图像。 有在生产这个图书馆没有必要。 因此，而不是使用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/

文章来源: Can't figure out how to use Bootstrap thumbnail component