引导你的网页 2 - 响应式布局

Peter Leow

5.00/5 (12投票s)

2016 年 2 月 17 日

CPOL

10分钟阅读

18854

熟悉 Bootstrap 强大、通用、响应式且移动优先的网格系统。

前言

接续上一篇文章 Bootstrapping Your Web Pages 1 – 准备工作。在为网页选择了 Bootstrap 容器后，您现在可以将注意力转移到设计响应式布局上，使其能够适应移动电话、平板电脑、笔记本电脑和台式机等不同类型的设备，并能适应容器内的布局。为此，您必须牢固掌握 Bootstrap 的网格系统。

介绍 Bootstrap 网格

打开您在上篇文章中创建的“bootstrap_starter_template.html”文件，或者在此处下载，将其另存为新名称，例如“bootstrap_grid.html”，然后将以下代码插入到 <body> 部分。

<div class="container">
  <div style="background-color:#CFF">content 1</div>
  <div style="background-color:#9FC">content 2</div>
</div>

在浏览器中，这两个内部 <div> 会垂直堆叠并占据全部宽度，无论显示设备如何，如图 1 所示，或者访问在线演示。

Figure 1: Default Grid-less Layout — 图 1：无网格布局

图 1 中所示的无网格布局更适用于非常小的手机屏幕。对于较大的设备，您可能希望在页面中的一行中将列并排放置。让我们看看如何使用 Bootstrap 的网格系统来实现这一点。

Bootstrap 通过一个响应式、移动优先的网格系统来创建页面布局，该系统由水平排列的列或单元格组成，这些单元格由 <div> 标签构成，用于容纳实际的网页内容，并根据屏幕尺寸进行更改。

在其基本形式中，Bootstrap 网格中的每一行可以在页面上容纳多达十二个单列。您可以将多个单列组合起来创建更宽的列。

十二列网格

Bootstrap 的基本网格允许单行最多包含十二列，我称之为“十二列网格”。请按照以下步骤操作：

将两个 <div> 包装在包含的 <div class="row"> 中；
为两个 <div> 分别分配数字 12 的一个分数，例如 4 和 8，这表示每个 div 占据的列数。这些数字加起来必须等于十二，这是页面水平方向允许的最大列数。
指定您希望它们在屏幕上并排显示在单行中的最小设备类型，例如 Bootstrap 中表示为 sm 的平板电脑。

生成的代码如下所示。

<div class="container">
  <div class="row">
	<div class="col-sm-4" style="background-color:#CFF">content 1</div>
 	<div class="col-sm-8" style="background-color:#9FC">content 2</div>
  </div> 
</div>

class="col-sm-4" 和 class="col-sm-8" 类会将 <div class="row"> 的两个内部 <div> 从在手机上全宽度单列垂直堆叠，转变为在平板电脑及更大设备上按 4:8 的比例进行双列水平布局，如关键字 sm 所示，sm 代表“small”（小），指代宽度为 768px 的平板电脑尺寸作为发生转换的断点。

结果是，在小于平板电脑的设备类型（即手机）上，它们将垂直堆叠并占据浏览器中的全部宽度，如图 2 所示，或者通过将在线演示调整到小于 768px 的平板电脑尺寸宽度。

Figure 2: Single-column Vertical Stack on Mobile Phones — 图 2：手机上的单列垂直堆叠

另一方面，在平板电脑或更大设备的浏览器上，这两个 <div> 将以 4:8 的比例在页面上并排显示，如图 3 所示，或者通过将在线演示调整到大于 768px 的平板电脑尺寸宽度。

Figure 3: Two-column Horizontal Layout on Tablets and Larger Devices — 图 3：平板电脑及更大设备上的双列水平布局

在前面的示例中，您使用了四种 Bootstrap 网格类之一，即 .col-sm-*，来创建一个网页布局，该布局在手机上显示为两个 <div> 的全宽度单列垂直堆叠（图 3），并在更大设备的扩展屏幕上转换为 *-列水平布局（图 4）。其他三种网格类是 .col-xs-*、.col-md-* 和 .col-lg-*。每个网格类都以 .col 为前缀，后跟四个响应式断点常量之一——xs、sm、md 和 lg——以及占据的列数 *，用连字符 - 分隔，如下表 1 所示。

表 1：Bootstrap 网格类
前缀		响应式断点		占据的列数
`.col`	-	`xs`	-	`1` 到 `12`
		`sm`
		`md`
		`lg`

在表 1 中，响应式断点参数采用以下四个常量之一：

xs 指“xtreme small”（超小）尺寸设备，宽度小于 768px，例如手机。
sm 指“small”（小）尺寸设备，宽度至少为 768px，例如平板电脑及更大设备。
md 指“medium”（中等）尺寸设备，宽度至少为 992px，例如台式机及更大设备。
lg 指“large”（大）尺寸设备，宽度至少为 1200px，例如大型台式机。

占据的列数参数取 1 到 12 之间的整数值。

这些网格类在创建响应式布局方面的影响如下所述：

.col-xs-*: 创建一个 <div>，在宽度小于 768px 的“xtreme small”（超小）（xs）尺寸设备（如手机）及更大设备上占据 * 列。实际上，它适用于任何尺寸的设备。
.col-sm-*: 创建一个 <div>，在宽度至少为 768px 的“small”（小）（sm）尺寸设备（如平板电脑）及更大设备上占据 * 列。
.col-md-*: 创建一个 <div>，在宽度至少为 992px 的“medium”（中等）（md）尺寸设备（如台式机）及更大设备上占据 * 列。
.col-lg-*: 创建一个 <div>，在宽度至少为 1200px 的“large”（大）（lg）尺寸设备（如大型台式机）上占据 * 列。

眼见为实。在网页中包含四个网格类的单个跨列，放在单独的行中，如下所示，也可在此处下载。

<div class="container">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
	<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
    <div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
	<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
    <div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
	<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
    <div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
 	<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
  </div>
  <div class="row" style="margin-top:1%;margin-bottom:1%">
	<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
    <div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
	<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
    <div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
	<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
    <div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
 	<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
  </div>
  <div class="row" style="margin-top:1%;margin-bottom:1%">
	<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
    <div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
	<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
    <div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
	<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
    <div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
 	<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
  </div>
  <div class="row" style="margin-top:1%;margin-bottom:1%">
	<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
    <div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
	<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
    <div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
	<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
    <div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
 	<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
  </div>  
</div>

在浏览器中打开它，或者在线查看，然后调整浏览器大小以分别模拟手机、平板电脑、台式机和大型台式机的屏幕，并观察相应网格类在视口大小调整时在其响应式断点处转换其相应行的布局效果，如图 4 到 7 所示。请注意，较低断点网格类（如 .col-xs-*）的布局会扩展到更大的设备。

Figure 4: Xtreme Small (xs) Screen of Mobile Phone — 图 4：超小（xs）尺寸手机屏幕

Figure 5: Small (sm) Screen of Tablets — 图 5：小（sm）尺寸平板电脑屏幕

Figure 6: Medium (md) Screen of Desktops — 图 6：中（md）尺寸台式机屏幕

Figure 7: Large (lg) Screen of Larger Desktops — 图 7：大（lg）尺寸大型台式机屏幕

您已了解到：

注意

Bootstrap 的网格类是移动优先的，并且始终向上扩展。换句话说，一个网格类将影响屏幕宽度等于或大于其响应式断点的设备。因此，如果您想为 sm 和 md 尺寸的设备设置相同的宽度，只需指定 .col-sm-* 即可。

混合网格

您可以为网格列分配多个网格类，以创建在多个断点处发生变化的、高度响应式的布局。每个网格类将影响从其响应式断点开始的布局，直到遇到下一个具有更大响应式断点的网格类为止。

尝试以下代码，也可在此处下载。

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:#CFF"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:#9FC"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div>
  </div>
</div>

在浏览器中启动它或在线查看，然后调整浏览器大小以分别模拟手机、平板电脑、台式机和大型台式机的屏幕，并观察各网格类在每个断点处转换布局的效果，如图 8 到 11 所示。

Figure 8: Xtreme Small (xs) Screen — 图 8：超小（xs）尺寸屏幕

Figure 9: Small (sm) Screen — 图 9：小（sm）尺寸屏幕

Figure 10: Medium (md) Screen — 图 10：中（md）尺寸屏幕

Figure 11: Large (lg) Screen — 图 11：大（lg）尺寸屏幕

您已了解到：

注意

虽然网格类会向上扩展并影响屏幕宽度等于或大于其响应式断点的设备，但它们会覆盖针对较小设备的网格类。

到目前为止，您体验的是响应式网格布局，它们总是会扩展为固定数量的列，尽管占据的列数不同，总计在同一行中为 12 列。我们是否可以有一个布局，在不同的响应式断点处提供不同数量的列？这将把我们带到“换行列网格”的主题。请继续阅读……

换行列网格

要在不同响应式断点处拥有不同数量的列，您必须为网格列分配多个网格类，这不可避免地会导致在某些点占据的列数总和超过 12。

假设您希望在手机（xs 设备）上使用 2 列布局，并且可以扩展到更大设备上的 4 列布局，您可以尝试以下代码，或在此处下载。

<div class="container">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-xs-6 col-sm-3" style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div>
    <div class="col-xs-6 col-sm-3" style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div>
  </div>
</div>

在 sm 尺寸及更大设备上，它如预期显示为页面上四个等宽的列，因为占据的列数总和为 12，如图 12 所示，或者在 sm 尺寸及更大设备上在线查看。

Figure 12: Four Equal-Width Columns on sm Sized and Larger Devices — 图 12：sm 尺寸及更大设备上的四列等宽布局

然而，在 xs 尺寸设备上，占据的列数总和已超过单行中的 12 列。Bootstrap 会将额外的列换行到下一行，这可能导致意外的结果，如图 13 所示，或者在 xs 尺寸设备上在线查看。

Figure 13: Layout Went Awry on xs Sized Devices — 图 13：xs 尺寸设备上的布局混乱

xs 设备上的布局混乱！如何修复？.clearfix 来帮忙！请参见下面的修正代码，或在此处下载。

<div class="col-xs-6 col-sm-3" style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div>
<div class="col-xs-6 col-sm-3" style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div>
<!-- Add clearfix for desired viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div>

上述代码在所需视口（此处为 xs）中添加了 .clearfix，您将能够解决问题，如图 14 所示，或在线查看。

Figure 14: Properly Wrapped Column Grid on xs Sized Devices — 图 14：xs 尺寸设备上的正确换行列网格

偏移列

您可以使用四种 Bootstrap 网格偏移类之一——.col-xs-offset-*、.col-sm-offset-*、.col-md-offset-* 和 .col-lg-offset-*——在任何响应式断点处将网格列向右移动 * 列。这相当于创建一个占据 * 列的空白列，该空白列在该断点及以上生效。

尝试以下代码，或在此处下载。

<div class="container-fluid">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-xs-4" style="background-color:#0CC;">col-xs-4</div>
    <div class="col-xs-3" style="background-color:#0CF;">col-xs-3</div>
    <div class="col-xs-5" style="background-color:#0CC;">col-xs-5</div>
  </div>

  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-xs-4" style="background-color:#0CC;">col-xs-4</div>
    <div class="col-xs-5 col-xs-offset-3" style="background-color:#0CF;">col-xs-5 col-xs-offset-3</div>
  </div>
</div>

在浏览器中启动它，如图 15 所示，或在线查看。第一行作为指南，显示了比例为 4:3:5 的三个网格列，第二行显示了由 .col-xs-offset-3 类在第一和第二网格列之间产生的 3 列偏移，该类导致第二网格列向右移动 3 列。

Figure 15: Bootstrap's Column Offset — 图 15：Bootstrap 列偏移

对于采用多个网格类的列网格，较低断点偏移类的效果会向上扩展并影响较高断点网格类的布局。这可能导致意外的结果。请将 .col-sm-6 添加到前面的代码中，如下所示，或在此处下载。

<div class="container-fluid">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-xs-4 col-sm-6" style="background-color:#0CC;">col-xs-4 col-sm-6</div>
    <div class="col-xs-5 col-xs-offset-3 col-sm-6" style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6</div>
  </div>
</div>

在浏览器中启动它，或在线查看。当您将浏览器调整到 sm 断点及以上时，来自 xs 断点的 3 列偏移会向上扩展并加到两个网格列的 12 列宽度上，导致第二列换行到下一行并向右偏移 3 列，如图 16 所示。

Figure 16: Column Offset Went Awry — 图 16：列偏移混乱

为了纠正这个问题，只需在 sm 断点处添加一个偏移类，其跨列数为零，例如 .col-sm-offset-0，以覆盖任何较低断点的偏移类（在此示例中为 .col-xs-offset-3）。尝试以下代码，或在此处下载。

<div class="container-fluid">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-xs-4 col-sm-6" style="background-color:#0CC;">col-xs-4 col-sm-6</div>
    <div class="col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0" style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0</div>
  </div>
</div>

上述代码将阻止列偏移传播到 sm 断点之外，从而允许在 sm 尺寸及更大设备上呈现计划的 2 列等宽布局，如图 17 所示，或在线查看。

Figure 17: Proper Column Offset — 图 17：正确的列偏移

重新排序列

您可以使用 Bootstrap 的推（push）和拉（pull）修饰符类，形式为 .col-<breakpoint>-push-* 和 .col-<breakpoint>-pull-*，在任何响应式断点处轻松更改网格列的顺序。尝试以下代码，或在此处下载。

<div class="container-fluid">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-sm-4 col-md-push-8" style="background-color:#CFF">col-sm-4 col-md-push-8</div>
    <div class="col-sm-8 col-md-pull-4" style="background-color:#9FC">col-sm-8 col-md-pull-4</div>
  </div>
</div>

在浏览器中启动它，或在线查看。在 sm 尺寸设备上，两个网格列如图 18 所示，但在 md 尺寸及更大设备上，由于在各自的网格列中使用了 .col-md-push-8 和 .col-md-pull-4，它们被重新排序，如图 19 所示。

Figure 18: Layout on sm Sized Devices — 图 18：sm 尺寸设备上的布局

Figure 19: Layout on md Sized and Larger Devices — 图 19：md 尺寸及更大设备上的布局

嵌套列

您可以通过在网格列内添加一个新的 .row 类和所需的网格类来创建嵌套列布局，如下面的代码所示，或在此处下载。

<div class="container-fluid">
  <div class="row" style="margin-top:1%;margin-bottom:1%">
    <div class="col-sm-12" style="background-color:#CFF">
      Level 1 Top
      <div class="row">
	<div class="col-sm-4" style="background-color:#9C0">Lever 2: col-sm-4</div>
 	<div class="col-sm-8" style="background-color:#F90">Lever 2: col-sm-8</div>
      </div>
      Level 1 Bottom
    </div>
  </div>
</div>

在浏览器中启动它，或在线查看。在 sm 尺寸及更大设备上，它将显示如图 20 所示。

下一部分

您已牢固掌握了 Bootstrap 的响应式、移动优先的网格系统，现在是时候了解 Bootstrap 对网页内容的样式设计了。下一期有什么内容？我们将拭目以待。同时，让我们休息一下。

本文 Bootstrapping Your Web Pages 2 – 响应式布局最先出现在 Peter Leow's Code Blog。