Bootstrap 网格

Bootstrap Grid

维基百科说:

"在图形设计中，网格是由一系列相交构成的结构(通常是二维的)用于构造内容的直线(垂直，水平)，广泛用于印刷设计中的布局和内容结构设计，在网页设计中，这是一种非常有效的方法，可以使用HTML和CSS快速有效地创建一致的布局。 "

Bootstrap Grid System

Bootstrap Grid System最多可在页面上显示12列。您可以单独使用所有12列，也可以将这些列组合在一起以创建更宽的列。

Bootstrap 网格_https://bianchenghao6.com_【Bootstrap 教程】_第1张

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>

Bootstrap 示例

Bootstrap 自动完成搜索