Bootstrap 网格系统是一个响应式的、移动设备优先的布局框架，它使用一系列的行（rows）和列（columns）来创建页面布局。这个系统基于12列的布局，可以根据不同的屏幕尺寸进行响应式调整。
网格系统如何工作
容器（Container）：所有的网格布局都应该放在一个容器内，容器可以控制内容的宽度并提供内边距。容器分为两种：
.container（固定宽度）和.container-fluid（100% 宽度）。行（Row）：行是一个水平布局的容器，用于包裹列。在容器内部，你可以使用
.row类来创建行。列（Column）：列必须放置在行内，且列是行的直接子元素。列使用
.col-加上前缀类（如.col-md-）和数字（如4）来定义在不同屏幕尺寸下的宽度。预定义的网格类：Bootstrap 提供了预定义的网格类，如
.col-xs-4，用于快速创建网格布局。列的间隙：列通过内边距创建内容之间的间隙，而行的外边距则用于创建列的偏移。
媒体查询：Bootstrap 使用媒体查询来实现响应式布局，允许你根据不同的屏幕尺寸应用不同的样式。
代码示例
以下是一个简单的网格系统示例，展示了如何在不同屏幕尺寸下创建相等的列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid System Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- 行 -->
<div class="row">
<!-- 列 -->
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<!-- 引入Bootstrap JS和jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个例子中，我们创建了一个包含三个相等列的行，每个列在中等设备（如平板电脑）上占据4个网格单元。
