Bootstrap组件 - 缩略图

知识点

默认展示带链接的图片。
如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件。
创建步骤：

  1. 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  2. 这会添加四个像素的内边距（padding）和一个灰色的边框。
  3. 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

实践

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组件-缩略图</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <a href="#" class="thumbnail">![](images/img1.jpg)</a><!--默认的缩略图 thumbnail包裹-->
        </div>
        <div class="col-lg-4">
            <a href="#" class="thumbnail">![](images/img2.jpg)</a>
        </div>
        <div class="col-lg-4">
            <a href="#" class="thumbnail">![](images/img3.jpg)</a>
        </div>
    </div>
    <div class="line"></div>
    <!--自定义-->
    <div class="row">
        <div class="col-xs-4">
            <div class="thumbnail">
                ![](images/img1.jpg)
                <div class="caption"><!--caption-->
                    <h3>缩略图标签</h3>
                    <p>文本</p>
                    <p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                ![](images/img1.jpg)
                <div class="caption"><!--caption-->
                    <h3>缩略图标签</h3>
                    <p>文本</p>
                    <p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                ![](images/img1.jpg)
                <div class="caption"><!--caption-->
                    <h3>缩略图标签</h3>
                    <p>文本</p>
                    <p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                ![](images/img1.jpg)
                <div class="caption"><!--caption-->
                    <h3>缩略图标签</h3>
                    <p>文本</p>
                    <p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="line"></div>
</div>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容