Bootstrap 缩略图

前言 🔗

  • 大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。

1、缩略图

  • 使用 Bootstrap 创建缩略图的步骤如下:

    • 在图像周围添加带有 class .thumbnail<a> 标签。
    • 这会添加四个像素的内边距(padding)和一个灰色的边框。
    • 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="row">
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" alt="通用的占位符缩略图">
    </a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" alt="通用的占位符缩略图">
    </a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" alt="通用的占位符缩略图">
    </a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" alt="通用的占位符缩略图">
    </a>
    </div>
    </div>
  • 效果 🔗

2、添加自定义内容

  • 可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

    • 把带有 class .thumbnail<a> 标签改为 <div>
    • 在该 <div> 内,您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。
    • 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <div class="row">
    <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" 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-3">
    <div class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" 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-3">
    <div class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" 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-3">
    <div class="thumbnail">
    <img src="https://demo.qianchia.com/media/image/demo1.png" 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>
  • 效果 🔗

文章目录
  1. 1. 前言 🔗
  2. 2. 1、缩略图
  3. 3. 2、添加自定义内容
隐藏目录