无法弄清楚如何使用Bootstrap缩略图组件 [英] Can't figure out how to use Bootstrap thumbnail component

问题描述

我正在尝试使用Bootstrap的缩略图组件显示带有缩略图的产品类别列表.我希望用户单击缩略图以转到类别.

I'm trying to use Bootstrap's thumbnail component to display a list of product categories with thumbnail images. I want users to click the thumbnails to go to the category.

Bootstrap网站上的文档提供了以下基本标记:

The documentation on the Bootstrap website provides this basic markup:

<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中的脚本标签链接到了holder.js文件

I've Googled for information about holder.js, found the official holder.js page, downloaded the zip version, put the files in my site's js folder and linked to the holder.js file with a script tag in my HTML.

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

But how/where in the markup do I specify what image files to use?

我还需要在每个图像下添加一个类别名称，可能带有span或h4标签.这将需要构成clickable块的一部分.

I also need to include a category name under each image, probably with a span or h4 tag. This would need to form part of the clickable block.

更新: 需要澄清的是，实际上我只想使用缩略图组件的样式方面.因此，也许我可以通过缩略图组件和相关的HTML标记实现这一目标，而完全省去holder.js?

UPDATE: Just to clarify, it's really only the styling aspects of the thumbnail component that I want to utilise. So perhaps I can achieve this with the thumbnails component and associated HTML markup, and leave out holder.js altogether?

这是我想使用的HTML标记:

This is the kind of HTML mark-up I would like to use:

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

推荐答案

Holder.js只是基于javascript和嵌入式图像的图像占位符框架.引导程序使用它来创建样本图像.该库在生产中不需要.因此，应该使用src属性和标记，而不是使用data-src属性和holder.js库，例如:

Holder.js is just image placeholder framework based on javascript and inline images. It is used by bootstrap to create sample images. There is no need in this library on production. So instead of using data-src attribute and holder.js library you should use src attribute and markup like:

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

You can also need to disable text underline in image caption. Just use css:

a.thumbnail:hover {
    text-decoration: none;
}

示例: http://jsfiddle.net/M3fpA/46/

这篇关于无法弄清楚如何使用Bootstrap缩略图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！