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-* 类创建行和列。
<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 列的主区域。
