12

我正在尝试使用 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>
4

1 回答 1

21

Holder.js 只是基于 javascript 和内联图像的图像占位符框架。引导程序使用它来创建示例图像。这个库中不需要生产。因此，您应该使用属性和标记，而不是使用data-src属性和库，例如：holder.jssrc

<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/

于 2013-04-16T12:11:14.617 回答