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,我们将及时处理。
微信扫码关注
更新实时通知