Bootstrap 网格系统是一套响应式布局工具，它通过一系列的行（rows）和列（columns）来创建页面布局。这套系统基于12列的布局，随着屏幕或视口（viewport）尺寸的增加，内容可以自动扩展。
网格系统的基础
容器（Container）：网格系统的开始，通常使用
.container类来创建一个固定宽度的容器，它居中对齐并包含内容。行（Row）：行是一个水平布局的容器，用于包裹列。每个行都应该包含在
.container内。使用.row类来创建行。列（Column）：列是行内的垂直容器，用于包含内容。列的宽度是通过指定它们应该跨越的列数来确定的。使用
.col-xs-*、.col-sm-*、.col-md-*、.col-lg-*类来创建列，其中*表示跨越的列数。响应式列：Bootstrap 网格系统是响应式的，这意味着列可以根据不同的屏幕尺寸自动调整大小。通过使用不同的媒体查询，可以为不同设备设置不同的列宽度。
代码示例
以下是一个简单的Bootstrap网格系统的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid System Example</title>
<!-- 引入Bootstrap CSS -->
<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个网格单元。
响应式媒体查询
Bootstrap 使用媒体查询来实现响应式布局。媒体查询允许你根据不同的屏幕尺寸应用不同的CSS样式。Bootstrap定义了一系列断点（如@screen-sm-min、@screen-md-min等），这些断点对应于不同的设备尺寸。
/* 小型设备（平板电脑，大于等于768px） */
@media (min-width: 768px) {
... }
/* 中型设备（台式电脑，大于等于992px） */
@media (min-width: 992px) {
... }
/* 大型设备（大台式电脑，大于等于1200px） */
@media (min-width: 1200px) {
... }
在这些媒体查询中，你可以定义不同设备尺寸下的列宽度。例如，你可以为手机、平板电脑和桌面设备设置不同的列宽度：
/* 超小设备 */
.col-xs-12 {
... }
/* 小型设备 */
@media (min-width: 768px) {
.col-sm-6 {
... }
}
/* 中型设备 */
@media (min-width: 992px) {
.col-md-4 {
... }
}
/* 大型设备 */
@media (min-width: 1200px) {
.col-lg-3 {
... }
}
