bootstrap网格grid bootstrap网格|Bootstrap教程

本文概述

Bootstrap 4网格类
Bootstrap 4网格的结构
相等列示例
不等列示例

维基百科说：
“在图形设计中，网格是由一系列相交的直线（垂直，水平）线组成的结构（通常是二维的），用于构造内容。在打印设计中，网格被广泛用于设计布局和内容结构。在网页设计中，使用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="http://img.readke.com/220416/150U04910-2.jpg">< /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="http://img.readke.com/220416/150U04910-2.jpg">< /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="http://img.readke.com/220416/150U02N2-6.jpg">< /script> < script src="http://img.readke.com/220416/150U02R3-7.jpg">< /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>

不等列示例【bootstrap网格grid】让我们以一个示例为例，看看如何创建一个不等宽的列，该列支持平板电脑并缩放到额外的大型桌面：
例：

< !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="http://img.readke.com/220416/150U02N2-6.jpg">< /script> < script src="http://img.readke.com/220416/150U02R3-7.jpg">< /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>