Bootstrap布局是一种前端框架，提供可重复使用的组件，简化响应式网页开发。其布局系统基于12列网格，使用.row和.col-类创建行和列。响应类(.col-{size}-{cols})可根据设备尺寸调整列大小。对齐类(.text-)用于对齐元素，偏移类(.offset-* )可从网格开始处偏移列。

Bootstrap 布局：指南

什么是 Bootstrap 布局？

Bootstrap 是一种流行的前端框架，它提供了一组可重复使用的 HTML 和 CSS 组件，旨在简化响应式网页的开发。其布局系统使开发人员能够轻松创建基于网格的网页。

使用 Bootstrap 布局

要使用 Bootstrap 布局，您需要：

1. 包含 Bootstrap 库：

<code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></code>

2. 使用网格系统：

Bootstrap 网格系统由一行 12 列组成。您可以使用 .row 和 .col-* 类创建行和列。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<code class="html"><div class="row">
  <div class="col-sm-6">内容</div>
  <div class="col-sm-6">内容</div>
</div></code>

3. 指定响应大小：

Bootstrap 提供了响应类来响应不同的设备尺寸。使用 .col-*-* 形式的类，其中 和 分别表示设备大小和列大小。

<code class="html"><div class="col-md-4">内容（在中型设备上占 4 列）</div></code>

4. 对齐元素：

您可以使用 .text-* 类对齐元素，例如 .text-left、.text-center、.text-right。

<code class="html"><p class="text-center">居中文本</p></code>

5. 偏移列：.offset-*` 类允许您偏移列相对于网格的开始。

<code class="html"><div class="offset-md-4">内容（在中型设备上从第 5 列开始）</div></code>

示例布局

以下是一个简单的布局示例：

<code class="html"><div class="container">
  <div class="row">
    <div class="col-sm-3">侧边栏</div>
    <div class="col-sm-9">正文区域</div>
  </div>
</div></code>

此布局在较小屏幕上显示一个 3 列的侧边栏和一个 9 列的主区域，而在较大屏幕上则显示一个 4 列的侧边栏和一个 8 列的主区域。