bootstrap 的图片排列

Bootstrap 提供了几种图片排列的方式，可以通过以下类名来实现：

1. `img-fluid`：图片自适应容器大小，可以在任何父容器中使用。

2. `rounded`：为图片添加圆角。

3. `rounded-circle`：将图片裁剪成圆形。

4. `float-left` 和 `float-right`：将图片浮动到左边或右边，允许文字环绕图片。

5. `mx-auto d-block`：水平居中图片，需要一个固定宽度的父容器。

6. `img-thumbnail`：为图片添加缩略图效果。

以下是一个例子，演示了如何使用这些类名来排列图片：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="image1.jpg" class="img-fluid rounded mb-3" alt="图片1">
    </div>
    <div class="col-md-6">
      <img src="image2.jpg" class="img-fluid rounded-circle float-right mb-3" alt="图片2">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img src="image3.jpg" class="mx-auto d-block img-thumbnail" alt="图片3">
    </div>
    <div class="col-md-4">
      <img src="image4.jpg" class="mx-auto d-block img-thumbnail" alt="图片4">
    </div>
    <div class="col-md-4">
      <img src="image5.jpg" class="mx-auto d-block img-thumbnail" alt="图片5">
    </div>
  </div>
</div>

这个例子中，我们使用 `container` 和 `row` 创建了一个网格布局，其中包含了两行图片。第一行中，我们使用了 `col-md-6` 将两张图片分别放置在两个半宽度的列中。第二行中，我们使用了 `col-md-4` 将三张图片放置在三个等宽的列中。在每个列中，我们使用了不同的类名来排列图片。