使用 Bootstrap 布局网站，需要使用网格系统，将页面划分为容器、行和列。首先添加容器，然后在其中添加行，并在行内添加列，最后在列中添加内容。Bootstrap 的响应式布局功能根据断点（xs、sm、md、lg、xl）自动调整布局，通过使用响应式类可以实现不同屏幕尺寸下的不同布局。
Bootstrap 布局指导
如何使用 Bootstrap 进行布局？
Bootstrap 是一个用于快速开发响应式、移动优先网站和应用程序的 CSS 框架。它提供了一系列预建类和组件，可用于轻松创建网站布局。
Bootstrap 布局结构
Bootstrap 使用网格系统组织内容，该系统将页面划分为水平行和垂直列。基本网格结构如下：
- 容器（Container）： 包含整个页面内容。
- 行（Row）： 定义水平行，其中包含列。
- 列（Column）： 指定内容在行中占用的宽度。
创建布局的步骤
-
添加容器： 使用
<div class="container">创建容器。 -
添加行： 在容器内创建行，使用
<div class="row">。 -
添加列： 在行内添加列，使用
<div class="col-*">，其中*指定列宽度（例如，col-6表示占一行中 6/12 宽度的列）。 - 设置内容： 将内容添加到列中。
Bootstrap 响应式布局
Bootstrap 的响应式布局功能允许网站根据浏览器或设备大小自动调整。Bootstrap 使用断点来定义屏幕尺寸范围，并根据每个断点调整布局。断点如下：
| 断点 | 屏幕宽度 |
|---|---|
xs |
≤575px |
sm |
≥576px |
md |
≥768px |
lg |
≥992px |
xl |
≥1200px |
使用 Bootstrap 响应式类的示例
创建一个在中等和大型屏幕上为三列布局，在小屏幕上为单列布局的容器：
<code class="html"><div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">列1</div>
<div class="col-md-4 col-lg-4">列2</div>
<div class="col-md-4 col-lg-4">列3</div>
</div>
</div></code> 
