第2章 Bootstrap 网格系统
在这一章，我们将讨论Bootstrap一个最重要的功能：网格系统。
我们将学会网格系统如何工作；我们如何在应用中使用网格系统；
我们也将创建简单的网页布局去更好的理解它。
什么是网格系统？
网格系统允许我们适当地为我们的网站内容提供服务；它将屏幕分成多个行和列，这些行和列可以用来创建各种类型的布局。一旦定义了行和列，我们就可以决定将哪个HTML元素放置在何处。
Bootstrap网格系统将屏幕划分为每行12列；列的宽度根据屏幕的大小而变化。因此，网格系统是响应式的，当浏览器窗口的大小发生变化时，这些列会动态地调整自身大小。根据您的设计需求，您可以创建无限数量的行。这些行和列的交点形成了一个矩形网格来包含网站的内容。
例如，在图2.1中，我创建了一行，然后使用网格系统把它分成12列。我已经改变了每一列的背景颜色来区分。这里的每一列都由一个数字表示。
建立一个基本的网格
在本节中，我们将使用Bootstrap网格系统创建我们的第一个网站布局。我们将使用与我们在上一章中创建的相同的设置。复制在bootdemo文件夹中存在的所有文件。然后创建一个名为chapter2的新文件夹，并将这些文件粘贴到其中。
现在打开index.html，将页面标题更改为“Bootstrap Grid System”，并从主体中删除标签。我们现在应该有一个基本的HTML页面,它看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>Bootstrap Grid System</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
➥1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Body content goes here -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Bootstrap建议我们应该把所有的行和列放在一个容器内，以确保正确的对齐和填充;Bootstrap中有两种类型的容器类:container和container-fluid，前者在浏览器窗口中创建一个固定宽度的容器，而后者创建一个填满宽度的容器。固定宽度的容器被设计为出现在屏幕的中央，在两边都省略了额外的空间。因此，将所有内容包装在一个容器中是一种很好的做法。
在我们的demo里面，我们将使用固定宽度的容器。让我们继续，在页面中创建一个container(容器)：
<div class="container">
</div>
然后，我们在container里创建一个row(行)；定义完行，我们就能开始创建列了，Bootstrap用row类来创建行；您可以创建无数行，但是它们必须放在一个容器中。为了获得更好的结果，建议使用一个单独的容器，其中包含所有行。
<div class="container">
<div class="row">
</div>
</div>
在Bootstrap中，列被创建为全屏宽度被12等分后，占据的份额。假设我们只想要一个单列，它应该跨所有12个可用的Bootstrap列；对此，我们将使用类col-xs-12,用数字12指定要跨越的列的数量,(现在，你可以忽略类名中的“xs”,我们将稍后讨论它)。
同样的，在一行中生成两个等宽的列，我们给每个列都使用类col-xs-6。这将告诉Bootstrap，我们要有两个跨过六格的列；代码如下：
<div class="container">
<div class="row">
<div class="col-xs-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-6">
<h4>Column 2</h4>
</div>
</div>
</div>
结果如图2.2所示
为了让我们的列显示清晰，让我们给题目都添加背景颜色。我们在这个项目的CSS目录下，创建一个新的CSS文件styless.css。这不是标准的文件名，你也可以把它命名其他你希望的名字。然后，我们将在我们的index.html中的<head>位置，链接这个文件。
<link href="css/styles.css" rel="stylesheet">
让我们在这个文件里添加一些CSS样式，这样每个列有不同的背景颜色。
<div class="container">
<div class="row">
<div class="col-xs-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-6 col2">
<h4>Column 2</h4>
</div>
</div>
</div>
我们也需要在我们的标记中添加类col1和col2，这样这些列会获得它们各自的CSS样式，更新后的标记如下：
但是，"col-xs-6"中的"xs"代表什么呢？Bootstrap有四种不同的类前缀，让列适应四种不同尺寸的显示器：
- col-xs 超小显示器 (屏幕宽度 < 768px)
- col-sm 小型显示器 (屏幕宽度 ≥ 768px)
- col-md 中型显示器 (屏幕宽度 ≥ 992px)
- col-lg 大型显示器 (屏幕宽度 ≥ 1200px)
【注：尽管目前Android手机的物理分辨率越来越高，但在Android手机浏览器上的浏览器分辨率通常依旧为360x600左右，因此实际上在超小显示器上旋转屏幕并不能出现期望的 col-xs样式切换为col-sm的目标】
当我们指定类col-xs-12，它意味着在超小型显示器上，这个元素将跨越全部12格。但在大型显示器上如何呢？在上面的代码中，我们没有指定该<div>元素在大型显示器上的表现。进一步的，Bootstrap将自动沿用在超小显示器上指定的布局。因此，我们代码中的<div>元素将在所有设备上跨越12格。
让我们验证下面的标记：
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
</div>
在这代码中，我们使用了col-xs-12用于超小显示器和col-sm-6用于小显示器。因此，所有列在超小显示器上跨越12格，它们将组成一列显示；但在小显示器上，它们将分别占据6格，显示成两列。如图2.4
让我们在前面的代码中再增加一行。我们将复制用于在代码中创建一行的相同代码。最终在代码中，我们的布局包含两行、四列，如下所示:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</div>
</div>
</div>
我增加了两个新的类col3和col4,用来给我们的列提供不同的背景颜色。
.col3{
background: #E8AA4C;
}
.col4{
background: #FF384E;
}
运行结果如图2.5所示
案例学习：创建动态布局
让我们看看如何将网格系统付诸实践，创建一个动态布局，以适应它所被查看的设备的大小。
假设我们使用Bootstrap创建一个博客的布局；我们给出了它的桌面显示线框图，如图2.6所示
在线框中，我们有一个横跨整个网站宽度的标题。然后我们有一个包含博客文章的三栏布局。如果我们在平板电脑(竖屏模式)看到同样的布局，它看起来非常笨拙。因此，我们重新设计了用于平板模式的线框，如图2.7所示
在这个设计中，我们看到标题看起来与桌面模式相同。下面的帖子现在被包含在一个两栏的布局中，而不是三个。接下来，我们需要在移动设备上查看相同的网站。移动显示的线框如图2.8所示。
我们刚刚将这两列转换为移动设计中的一列。
让我们讨论如何在标记中实现此设计。
桌面显示下的设计
如前所述，中型显示器被认为大于992px。桌面显示大部分都比这个大。因此，我们将使用带有前缀col-md的类在桌面显示中列出列。这个布局也会被遵循较大的显示大于1200px，因此对于这个设计我们可以忽略添加带有前缀col-lg的类，因为它们对布局没有额外的影响。
创建一个名为blog.html的新HTML文件。将在前一章使用过的包含Bootstrap的基本的HTML结构粘贴到这里；把<title>标签的内容改为“My First Bootstrap Website”，并从body中删除<h1>标签。blog.html的代码，应该是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>My First Bootstrap Website</title>
<link rel="stylesheet" type="text/css"
➥href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
➥1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Body content goes here -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
我们需要首先制作一个容器来保存所有的博客内容。让我们使用一个固定宽度容器使用类container:
<div class="container">
</div>
接下来，我们在桌面线框中有一个标题。让我们创建一个行，它包含一个列，它跨越了所有12格。
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
</div>
在上面的代码中，我使用了Bootstrap的帮助类text-center来对齐列中的文本。我们现在已经完成了它的头部。
现在，创建一个包含博客文章的三栏布局。因为我们有一个总共12个引导列，我们将让我们的专栏跨越4个Bootstrap每一列。这样我们就有3个同样大小的列。我们设计一种新的行并开始使用类col-md-4:
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
在两行之间，我使用了<hr>标签画了一条水平线。
是时候用一些虚拟的内容填充这些列了。我们将使用一个<h3>标签和一个<p>标签和一些lorem ipsum文本(用于检测的文字，没有实际含义)来达到这个目的:
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
➥elit, sed do eiusmod tempor incididunt ut labore et dolore magna
➥aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
➥elit, sed do eiusmod tempor incididunt ut labore et dolore magna
➥aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
➥elit, sed do eiusmod tempor incididunt ut labore et dolore magna
➥aliqua. </p>
</div>
</div>
</div>
The blog.html如图2.9所示
对于桌面版显示的线框，我们还剩下三列的博客文章。这一次，我们不会为接下来的三列创建单独的行。相反，我们将直接将这些列附加到现有的行中。你可能想知道我们怎么能有24列(6列在每一行中跨越4个引导列)。嗯,Bootstrap只允许在一行中使用12个引导列。如果我们试着超过这个，剩下的这些列将被调整到下一行。这条新线将再次出现12个引导列的容量。这样，我们就可以将所有的博客文章列绑定到单个行中。
让我们继续使用三个新列来更新代码:
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
最后，我们将桌面线框转换为HTML页面，如图2.10所示。
平板显示下的设计
现在，让我们修改代码，以实现平板电脑的线框布局。与桌面显示器不同，平板电脑可以用两种模式观看:竖屏-肖像(Portrait)和横屏-景观(Landscape);平板电脑的景观模式被认为是中等大小的显示器(屏幕宽度为992px);我们已经使用了colmd-md-类。我们现在只剩下了竖屏视图，这是一个小型显示器。这可以通过使用colsm-sm来实现。
由于我们必须在较小的显示器上实现两列布局，我们必须强制每一列跨越6格。这样，在每一行中，我们只得到两列(2x6格=12格)。但这里只有一行。因此，一旦所有的12个格都被占用，剩下的列将出现在下一行中，每次创建一个新的行。
让我们继续，在桌面布局代码中添加一个额外的类:col-sm-6：
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
这样，如图2.11所示，我们有两种用于平板的布局:一种是横向模式的三栏布局，一种是竖屏模式的两栏布局。
移动设备上的设计
和平板电脑一样，移动设备也可以在风景和人像模式下观看。移动设备中的景观视图利用小型显示器(屏幕宽度768px)，我们已经使用了colsm-sm类。移动设备中的竖屏视图使用了额外的小型显示器(屏幕宽度小于768px)。
对于移动设备的线框，我们必须创建一个单列布局。我希望您已经知道如何在上述代码中实现它。对于额外的小屏幕，我们必须使用具有col_xs前缀的类。这里，我们希望每个博客文章的列占据所有12个引导列，这样我们就可以每一行只有一篇博客文章。我们的类将是col-xs-12，所以让我们继续并将这个类添加到我们的代码中:
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
最后，我们有一个完整的HTML页面响应式，并在任何类型上工作显示的一列布局如图2。12所示。你甚至可以使用一个免费的基于云的服务，如Google drive 1，然后在实际的平板电脑或移动设备上进行测试;或者，手动调整浏览器宽度，动态地观察布局变化。我希望您在理解引导程序的网格系统时发现这个案例研究很有用。
嵌套列
你可以在布局中任意列中创建一套新的12格Bootstrap网格。这可以通过在一个现有的列中构建一个新的行元素来完成，然后用自定义的列填充这一行。由于我们在这里启动了一个新行，其中的任何列都可以跨12格，但是这一行的宽度将被限制到它的父类的宽度。
让我们用一个例子来说明这个问题。在项目中创建一个新的HTML文件nested.html；如同之前章节讨论的一样，在这个HTML文件中关联Bootstrap设置，另外，关联我们早先设置的styles.css。这个文件看起来应该如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>My First Bootstrap Website</title>
<link rel="stylesheet" type="text/css"
➥href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
➥1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
让我们在其<body>中创建一个container和一个row；
<div class="container">
<div class="row">
</div>
</div>
针对中型显示器，我们将构建一个两列布局。到目前为止,我们知道，要创建一个双列布局，我们应该将我们的列设为6格。因此，生成此类列的类将是col-md-6。让我们为前面的标记添加两列:
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
在这段代码中，我们还从样式中提取了两个类。css文件:col1和col2。这两个类将帮助我们为我们的列提供一些背景颜色。现在，HTML页面应该类似于图2.13的屏幕快照。
现在让我们在第一列“Column 1”中进行嵌套，并在其中新建一行:
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
当我们有一个新的行，让我们在它里面再形成两列:
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
正如您在图2.14中所看到的，这两个新列现在被放置在第一列中。这里我调用了styless.css中的样式col3和col4，用于提供背景颜色。
在创建复杂的布局时，可以方便地嵌套列。您还可以进一步嵌套最内部的行，并在其中生成一组新的列。这个过程可以一直持续下去，直到您达到所需的布局。
偏移列（Offsetting Columns）
偏移，是Bootstrap网格系统的另一个大功能。它通常用于增加一个列的左边缘。如果你有一个列要显示在三格之后，你可以使用偏移功能。
可用于偏移的类包括：
col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*
假设我们希望在超小型显示器上把一列向右偏移三格，我们可以用"col-xs-offset-3"，例如：
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col1">
<h1>Hello Learnable!</h1>
</div>
</div>
这段代码的结果是，如图2.15所示：跨越六格的列向右偏移三格。
把你的列居中
请注意，这列的左右两侧都有三格的间隙。这是一种实现占屏幕宽度一半的列居中的好办法。
手工渲染网格（重新排序）
我们也可以不理睬列在代码中的顺序，对它重新排序。如果我们先写了一个"col-md-9"的列，然后写了一个"col-md-3"的列；我们可以轻易的调换它们在页面上的位置，方法是使用Bootstrap的类：pull和push。
<div class="row">
<div class="col-xs-9 col-xs-push-3">
<h1>Pushed Column</h1>
</div>
<div class="col-xs-3 col-xs-pull-9">
<h1>Pulled Column</h1>
</div>
</div>
在这代码中，"col-md-9"的列被推了3格，所以移向了右侧，"col-md-3"的列也被向左拉了9格。因此，它们看起好好像在浏览器中交换了原来的位置。
这里列出了每一种显示设备上对应的push和pull类
col-xs-pull-* 和 col-xs-push-* 超小屏幕
col-sm-pull-* 和 col-sm-push-* 小型屏幕
col-md-pull-* 和 col-md-push-* 中型屏幕
col-lg-pull-* 和 col-lg-push-* 大型屏幕
你可以把“*”替换成12以内的数字，去推或拉。
小结
您可以使用Bootstrap的网格系统来生成几乎任何类型的网站布局。
如果使用得当，你可以设计一个可以工作在几乎任何类型的显示设备的美观且响应迅速的网站。诸如嵌套、偏移和重新排序的功能，也让网格系统变的更强大。
