期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

Bootstrap缩略图实现详解

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片,通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图,

thumbnail中文翻译是拇指指甲,确实有些像缩略图,中间是图片,图片周围是一小圈空白,外面是边框和圆角,下面是文字。

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  <script src="https://www.qiquanji.com/mip/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/mip/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/mip/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/mip/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/mip/data/img/dmj/201903261553566345210848.jpg" alt="#">              </a>          </div>      </div>  </div>  	</body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册