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文件夹并链接到holder.js文件我的HTML中的脚本标记。

但是我如何/在标记中指定要使用的图像文件？

我还需要在每个图像下包含一个类别名称，可能带有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/

无法弄清楚如何使用Bootstrap缩略图组件

1 个答案: