用bootstrap写一个采用栅格系统布局，以图片和标题的形式展示四项

以下是一个使用Bootstrap栅格系统布局的示例，展示4个项目的图片和标题：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="Image 1">
        <div class="card-body">
          <h5 class="card-title">项目1</h5>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="Image 2">
        <div class="card-body">
          <h5 class="card-title">项目2</h5>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <img src="image3.jpg" class="card-img-top" alt="Image 3">
        <div class="card-body">
          <h5 class="card-title">项目3</h5>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card">
        <img src="image4.jpg" class="card-img-top" alt="Image 4">
        <div class="card-body">
          <h5 class="card-title">项目4</h5>
        </div>
      </div>
    </div>
  </div>
</div>

解释：

- `container`类定义一个容器来包含所有卡片。
- `row`类定义一个行来包含所有卡片列。
- `col-md-6 col-lg-3`类定义每个卡片列的宽度，这里的`md`表示在中等屏幕大小下占用6个列，`lg`表示在较大屏幕大小下占用3个列。
- 每个`col`包含一个`card`，`card`中包含一张图片和一个标题。
- `card-img-top`类定义图片在卡片中的位置。
- `card-title`类定义标题在卡片中的位置。

这个示例将4个项目以响应式布局的方式展示在一个容器中，在较小的屏幕上显示为两列，较大的屏幕上显示为四列。可以根据实际需求调整栅格列的宽度和卡片的内容。