Bootstrap Img 类介绍

Bootstrap 是一个前端开发框架，它提供了一系列的 CSS 和 JavaScript 组件，可以方便地构建响应式、移动设备优先的网页。

其中，Img 类是一个用于图片的样式类，可以使图片更加美观和易于操作。

基本用法

在 HTML 中，可以给 <img> 标签添加 class="img-fluid" 属性，这样图片就会变成响应式的，随着浏览器窗口大小的改变而改变大小。

<img src="example.jpg" class="img-fluid" alt="example">

此外，还可以使用 Img 类的一些其他属性，例如：

• rounded：设置圆角
• circle：设置为圆形
• thumbnail：设置为缩略图效果
• float-left 和 float-right：使图片向左或向右浮动

<img src="example.jpg" class="rounded-circle float-left" alt="example" width="150">

响应式图片

在移动设备上，宽屏的图片不仅浪费空间，还会导致加载缓慢。可以使用 Bootstrap 提供的多种响应式图片类来解决这个问题。

例如，可以设置不同的图片大小和分辨率，使得在不同设备上显示的图片大小和清晰度不同：

<img src="example-large.jpg" class="img-fluid d-none d-md-block" alt="example-large">
<img src="example-medium.jpg" class="img-fluid d-md-none d-lg-block" alt="example-medium">
<img src="example-small.jpg" class="img-fluid d-lg-none" alt="example-small">

这里，d-none 和 d-* 类用于控制不同屏幕大小下的显示状态，* 可以是 sm、md、lg 或 xl。

总结

Bootstrap 的 Img 类提供了丰富的样式和属性，可以使图片更加美观、易于操作，并且还具备响应式的特性。如果你需要开发响应式、移动设备优先的网页，推荐使用 Bootstrap 构建你的网站。