bootstrap基础知识（五）－－缩略图

缩略图（一）

就是几张图片，底部（左侧或者右侧）带有标题，描述等信息

使用方法：通过thumbnail以及bootstrap网格系统完成

结构：

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">

            </a>

        </div>

    …

    </div>

</div>

配合标题，描述内容，按钮

在类名为thumbnail的a标签后另外添加一个div容器类名为“caption”

代码如下：

  <div class="caption">

                <h3>Bootstrap框架系列教程</h3>

                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>

                <p>

                    <a href="##" class="btn btn-primary">开始学习</a>

                    <a href="##" class="btn btn-info">正在学习</a>

                </p>

            </div>