📌  相关文章
📜  bootstrap 4 图像缩略图类 - Html (1)

📅  最后修改于: 2023-12-03 14:39:33.310000             🧑  作者: Mango

Bootstrap 4 图像缩略图类 - HTML

Bootstrap是一个流行的前端框架，其提供了基于HTML、CSS和JavaScript的轻量级设计和开发工具集。Bootstrap 4是Bootstrap的最新版本，提供了许多新的功能和组件，其中包括图像缩略图类，本文将介绍如何使用它。

图像缩略图类的基本结构

图像缩略图类通常用于显示图像库或产品的缩略图。在Bootstrap 4中，图像缩略图类的基本结构如下：

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="img-thumbnail">
         </a>
      </div>
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="img-thumbnail">
         </a>
      </div>
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="img-thumbnail">
         </a>
      </div>
   </div>
</div>
  • container ：用于制作响应式布局；
  • row ：将内容包裹在行内；
  • col-md-4 ：将内部内容分成三个等宽的列大小（对于中等屏幕）；
  • a标签：链接到图片的来源；
  • img-thumbnail ： 图像缩略图类，使图像周围有一定程度的填充。
图像缩略图类的属性

在Bootstrap 4中，图像缩略图类有以下属性：

| 属性 | 描述 | | ---- | ------------------------- | | .img-thumbnail | 使图像周围有一定程度的填充。|

自定义图像缩略图类

可以通过添加自定义样式表来自定义图像缩略图类。例如，以下代码使用自定义样式表创建圆形图像缩略图：

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="rounded-circle my-thumbnail">
         </a>
      </div>
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="rounded-circle my-thumbnail">
         </a>
      </div>
      <div class="col-md-4">
         <a href="#">
            <img src="image.jpg" alt="" class="rounded-circle my-thumbnail">
         </a>
      </div>
   </div>
</div>

在此示例中，我们使用了自定义的类 .my-thumbnail，并在样式表中定义此类来创建圆形图像：

.my-thumbnail {
  border-radius: 50%;
}
结论

如您所见，在Bootstrap 4中，创建并自定义图像缩略图类是比较容易的。只需添加一个类 .img-thumbnail，就可以为图像添加填充。或者，我们可以使用自定义类和样式表来创建自定义图像缩略图类。

希望本文有帮助，感谢您的阅读！

参考资料