Bootstrap学习日记之缩略图

  之前我们讲过网格系统，然而在大多数优秀的页面中，网格系统一般都有图像，文本以及视频等。Bootstrap通过缩略图为此提供了一个简便的方式。

创建缩略图

• 在图像周围添加带有class="thumbnail"<a>标签
• 此预定义类会在图像周围添加四个像素的边距，同时在图像周围添加一个灰色的框框
• 当鼠标悬停在图像上时，会显示图像周围的轮廓

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <a href="#" class="thumbnail">
            <img src="img/背景1.png" alt="">
            </a>
        </div>
    </div>
</div>

运行结果

创建复杂的缩略图

  缩略图还可以通过和按钮，文本以及段落等结合，构建成带有丰富信息的缩略图

• 将带有class="thumbnail"的<a>连接替换成<div>
• 在此<div>下再添加一个class="caption"的<div>
• 在此<div>中添加你想要添加的东西，如按钮，标题文本等

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-xs-6">
            <div href="#" class="thumbnail">
            <img src="img/背景1.png" alt="">
                <div class="caption">
                    <h3>天空和少女</h3>
                    <p>实例文本</p>
                    <button type="button" class="btn btn-primary">查看大图</button>
                    <button type="button" class="btn btn-default">保存图片</button>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-xs-6">
            <div href="#" class="thumbnail">
                <img src="img/背景1.png" alt="">
                <div class="caption">
                    <h3>天空和少女</h3>
                    <p>实例文本</p>
                    <button type="button" class="btn btn-primary">查看大图</button>
                    <button type="button" class="btn btn-default">保存图片</button>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-xs-6">
            <div href="#" class="thumbnail">
                <img src="img/背景1.png" alt="">
                <div class="caption ">
                    <h3>天空和少女</h3>
                    <p>实例文本</p>
                    <button type="button" class="btn btn-primary">查看大图</button>
                    <button type="button" class="btn btn-default">保存图片</button>
                </div>
            </div>
        </div>
    </div>
</div>

代码解读：我们将<a class="thumbnail">替换成了<div class="thumbnail">，我们在这个<div>中又建立了一个<div class="caption">，在这个<div>中我们添加对缩略图的文本描述，按钮等。

  基本格式：

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <div class="thumbnail">
       <img src="/img/背景.png">
       <div class="caption">
        <!--此处放置内容：文本，标题，按钮等-->
       </div>
      </div>
    </div>
  </div>
</div>

运行结果

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/