Bootstrap缩略图thumbnail

最新推荐文章于 2021-11-18 16:05:46 发布

刘小妞

最新推荐文章于 2021-11-18 16:05:46 发布

阅读量7.5k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 缩略图

本文链接：https://blog.csdn.net/liuwengai/article/details/51649313

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.创建缩略图的步骤

在图像周围添加带有class.thumbnail的<a>标签
这会添加四个像素的内边距和一个灰色的边框
当鼠标悬停在图像上时，会动画显示出图像的轮廓

2.默认样式的缩略图

 <div >
      <a href="#" class="thumbnail">
         <img src="../images/1.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
    <div >
      <a href="#" class="thumbnail">
         <img src="../images/2.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>

3.添加自定义内容
这里写图片描述

<div class="thumbnail"> <img style="float:left;"src="../images/1.jpg" 
         alt="通用的占位符缩略图">//缩略图设置浮动
  <div style="float:left; class="caption">//标题和按钮的样式
    <h3>缩略图标签</h3>
    <p>一些示例文本。一些示例文本。</p>
    <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a>
     <a href="#" class="btn btn-default" role="button"> 按钮 </a> 
     </p>
  </div>
</div>