Web 开发

项目
06/04/2015

使用 Bootstrap 构建响应式网站

客户迟早会在他的移动设备上点击到您的网站 URL。用户会看到您的网站不能在手机上显示是因为这个网站是针对台式机设计的吗？如果是这样，该用户将很可能转而点击更适合移动访问的站点。如果该用户遇到的是专门针对移动外形规格设计的用户体验，并能够轻松地与您的网站进行交互，情况又会怎样？

在过去，支持移动设备和台式机的网站需要不同的代码库。然而，现在已经出现了这样的 UI 框架，即，其允许站点的网页支持移动设备、平板电脑、台式机甚至是大屏幕台式机 — 所有这些只需一个代码库。尽管这些工具不是移动 Web 开发人员的万能药，但它们可以大大简化开发过程。尽管如此，您还是必须得深入思考以确定这是否适合您的网站。

本文将简要概述其中一个工具，即许多 Visual Studio 2013 Web 应用程序模板中包含的 Bootstrap。Bootstrap 是一个支持响应式 Web 设计 (RWD) 的框架 — 一种致力于通过一个代码库就可为所有外形规格的设备提供可接受的查看体验的网站设计方法。在简要概述之后，我将提供一些考虑因素，以帮助您确定诸如 Bootstrap 这样的框架是否适合您的站点。

开始

软件行业发展到出现诸如 Bootstrap 这样的解决方案并不是一蹴而成的。从 1998 年开始初见端倪，先后出现了无线标记语言 (WML)、紧凑 HTML 和 XHTML 移动配置文件，而后又消失不见，而 HTML5 于 2009 年最终成为所有设备的下一代 HTML 标准。但只有标准还远远不够。尽管移动 Web 标记的标准不断地发展，但硬件、移动浏览器和带宽也出现了重大进展。处理器变得更快、移动浏览器发展为可以显示任何网页（即使页面不是针对移动设备设计的），而带宽也得到了增加。这为开发人员创建了一个要接管的环境。

开发人员喜欢为其他开发人员制作工具，移动 Web 也不例外。在现在的市场中，有十多种不同的 UI 框架。将这些框架之一标为“最佳”可能不太公平，因为方法各不相同并且网站的要求也大相径庭。我之所以在本文中选择 Bootstrap，是因为它的采用情况稳定、记录全面并且包含在 ASP.NET Web 应用程序模板中。

什么是 Bootstrap？

Bootstrap 是用于构建网站的响应式 UI 框架。和其他许多用于 Web 开发的 UI 框架一样，Bootstrap 框架是 CSS 类、UI 组件以及 JQuery 插件的集合。Bootstrap 被视为一款轻量级框架。换言之，它在完成其工作时更多地用到 CSS 而不是 JavaScript。即使 Bootstrap 被视为是轻量级的，但比起专门针对给定外形规格的设备设计的页面，使用 Bootstrap 工具的网页在呈现时仍需要更多的处理工作。出于此原因，在设计、开发和测试使用 Bootstrap 框架任意部分的页面时，应重点考虑其性能。

Bootstrap 可以自动为您完成大量工作。它还允许您针对特定的设备外形规格轻松自定义默认行为，同时保持让您的页面在其他外形规格的设备上看起来不错。版本 3 的 Bootstrap 附带的 CSS 类专门针对移动浏览器、平板电脑浏览器、桌面浏览器甚至大型台式机屏幕上运行的浏览器中常见的浏览器宽度。您可以使用 Bootstrap CSS 类批注 HTML5 元素。最常使用的 CSS 类涉及 Bootstrap 网格系统，一个使用行和列组织页面布局的类的集合。本文后面将详细介绍该网格系统。

Bootstrap 拥有大量用于创建站点 UI 的 UI 组件，其中包括按钮下拉列表、按钮组、下拉列表、导航栏、痕迹导航、媒体对象、分页和进度栏，这里只是仅举几例。这些组件中的大多数都是自身可以响应的，这意味着它们可以基于不同的浏览器宽度以不同的方式呈现。例如，导航栏就是一个功能强大的组件，在用户触摸导航栏后，它可从横跨台式机上整个屏幕宽度以显示菜单选项的菜单栏自动转换为通过激活的下拉菜单栏显示选项的美观精简版。

为了提供更高级的 UI 功能，Bootstrap 还具有一个自定义 JQuery 插件集合，其中包括轮播、可折叠面板、模式对话框提示和弹出消息。

开始使用

在您使用 Visual Studio 2013 的 ASP.NET Web 应用程序模板创建项目时，Bootstrap CSS 和 JavaScript 文件将自动包含在项目中。Web 应用程序模板的新项目对话框如图 1 所示。Bootstrap 还需要 JQuery。当从 Visual Studio 2013 Web 应用程序模板获取 Bootstrap 时，您将获得 Bootstrap v3.0.0 与 JQuery v1.10.2。如果您使用的是 Visual Studio 2012 的模板，则这些文件不会包含在项目中。此外，如果使用“文件 | 新建网站”创建新网站，则 Bootstrap 不会自动包含在内。

图 1 ASP.NET Web 应用程序模板的 Visual Studio 2013 新建项目对话框

如果您喜欢使用最新且最棒的 Bootstrap 和 JQuery 版本，请使用 NuGet 更新您的项目。如果您拥有的 Visual Studio 版本早于 Visual Studio 2013，请使用 NuGet 获取 Bootstrap。Bootstrap 站点 (getbootstrap.com) 演示了如何链接至 Bootstrap 的 CDN 托管版本，该版本可以提供显著的性能优势。

使用 Bootstrap 网格系统进行试验

Bootstrap 提供了所谓的 12 列响应式布局。您可以使用任意行数布局布置页面，但列数必须为 12。这 12 列将按整个浏览器宽度均匀调整大小，而且您可以使用 Bootstrap CSS 类指定 HTML 元素应占用的列数。这与 Windows Phone 和 Windows 8 的 XAML 开发人员所习惯的不同，这是另一种网格系统。XAML 网格系统允许页面布局具有任意数量的行和列。然后，开发人员通过指定行号和列号将各个控件置于单元格中。Bootstrap 网格系统的功能之所以异常强大是因为您可以为大型台式机、普通台式计算机、平板电脑和手机指定不同的列跨度。例如，一种常见的布局模式是创建一系列的 div 并指定在大型台式机上每个 div 应占据 2 列（这意味着每一行有 6 个 div），在普通台式机上占 3 列、在平板电脑上占 4 列以及在手机上占 6 列（这将造成每行 2 个 div）。这种情况下，使用了构成 Bootstrap 网格系统的 col* 类，代码如图 2 所示。颜色类（灰色、橙色等）只为 div 上背景色。图 3 和图 4 显示了此页面分别在台式机和手机上的呈现方式。

图 2 使用 Bootstrap 网格系统的常见布局模式

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

图 3 图 2 的示例使用 col-md-3 类呈现在台式机上

图 4 使用 col-xs-6 类呈现在手机上的图 2 示例

请务必注意，Bootstrap 实际上不会检测设备类型。而是，Bootstrap 使用媒体查询来确定是否应该应用 CSS 类。四个类别的类如图 5 所示，以及将导致应用各个类别的宽度范围。

图 5 Bootstrap 网格系统类类别

类别前缀	外形规格	宽度（以像素为单位）
col-xs-*	手机	低于 768
col-sm-*	平板电脑	768 µ½ 991
col-md-*	桌面	992 µ½ 1,200
col-lg-*	大型台式机	大于 1,200

布局特定的 HTML 元素时，可以使用这些类别的任意组合。例如，下面的代码行将使用每个类别中的一个类：

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

这等效于下面的伪代码：

如果浏览器的宽度小于 768 个像素，则此 div 将跨越第 6 个（共 12 个）可用列，这将占用一半 (6/12) 的屏幕。

或者，如果浏览器的宽度介于 768 个像素与 991 个像素之间，则此 div 将跨越 4 个（共 12 个）可用列，这将占用三分之一 (4/12) 的屏幕。

或者，如果浏览器的宽度介于 992 个像素和 1200 个像素之间，则此 div 将跨越 3 个（共 12 个）可用列，这将占用四分之一 (3/12) 的屏幕。

或者，如果浏览器的宽度大于 1200 个像素，则此 div 将跨越 2 个（共 12 个）可用列，这将占用六分之一 (2/12) 的屏幕。

您不必显式指定每个类别的列计数。如果未指定特定的类别，将使用下一个类别的大小。例如，如果您想为手机设置唯一布局，但相同的布局也可用于平板电脑、台式计算机以及大型台式机，您只需要为手机和平板电脑指定类。如下所示：

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap 会将平板电脑设置用于台式机和大型台式机外形规格。此外，手机的默认类是 col-xs-12，这会将每个 div 置于其自己的行上。如果这对于手机是一个可接受的布局，则可进一步减少前面的代码行：

<div class="col-sm-4"> {HTML elements here.} </div>

请注意，图 2 中的行未指定。如果当前行已用完或者没有足够的空间存放该 div，则 Bootstrap 网格系统会自动将 div 移至下一行。您可以通过使用如下所示的行类强制执行新行：

<div class="row">
  {Place columns here.}
</div>

为什么是 12 列？对于此网格系统来说，12 可能听起来像是随便选择的数字，但是它不是。数字 12 在这提供了充足的可分割性与可组合性。例如，数字 1、2、3、4、6 和 12 全都可以整除 12。将这些值用于列间距可分别生成 12 列、6 列、4 列、2 列和 1 列的内容布局。此外，组合（如 3+9、9+3、4+8 和 8+4）都是吸引人的直观内容布局组合。

Bootstrap 组件

Bootstrap 包含 20 多个组件，您可以在其当前状态下使用或轻松进行扩展。查看 Bootstrap 站点以了解各个组件和用法示例。媒体对象的文档甚至利用 REO Speedwagon 音乐视频来演示其用法。即使您不是在八十年代长大的，也可以试着去听听。

我将详细介绍用于在页面顶部创建菜单栏的导航栏组件。图 6 演示了如何使用导航栏组件创建一个包含站点品牌和几个菜单选项的简单菜单。当浏览器宽度大于 768 个像素时，导航栏的呈现将如图 7 所示。如果浏览器宽度小于 768 个像素，导航栏的呈现将如图 8 所示。在这种情况下，当用户点击包含水平线的按钮时，将显示菜单选项。

图 6 使用 Bootstrap 导航栏组件

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

图 7 浏览器宽度等于或大于 768 个像素时呈现的导航栏

图 8 浏览器宽度小于 768 个像素时呈现的导航栏

显然，这是一个非常简单的示例。导航栏还可以包含下拉菜单按钮，您甚至可以将搜索功能整合至导航栏中。此外，示例中导航栏的品牌部分可以是图像。

JQuery 插件

Bootstrap 具有十几个 JQuery 插件，Bootstrap 站点的 JavaScript 选项卡下有介绍。第一眼看上去，它们与上一节中所述的组件功能类似，是用于增强 HTML5 元素的 CSS 类。但是，在呈现 HTML 元素时或当各种事件触发 HTML 元素时，这些 CSS 类可触发 JQuery 活动。大量使用这些插件的页面应进行测试，以确定是否存在性能问题，尤其是在 CPU 速度较慢且内存有限的设备上。

需要运行这些插件的 JavaScript 位于 bootstrap.js 中。每个插件也可作为独立文件提供，这使您可以只包含应用所需的插件，从而加快首页的呈现。

图 9 演示了如何使用轮播插件，它可提供幻灯片放映功能。如果您的页面已具有到 bootstrap.js 或 bootstrap.min.js 的链接，那么一切就绪。或者，如果轮播插件是页面唯一需要的插件，则您可以链接到 carousel.js。

图 9 使用轮播插件

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

图 10 显示了针对 Windows Phone 呈现的轮播插件。轮播插件会适当地拉伸自身以适应平板电脑、台式机以及大型台式机外形规格。

图 10 在 Windows Phone 仿真程序中呈现的轮播示例

注意事项

正如我之前所述，Bootstrap 并不适合所有情况。若要确定 Bootstrap 是否适合您的网站，您需要考虑以下几件事：

如果您已有一个调优多年并已针对您的用户进行了优化的网站，您要谨慎行事。为复杂、高使用频率的页面制作原型也是个不错的主意。如果支持 Bootstrap 的页面性能无法达到最佳，可考虑设置 m 站点并自己编码所有内容。Dino Esposito 的文章“移动化现有网站”(bit.ly/1CaVEWR) 中介绍了如何设置 m 站点。
如果您要构建一个新的网站，请为您最复杂的页面和您认为会被频繁用到的页面制作原型。请确保它们在低端设备上以及低带宽情况中工作良好。如果页面经证明有问题，则尝试重新设计，以使其性能令人满意。M 网站也是新站点的一个选项，但只在重新设计不起作用的情况下才可以使用。
请确保 Bootstrap 网格系统和用于导航的组件不会太限制站点设计。在调查 Bootstrap 期间，请尽早与您的用户体验设计人员协商。在我看来，Bootstrap 之类的工具会强制您针对移动进行设计，这会强迫您保持页面干净整洁。但是，您的用户体验设计人员可以确认 Bootstrap 是否正确展现了您的品牌并为您的用户提供适合的体验。

总结

此处介绍的内容只是 Bootstrap UI 框架的简要概述。其中提及的 Bootstrap 附带的 CSS 类、组件和插件并不全面。您可以访问 Bootstrap 站点以全面了解所有可用工具，并探究演示不同用户体验设计的示例页面。如果您需要大致了解可以使用 Bootstrap 实现的目的，这些示例可以提供帮助。

在推动使用 Bootstrap 或任何其他框架进行重要开发工作之前，请考虑性能和可用性。为主要页面制作原型，是确认 Bootstrap 是否可以整合至您的网站并为您带来想要的结果的最佳方法。

Keith Pijanowski 是一名工程师、企业家和商业人士。他在软件行业有 20 多年的经验，就职的公司既有初创公司也有大型公司，从编写代码到业务拓展均有涉猎。您可以通过 keithpij@msn.com 或 twitter.com/keithpij 与他取得联系。

衷心感谢以下 Microsoft 技术专家对本文的审阅：Rick Anderson 和 Cephas Lin