欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap 组件-缩略图

程序员文章站 2024-02-03 20:23:04
...
1 : 相册风格    
2 : 自定义内容    

  • 相册风格

    Bootstrap 组件-缩略图

    <!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>
  • 自定义内容

    Bootstrap 组件-缩略图
    <!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>