bookstrap删格布局

Bootstrap 栅格系统是一种响应式布局的解决方案，用于在不同屏幕尺寸下创建网页布局。栅格系统将页面水平分为12列，并使用类名来定义元素在不同屏幕尺寸下所占的列数。

要使用 Bootstrap 栅格系统，你可以在 HTML 文件中引入 Bootstrap 的 CSS 文件，然后使用以下类名来创建不同的布局：

- `.container`：用于包裹整个内容区域的容器。
- `.row`：用于创建行，行内的列将会自动换行。
- `.col-*-*`：用于定义列的大小。第一个星号表示在小屏幕下占据的列数（最大为12），第二个星号表示在中屏幕下占据的列数，第三个星号表示在大屏幕下占据的列数。

下面是一个示例代码，展示如何使用 Bootstrap 栅格系统创建一个简单的布局：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这是第一列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这是第二列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这是第三列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这是第四列 -->
    </div>
  </div>
</div>

在上面的代码中，每个列占据了不同的屏幕尺寸下的列数，以创建一个响应式的布局。你可以根据自己的需求进行调整和扩展。