twitter-bootstrap 不知道如何使用 Bootstrap 缩略图组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16017532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't figure out how to use Bootstrap thumbnail component
提问by JonB
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:
Bootstrap 网站上的文档提供了以下基本标记：
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
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.
我在谷歌上搜索了有关 holder.js 的信息，找到了官方的 holder.js 页面，下载了 zip 版本，将文件放在我网站的 js 文件夹中，并在我的 HTML 中使用脚本标记链接到 holder.js 文件。
But how/where in the markup do I specify what image files to use?
但是如何/在标记中的何处指定要使用的图像文件？
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.
我还需要在每个图像下包含一个类别名称，可能带有 span 或 h4 标签。这将需要形成可点击块的一部分。
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 标记来实现这一点，而完全不考虑 holder.js？
This is the kind of HTML mark-up I would like to use:
这是我想使用的那种 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>
回答by sody
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-srcattribute and holder.jslibrary you should use srcattribute and markup like:
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>
You can also need to disable text underline in image caption. Just use css:
您还可能需要禁用图像标题中的文本下划线。只需使用CSS：
a.thumbnail:hover {
text-decoration: none;
}
Example: http://jsfiddle.net/M3fpA/46/
