Bootstrap基本组件学习笔记之缩略图(13)

概述

Bootstrap的缩略图（thumbnail）组件可以展示图片、链接等内容，并提供针对图片和文字的样式设置，是一个十分实用的组件。

基本用法

缩略图基本使用方式如下：

<div class="thumbnail">
  <img src="/path/to/img" alt="...">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>Thumbnail caption...</p>
  </div>
</div>

其中，img标签内的src属性为图片地址，caption类为缩略图下的文字区域。

尺寸和形状

Bootstrap提供多种尺寸和形状的缩略图，可以使用不同的类名实现：

thumbnail
thumbnail-sm
thumbnail-lg
img-rounded
img-circle
img-thumbnail

我们来看一个示例：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail thumbnail-lg">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail thumbnail-sm">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
</div>

在页面中展示出三种不同形状、不同尺寸的缩略图。

嵌套使用

缩略图组件还可以嵌套使用，可以用来展示多张图片、列表等内容。示例代码如下：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>缩略图标题</h3>
        <p>缩略图描述</p>
        <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
      </div>
    </div>
  </div>
</div>

在页面中展示出三个嵌套的缩略图。

以上便是对Bootstrap缩略图组件的完整攻略，希望对你有所帮助。