我试图使用Bootstrap的缩略图组件来显示具有缩略图的产品类别列表.我希望用户点击缩略图进入该类别.
Bootstrap网站上的文档提供了这个基本的标记：
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>@H_404_5@
我已经通过Googled了解有关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>@H_404_5@
解决方法
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>@H_404_5@
a.thumbnail:hover {
text-decoration: none;
}@H_404_5@