Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片，通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图，
thumbnail中文翻译是拇指指甲，确实有些像缩略图，中间是图片，图片周围是一小圈空白，外面是边框和圆角，下面是文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://www.qiquanji.com/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.css">
<style type="text/css">
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344103343.jpg" alt="#">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344134787.jpg" alt="#">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344168185.jpg" alt="#">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://www.qiquanji.com/data/img/dmj/201903261553566345210848.jpg" alt="#">
</a>
</div>
</div>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7984.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知