网格系统基础
Bootstrap网格系统使用一系列容器、行和列来布局和对齐内容。它是基于flexbox构建的，并且完全响应式。
网格系统的基本结构：
- 容器 (Container) - 容纳行和列的基本元素
- 行 (Row) - 水平分组列的水平容器
- 列 (Column) - 实际内容的垂直容器
Bootstrap网格系统将屏幕分为12列，您可以通过指定列类来定义元素占据的列数。
网格结构可视化
.col (自动列)
.col-6 (6/12)
.col-6 (6/12)
.col-4 (4/12)
.col-4 (4/12)
.col-4 (4/12)
.col-3 (3/12)
.col-6 (6/12)
.col-3 (3/12)
网格类
基本列类
使用 .col-{breakpoint}-{columns} 格式的类来定义列在不同断点下的宽度。
例如：
.col-12- 在所有屏幕宽度下占据12列.col-md-6- 在中等屏幕及以上占据6列.col-lg-4- 在大屏幕及以上占据4列
如果没有指定断点，类将应用于所有屏幕尺寸。
自动布局列
使用 .col 或 .col-{breakpoint} 类创建自动调整宽度的列。
例如：
.col- 在所有屏幕宽度下自动调整.col-md- 在中等屏幕及以上自动调整
自动布局列会根据内容自动分配可用空间。
<div class="row">
<div class="col">自动列1</div>
<div class="col">自动列2</div>
<div class="col">自动列3</div>
</div>响应式断点
Bootstrap 5 包含六个断点，用于构建响应式设计。
xs <576px
超小屏幕，默认样式适用于所有屏幕尺寸。
类前缀：无（默认）
sm ≥576px
小屏幕，如智能手机横向模式。
类前缀：.col-sm-
md ≥768px
中等屏幕，如平板电脑。
类前缀：.col-md-
lg ≥992px
大屏幕，如笔记本电脑。
类前缀：.col-lg-
xl ≥1200px
超大屏幕，如桌面显示器。
类前缀：.col-xl-
xxl ≥1400px
特大屏幕，如大型显示器。
类前缀：.col-xxl-
网格系统示例
等宽列
使用 .col 创建等宽列，无论列数多少。
.col
.col
.col
.col
.col
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>设置一列宽度
设置一列宽度，其余列自动调整。
.col
.col-6
.col
<div class="row">
<div class="col">.col</div>
<div class="col-6">.col-6</div>
<div class="col">.col</div>
</div>响应式网格
在不同断点下使用不同的列布局。
.col-md-8
.col-md-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
<div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
<div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
</div>混合固定宽度和自动宽度
混合使用固定宽度和自动宽度列。
.col
.col-5
.col
<div class="row">
<div class="col">.col</div>
<div class="col-5">.col-5</div>
<div class="col">.col</div>
</div>行内列
使用 .row-cols-* 类快速设置每行的列数。
行内列 1
行内列 2
行内列 3
行内列 4
<div class="row row-cols-2">
<div class="col">行内列 1</div>
<div class="col">行内列 2</div>
<div class="col">行内列 3</div>
<div class="col">行内列 4</div>
</div>高级网格功能
垂直对齐
使用 .align-items-* 类垂直对齐行内的列。
顶部对齐
顶部对齐
顶部对齐
居中对齐
居中对齐
居中对齐
底部对齐
底部对齐
底部对齐
水平对齐
使用 .justify-content-* 类水平对齐行内的列。
左对齐
左对齐
居中对齐
居中对齐
右对齐
右对齐
周围分布
周围分布
两端对齐
两端对齐
列排序
使用 .order-* 类改变列的视觉顺序。
第一列，但视觉顺序第三
第二列，但视觉顺序第一
第三列，但视觉顺序第二
<div class="row">
<div class="col order-3">第一列</div>
<div class="col order-1">第二列</div>
<div class="col order-2">第三列</div>
</div>偏移列
使用 .offset-* 类将列向右偏移。
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>网格系统最佳实践
移动优先设计
- 首先为小屏幕设计，然后逐渐添加更大屏幕的样式
- 使用断点前缀类实现响应式布局
- 测试在不同设备上的显示效果
合理使用列
- 确保列的总和不超过12
- 使用自动列简化布局
- 避免过度嵌套，保持结构清晰
内容优先
- 根据内容需求设计布局
- 确保内容在不同屏幕尺寸下都易于阅读
- 考虑内容的层次结构和重要性
保持简洁
- 避免不必要的复杂布局
- 使用实用类简化样式
- 遵循一致性原则，保持设计统一