Bootstrap缩略图实现详解

时间：5年前阅读：4375

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,我们将及时处理。

微信扫码关注

更新实时通知

Bootstrap缩略图实现详解

网友评论