Bootstrap 5 容器与网格系统详解

一、容器 - Bootstrap的基础构建块

Bootstrap需要容器元素来包裹网站内容，提供两种主要选择：

• .container - 固定宽度并支持响应式布局
• .container-fluid - 100%宽度，占据全部视口

1. 固定宽度容器

.container创建固定宽度的响应式页面，其宽度会根据屏幕尺寸自动调整：

<div class="container"><!-- 内容放这里 -->
</div>

2. 全屏宽度容器

.container-fluid创建始终占据100%屏幕宽度的容器：

<div class="container-fluid"><!-- 内容放这里 -->
</div>

3. 响应式容器

Bootstrap 5提供多种响应式容器类型：

• .container-sm (≥576px)
• .container-md (≥768px)
• .container-lg (≥992px)
• .container-xl (≥1200px)
• .container-xxl (≥1400px)

二、网格系统 - 12列响应式布局

Bootstrap提供强大的网格系统，将页面划分为最多12列。

1. 网格类

• .col- - 适用所有设备
• .col-sm- - 平板 (≥576px)
• .col-md- - 桌面显示器 (≥768px)
• .col-lg- - 大桌面显示器 (≥992px)
• .col-xl- - 特大桌面显示器 (≥1200px)
• .col-xxl- - 超大桌面显示器 (≥1400px)

2. 交叉轴对齐

<div class="row align-items-start"><div class="col-3">列1</div><div class="col-5">列2</div><div class="col-4">列3</div>
</div>

常用对齐类：

• align-items-start - 顶部对齐
• align-items-center - 中间对齐
• align-items-end - 底部对齐

3. 主轴对齐

<div class="row justify-content-start"><div class="col-4">列1</div><div class="col-4">列2</div>
</div>

常用对齐类：

• justify-content-start - 左对齐
• justify-content-center - 居中对齐
• justify-content-end - 右对齐
• justify-content-between - 两端对齐
• justify-content-around - 均匀分布

4. 高级布局技巧

列自动换行

当一行中的列宽总和超过12时，额外的列会自动换行：

<div class="row"><div class="col-9">占9格</div><div class="col-4">占4格，自动换行</div><div class="col-6">新行中占6格</div>
</div>

强制分栏

使用w-100实现强制换行：

<div class="row"><div class="col-6">上行列1</div><div class="col-6">上行列2</div><div class="w-100"></div><div class="col-6">下行列1</div><div class="col-6">下行列2</div>
</div>

列偏移

使用.offset-*类控制列的位置：

<div class="row"><div class="col-md-4">第一列</div><div class="col-md-4 offset-md-4">偏移4格的列</div>
</div>

列排序

使用.order-*自定义列的显示顺序：

<div class="row"><div class="col">正常顺序</div><div class="col order-5">显示最后</div><div class="col order-1">显示最前</div>
</div>

三、文本与标题样式

1. Display标题类

<h1 class="display-1">超大标题</h1>
<h1 class="display-2">大标题</h1>
<!-- 从display-1到display-6 -->

2. 段落样式

<p>普通段落</p>
<p class="lead">引人注目的段落</p>

3. 文本对齐

<p class="text-start">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-end">右对齐文本</p>

4. 响应式文本对齐

<p class="text-md-center">在中等屏幕及以上居中显示</p>

5. 文本转换

<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>

以上内容全面介绍了Bootstrap 5的容器和网格系统，这些是构建响应式网站的基础。掌握这些技巧将使您能够创建适应各种屏幕尺寸的现代网站布局。