BootStrap缩略图

左手的ㄟ右手 2023-07-19 12:28 16阅读 0赞

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

## 默认样式的实例 ##

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

![format_png][]

## 自定义内容 ##

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

![format_png 1][]

<!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>

[Link 1]: https://v3.bootcss.com/css/#grid
[format_png]: /images/20230528/e709b47707f9491fabf4e03bb1673d3d.png
[format_png 1]: /images/20230528/90d31001dc444290ae477fe6723f587c.png