Bootstrap 网格
Bootstrap Grid
维基百科说:
"在图形设计中，网格是由一系列相交构成的结构(通常是二维的)用于构造内容的直线(垂直，水平)，广泛用于印刷设计中的布局和内容结构设计，在网页设计中，这是一种非常有效的方法，可以使用HTML和CSS快速有效地创建一致的布局。 "
Bootstrap Grid System
Bootstrap Grid System最多可在页面上显示12列。您可以单独使用所有12列，也可以将这些列组合在一起以创建更宽的列。
Bootstrap 网格系统响应迅速，并且根据屏幕尺寸自动重新排列列。
网格类:
Bootstrap Grid System中有四个类:
xs(用于手机)
sm(用于平板电脑)
md(适用于台式机)
lg(适用于大型台式机)
您可以结合使用上述类来创建更加动态和灵活的布局。
Bootstrap 网格的基本结构:
<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、
Bootstrap 网格示例
对于相等的列:
<!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-(extra small devices-屏幕宽度小于576px)
.col-sm-(small devices-屏幕宽度等于或大于576像素)
.col-md-(medium devices-屏幕宽度等于或大于768像素)
.col-lg-(large devices-屏幕宽度等于或大于992px)
.col-xl-(xlarge devices-屏幕宽度等于或大于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>
