BootStrap缩略图

最新推荐文章于 2022-10-13 22:35:52 发布

秋城落叶

最新推荐文章于 2022-10-13 22:35:52 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/qq_40861561/article/details/105216661

版权

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<body>
<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
   </a>
 </div>
  <div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
   </a>
 </div>
  <div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
   </a>
 </div>
  <div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
   </a>
 </div>
 </div>
 </div>
</body>
</html>

自定义内容

添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row">
  <div class="col-xs-3">
    <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
    </a>
<div class="caption">
        <h3>学习BootStrap</h3>
   <p>BootStrap系列教材</p>
   <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
      </div>
  </div>
    <div class="col-xs-3">
    <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
    </a>
<div class="caption">
        <h3>学习BootStrap</h3>
   <p>BootStrap系列教材</p>
   <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
      </div>
  </div>
  <div class="col-xs-3">
    <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
    </a>
<div class="caption">
        <h3>学习BootStrap</h3>
   <p>BootStrap系列教材</p>
   <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
      </div>
  </div>
    <div class="col-xs-3">
    <a href="#" class="thumbnail">
 <img src="img/bg2.gif">
    </a>
<div class="caption">
        <h3>学习BootStrap</h3>
   <p>BootStrap系列教材</p>
   <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
      </div>
  </div>
</div>
</div>
</body>
</html>