1. 响应式图片：
使用 .img-fluid 类可以创建响应式图片，使得图片在不同屏幕尺寸下自动调整大小：
<img src="your-image.jpg" class="img-fluid" alt="Responsive Image">
2. 图片形状：
使用以下类可以设置图片的形状：
- .rounded：圆角图片。
- .rounded-circle：圆形图片。
- .rounded-pill：圆柱形图片。
- .rounded-0：无圆角图片。
示例：
<img src="your-image.jpg" class="rounded" alt="Rounded Image">
3. 图片边框：
使用 .rounded 类可以为图片添加边框，你可以使用 .border 类来指定边框的颜色：
<img src="your-image.jpg" class="rounded border border-primary" alt="Image with Border">
4. 图片轮廓：
使用 .img-thumbnail 类可以创建带有轮廓的缩略图：
<img src="your-image.jpg" class="img-thumbnail" alt="Thumbnail Image">
5. 图片浮动：
使用 .float-left 或 .float-right 类可以使图片浮动到左侧或右侧：
<img src="your-image.jpg" class="float-left" alt="Left Floated Image">
或者：
<img src="your-image.jpg" class="float-right" alt="Right Floated Image">
6. 图片轮播：
如果你想创建一个轮播（Carousel）组件，可以使用 Bootstrap 提供的 Carousel 组件。这样可以实现多张图片之间的切换效果。
示例：
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Second Slide">
</div>
<!-- 更多轮播项 -->
</div>
<!-- 轮播控制按钮等 -->
</div>
以上是 Bootstrap 4 中图片设置的一些常见类。你可以根据具体的需求在不同的图片上应用这些类来调整样式。确保查阅 [Bootstrap 4 文档中的 Images 部分](https://getbootstrap.com/docs/4.6/content/images/) 以获取更多详细的信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5486/Bootstrap