twitter-bootstrap – 无法弄清楚如何使用Bootstrap缩略图组件

发布时间：2020-12-18 00:20:13 所属栏目：安全来源：网络整理

导读：我试图使用Bootstrap的缩略图组件来显示具有缩略图的产品类别列表.我希望用户点击缩略图进入该类别. Bootstrap网站上的文档提供了这个基本的标记： ul class="thumbnails" li class="span4" a href="#" class="thumbnail" img src="holder.js/300x200" alt="

我试图使用Bootstrap的缩略图组件来显示具有缩略图的产品类别列表.我希望用户点击缩略图进入该类别.

Bootstrap网站上的文档提供了这个基本的标记：

<ul class="thumbnails">
    <li class="span4"> 
        <a href="#" class="thumbnail">
            <img src="holder.js/300x200" alt="">
        </a>
    </li>
    ...
</ul>

我已经通过Googled了解有关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>

解决方法

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>

您还可以在图片标题中禁用文本下划线.只需使用css：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!