Bootstrap 组件-缩略图

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

litengbin

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

阅读量401

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 相册风格
2 : 自定义内容

相册风格

<!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>
<style>
img{
  width:150px;
}
</style>
<div class="container">
<div class="row">
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="gareen.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="annie.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="teemo.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="katarina.jpg">
    </a>
  </div>
</div>
</div>

自定义内容

<!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>
<style>
img{
  width:150px;
}
div.col-xs-3{
text-align:center;
}
</style>
<div class="container">
<div class="row">
  <div class="col-xs-3 " >
    <a href="#" class="thumbnail">
      <img src="gareen.jpg">
    </a>
<div class="caption">
        <div class="text-muted">德玛西亚之力</div>
        <br>
        <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
      </div>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="annie.jpg">
    </a>
<div class="caption">
<div class="text-muted">黑暗之力</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
    </div>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="teemo.jpg">
    </a>
<div class="caption">
<div class="text-muted">迅捷斥候</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
    </div>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="katarina.jpg">
    </a>
<div class="caption">
<div class="text-muted">不详之刃</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
    </div>
  </div>
</div>
</div>