我想使用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>