Bootstrap 图片

Bootstrap 图片

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网站。在 Bootstrap 中，图片的处理主要涉及到响应式图片和图片样式。本文将详细介绍 Bootstrap 中如何使用图片，包括基本的图片样式、响应式图片以及图片类的使用。

基本图片样式

在 Bootstrap 中，你可以使用以下几种基本的图片样式：

1. .img-fluid：这个类用于创建响应式图片，其最大宽度为 100%，高度自动调整。
2. .img-thumbnail：这个类用于给图片添加边框和圆角，使其看起来像缩略图。
3. .img-rounded：这个类用于给图片添加圆角（已废弃，建议使用 .rounded 类）。
4. .img-circle：这个类用于将图片转换为圆形（已废弃，建议使用 .rounded-circle 类）。

示例代码

<!-- 响应式图片 -->
<img src="example.jpg" class="img-fluid" alt="Responsive image"><!-- 缩略图 -->
<img src="example.jpg" class="img-thumbnail" alt="Thumbnail"><!-- 圆角图片 -->
<img src&