本文概述
维基百科说：
“在图形设计中，网格是由一系列相交的直线（垂直，水平）线组成的结构（通常是二维的），用于构造内容。在打印设计中，网格被广泛用于设计布局和内容结构。在网页设计中，使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。”
Boostrap网格系统
Bootstrap网格系统在整个页面上最多允许12列。你可以单独使用全部12列，也可以将这些列组合在一起以创建更宽的列。
Bootstrap网格系统会响应，并且会根据屏幕大小自动重新排列列。
网格类别：
Bootstrap网格系统有四个类：
- xs（用于手机）
- sm（用于平板电脑）
- md（适用于台式机）
- lg（适用于大型台式机）
你可以组合以上类来创建更多动态和灵活的布局。
Boostrap网格的基本结构：
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>创建Bootstrap网格时，请遵循以下说明：
- 创建一行（<div class =“ row”>）。
- 在网格中添加所需的列数（带有适当的.col-*-*类的标签）。
- 请注意，.col-*-*中的数字对于每行总应总计为12。
Boostrap网格示例
对于相等的列：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Grid Example</h1>
<div class="row">
<div class="col-md-3"style="background-color:lavender;">Rahul</div>
<div class="col-md-3"style="background-color:lavenderblush;">Vijay</div>
<div class="col-md-3"style="background-color:lavender;">Kartik</div>
<div class="col-md-3"style="background-color:lavenderblush;">Ajeet</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>对于不相等的列：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Grid Example</h1>
<div class="row">
<div class="col-md-1"style="background-color:lavender;">Rahul</div>
<div class="col-md-2"style="background-color:lavenderblush;">Vijay</div>
<div class="col-md-4"style="background-color:lavender;">Kartik</div>
<div class="col-md-5"style="background-color:lavenderblush;">Ajeet</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap 4网格类
Bootstrap 4网格系统中有5个类。
- .col-（超小型设备-屏幕宽度小于576px）
- .col-sm-（小型设备-屏幕宽度等于或大于576px）
- .col-md-（中型设备-屏幕宽度等于或大于768像素）
- .col-lg-（大型设备-屏幕宽度等于或大于992px）
- .col-xl-（xlarge设备-屏幕宽度等于或大于1200px）
你还可以结合上述类来创建更多动态和灵活的布局。
Bootstrap 4网格的结构
请参阅Bootstrap 4网格的基本结构：
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>首先创建一行（<div class =“ row”>），然后添加所需的列数（带有相应的.col-*-*类的标签）。
此处：在.col-*-*中，第一个星号（*）表示响应度：sm，md，lg或xl，而第二个星号表示一个数字，每行应加起来为12。
相等列示例
让我们以示例为例，看看如何在所有设备和屏幕宽度上创建等宽的列：
例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Three equal-width columns</h2>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>不等列示例
让我们以一个示例为例，看看如何创建一个不等宽的列，该列支持平板电脑并缩放到额外的大型桌面：
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Unequal Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
