Bootstrap 的网格系统是它布局功能的核心，它基于 Flexbox，允许你创建响应式、移动优先的网页布局。它通过一系列预定义的 CSS 类来控制布局，主要基于以下几个核心概念：
-
容器 (Containers): 容器是页面布局的根元素，用于包裹和控制网格的宽度。有两种主要的容器类型：
.container: 具有响应式宽度，会根据视口大小自动调整。.container-fluid: 宽度始终为 100%，充满整个视口。
-
行 (Rows):
.row类用于创建水平的网格行。它们是列的直接父元素，并且必须放在容器内。行使用 Flexbox 的display: flex和flex-wrap: wrap，允许列在不同的屏幕尺寸下换行。 -
列 (Columns):
.col-*类用于创建垂直的网格列。*代表列的宽度，基于 12 列的网格系统。例如，.col-6占据一半的宽度，.col-4占据三分之一的宽度，.col-12占据整个宽度。 -
响应式断点 (Responsive Breakpoints): Bootstrap 定义了五个主要的断点：sm (小), md (中), lg (大), xl (超大), xxl (特大)。你可以使用这些断点来控制不同屏幕尺寸下列的宽度。例如，
.col-sm-6在小屏幕及以上占据一半宽度，.col-lg-4在大屏幕及以上占据三分之一宽度。如果没有指定断点，例如.col-6，则在所有屏幕尺寸下都占据一半宽度。 -
偏移量 (Offsets):
.offset-*类用于将列向右偏移。例如，.offset-md-4将列在中等屏幕及以上向右偏移四列的宽度。 -
嵌套列 (Nested Columns): 你可以在一行内嵌套另一行，从而创建更复杂的布局。在嵌套的行中，列的宽度仍然是相对于其直接父元素（行）的宽度计算的。
-
对齐 (Alignment): Bootstrap 提供了工具类来控制列的垂直和水平对齐，例如
.justify-content-center用于水平居中，.align-items-center用于垂直居中。
工作原理简述：
- 你将内容放在
container或container-fluid中。 - 在容器内，你使用
row创建水平的行。 - 在行内，你使用
col-*创建列，并指定它们在不同屏幕尺寸下的宽度。 - Bootstrap 的 CSS 会根据视口大小和指定的类自动调整列的宽度和布局。
示例：
<div class="container"><div class="row"><div class="col-sm-6 col-lg-4">Column 1</div><div class="col-sm-6 col-lg-8">Column 2</div></div>
</div>
在这个例子中，在小屏幕上，两列各占一半宽度；在大屏幕上，第一列占三分之一宽度，第二列占三分之二宽度。
总而言之，Bootstrap 的网格系统提供了一种灵活且易于使用的方式来创建响应式布局，通过组合不同的类，你可以轻松地控制页面元素在不同屏幕尺寸下的排列方式。
