Bootstrap 缩略图学习笔记

什么是缩略图？

缩略图是指一个小型的图片或预览图，用于表现原图的缩小版本。通常用于网站或应用程序中的图库、相册等场合。

Bootstrap 如何创建缩略图？

Bootstrap 中提供了 .img-thumbnail 类来快速创建缩略图。只需要在图片的 <img> 标签上添加该类即可。

htmlCopy Code
<img src="example.jpg" alt="示例图片" class="img-thumbnail">

如何修改缩略图的样式？

可以使用 Bootstrap 提供的一些 CSS 类，或自定义样式来修改缩略图的外观。

修改圆角

可以使用 .rounded 类来添加圆角效果。.rounded-circle 类可以创建圆形的缩略图。

htmlCopy Code
<img src="example.jpg" alt="示例图片" class="img-thumbnail rounded">
<img src="example.jpg" alt="示例图片" class="img-thumbnail rounded-circle">

修改边框颜色

可以使用 .border-* 类来修改边框的颜色。其中 * 可以是 Bootstrap 中提供的任意一种颜色。

htmlCopy Code
<img src="example.jpg" alt="示例图片" class="img-thumbnail border-primary">

自定义样式

通过自定义 CSS 样式来修改缩略图的外观。

cssCopy Code
.custom-thumbnail {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

<img src="example.jpg" alt="示例图片" class="custom-thumbnail">

示例

以下是一个使用 Bootstrap 缩略图的示例：

htmlCopy Code
<div class="container">
  <h1>缩略图示例</h1>
  <div class="row">
    <div class="col-sm-4">
      <img src="example.jpg" alt="示例图片" class="img-thumbnail">
    </div>
    <div class="col-sm-4">
      <img src="example.jpg" alt="示例图片" class="img-thumbnail rounded-circle">
    </div>
    <div class="col-sm-4">
      <img src="example.jpg" alt="示例图片" class="img-thumbnail border-primary">
    </div>
  </div>
</div>