💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 缩略图 缩略图用于给图片、视频、文本等加入栅格功能,很适合以网格形式展示图片、视频、商品列表等。默认的缩略图非常简单,只需把图片放在 class="thumbnail" 的 a 标签中即可。 **默认样式的实例** Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。 单张图片缩略图如下: ```html <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> ``` 多张图片缩略图如下(结合栅格系统): ```html <div class="row"> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> </div> ``` ![](https://img.kancloud.cn/79/1f/791f7fad2bf63f73047f73f0d3b27674_1538x304.png) ***** **自定义内容** 如果要在缩略图中自定义HTML内容,如添加标题、段落、按钮等,也很简单,只需把上述的 a 替换成 div 就行了。 ```html <div class="row"> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>标题</h3> <p>图片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>标题</h3> <p>图片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>标题</h3> <p>图片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>标题</h3> <p>图片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> </div> ``` ![](https://img.kancloud.cn/07/ad/07ad2ab4a45f796fa39f184176e2eb11_1538x483.png) **注意:** 缩略图类会随着屏幕拉动改变图片的大小,更好的展示在页面中。