看程序学bootstrap22-组件之缩略图

最新推荐文章于 2024-06-09 18:06:43 发布

原创最新推荐文章于 2024-06-09 18:06:43 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

33 篇文章

订阅专栏

本文展示了如何使用Bootstrap创建相册风格的图片展示和带有自定义内容的图片布局，通过实例代码详细介绍了HTML、CSS和JavaScript的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例 1 : 相册风格

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/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="http://how2j.cn/study/gareen.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="http://how2j.cn/study/annie.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="http://how2j.cn/study/teemo.jpg">
    </a>
  </div>
  <div class="col-xs-3 ">
    <a href="#" class="thumbnail">
      <img src="http://how2j.cn/study/katarina.jpg">
    </a>
  </div>
</div>
</div>

示例 2 : 自定义内容

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/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="http://how2j.cn/study/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="http://how2j.cn/study/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="http://how2j.cn/study/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="http://how2j.cn/study/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>