Bootstrap-精要-全-

Bootstrap 精要（全）

原文：zh.annas-archive.org/md5/959604499245bca614ac47a91aedad82

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

随着移动设备上的互联网用户数量每时每刻都在增长，你的网站不再只为桌面机器构建。移动优先的哲学要求网站能够完全兼容所有现有和未来的移动设备。Bootstrap 允许并轻松地使你能够为所有设备包括各种屏幕阅读器设计和开发你的网站。

到目前为止，我们使用所有这些手动 CSS 类和相当数量的各种 JavaScript 库来开发网站。交付期望的结果和升级你的网站传统上一直是一个相当大的挑战。随着移动设备的出现，这项任务变得更加困难。Bootstrap 在这里为你提供援助——提供你需要的所有东西，包括 CSS 类和 JavaScript 组件，全部包含在一个包中。

本书涵盖了 Bootstrap 的所有理论和实践方面，使你成为移动世界的熟练网络开发者。你将能够下载、包含并在你的网络项目中配置 Bootstrap。你将理解 Bootstrap 的内部架构和结构，并完全熟悉 Bootstrap CSS 和组件的使用，以及 Bootstrap 提供的 JavaScript 对象。你还将能够从源代码构建和编译 Bootstrap，并最终根据你的需求进行定制和扩展。

本书涵盖内容

第一章, CSS 和 Bootstrap 的演变，向你介绍了 CSS 的简要历史和 CSS3 的诞生。它介绍了移动优先的哲学，并阐述了 Bootstrap 的基本概念和需求。

第二章, Bootstrap 入门，使你能够下载并将 Bootstrap 包含到你的项目中。你将了解不同 Bootstrap 发行版的文件和文件夹结构。你还将开始使用 Bootstrap 框架构建一个示例应用程序。

第三章, 使用 Bootstrap CSS 创建响应式布局，介绍了 Bootstrap 提供的所有 CSS 类的主要方面，包括基本 HTML 元素、响应式类、处理图片、Bootstrap 网格系统、数据输入表单等。

第四章, Bootstrap 中的内置组件，探讨了 Bootstrap 框架中所有内置的组件。例如，图标字体、导航栏、工具栏、面板、井和分页。你将在示例应用程序中使用所有这些组件来理解其实际应用。

第五章，Bootstrap 中的 JavaScript 扩展，使你精通 Bootstrap 提供的所有重要 JavaScript 扩展。你将能够使用模态窗口、标签页、药丸、手风琴、工具提示、下拉菜单、弹出框、警报、轮播图等等。

第六章，编译和构建 Bootstrap，介绍了 Bootstrap 的高级用法以及如何建立 Bootstrap 的开发环境，如何编译 Bootstrap 源代码，以及如何构建框架的可分发版本。

第七章，定制 Bootstrap，使你能够使用开发环境并定制 Bootstrap 的默认行为以满足你的需求。

第八章，扩展 Bootstrap，介绍了 Bootstrap 社区市场，在那里你可以找到不同的资源，通过这些资源你可以扩展和扩展 Bootstrap 的默认功能和特性。例如，你将使用树形视图控件和所见即所得编辑器，这些都不是 Bootstrap 默认提供的。最后，你将能够使用几乎所有的 Bootstrap 主要类和组件以及社区控件来创建示例应用。

你需要这本书的内容

本书是开发全设备友好网站的分步详细指南。它从 CSS、CSS3 和 Bootstrap 的基本概念开始。它包括 Bootstrap 提供的所有主要功能和功能的实际知识。它还展示了如何与 Bootstrap 的主要源代码一起工作，以及如何定制和扩展框架。

每一步都伴随着一个易于跟随的实践练习，并展示了 Bootstrap 功能的用法。

为了作为读者理解和处理这本书，你需要了解 HTML、CSS 和 JavaScript。了解 HTML5、CSS3 和 jQuery 将是一个额外的优势；然而，这本书并不本质上依赖于这些先决条件。

这本书是为谁而写的

Bootstrap Essentials 旨在为所有那些使用 HTML、CSS 和 JavaScript 设计和开发网站和页面的网络开发者提供指导——无论你是否拥有移动网站开发的经验，这本书都将指导你成为一名熟练的 Bootstrap 网络开发者。为了更好地理解 Bootstrap 和移动网站开发，具备 HTML、CSS 和 JavaScript 的先前经验将有所帮助。进一步了解 jQuery 将是一个额外的优势。关于构建和定制 Bootstrap 的先进信息是本书的一部分；因此，想要拥有自己 Bootstrap 版本的读者将能够建立一个完整的 Bootstrap 开发环境。

习惯用法

在这本书中，你会发现许多文本样式，用于区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称都按照以下方式显示：“例如，这就是在 Bootstrap CSS 中配置HTML全局元素的方式。”

代码块设置如下：

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="(max-width: 800px)" href="max800.css">
<link rel="stylesheet" media="(max-width: 320px)" href="max320.css">
<link rel="stylesheet" media="(orientation: portrait)" href="prt.css">
<link rel="stylesheet" media="(orientation: landscape)" href="lnd.css">

任何命令行输入或输出都按照以下方式编写：

npm install --prefix D:\Bootstrap grunt-cli

新术语和重要词汇以粗体显示。你在屏幕上看到的单词，例如在菜单或对话框中，在文本中显示如下：“你所需要做的只是更新这个界面中这些变量的值，最后在页面底部按下编译和下载按钮。”

注意

警告或重要注意事项以如下框的形式出现。

技巧

技巧和窍门以如下方式显示。

读者反馈

我们欢迎读者的反馈。告诉我们你对这本书的看法——你喜欢什么或不喜欢什么。读者反馈对我们很重要，因为它帮助我们开发出你真正能从中获得最大价值的标题。

要发送给我们一般性的反馈，只需发送电子邮件至<feedback@packtpub.com>，并在邮件主题中提及本书的标题。

如果你在某个领域有专业知识，并且你对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南，链接为www.packtpub.com/authors。

客户支持

现在你已经是 Packt 图书的骄傲拥有者，我们有一些事情可以帮助你从你的购买中获得最大价值。

下载示例代码

你可以从你购买的所有 Packt Publishing 书籍的账户中下载示例代码文件。www.packtpub.com。如果你在其他地方购买了这本书，你可以访问www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给你。

错误清单

尽管我们已经尽最大努力确保内容的准确性，但错误仍然可能发生。如果你在我们的某本书中发现错误——可能是文本或代码中的错误——如果你能向我们报告这一点，我们将不胜感激。通过这样做，你可以帮助其他读者避免挫败感，并帮助我们改进本书的后续版本。如果你发现任何错误清单，请通过访问www.packtpub.com/submit-errata，选择你的书籍，点击错误提交表单链接，并输入你的错误详细信息。一旦你的错误清单得到验证，你的提交将被接受，错误清单将被上传到我们的网站或添加到该标题的错误部分下的现有错误清单中。

要查看之前提交的勘误表，请访问 www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将出现在勘误部分。

盗版

互联网上对版权材料的盗版是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何形式的我们作品的非法副本，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过 <copyright@packtpub.com> 联系我们，并提供疑似盗版材料的链接。

我们感谢您在保护我们的作者和我们为您提供有价值内容的能力方面的帮助。

询问

如果您在这本书的任何方面遇到问题，您可以通过 <questions@packtpub.com> 联系我们，我们将尽力解决问题。

第一章：CSS 和 Bootstrap 的演变

HTML、CSS 和 JavaScript——作为当今不断发展和不断要求的 Web 2.0 和 Web 3.0 世界的网络开发者，这三个是最重要的工具。随着移动世界及其需求每天都在增长，你将需要开发网站和网页将面临更多的挑战。幸运的是，随着需求的增加，行业也提供了所有新的引擎和机制来满足需求。

本章将涵盖以下主题：

介绍 CSS3
理解移动优先哲学
学习响应式设计的基础
介绍 Bootstrap 作为响应式设计框架

这本书的目的是理解和熟练使用 Bootstrap。由于 Bootstrap 主要基于 CSS3，我们将花几分钟时间看看 CSS 的演变：

1996 年末，官方 CSS1 规范发布；一些关键方面包括文本颜色、背景、边距、边框、填充的能力、定位、各种字体属性、各种文本属性、间距、对齐等。

CSS2 规范于 1998 年发布，包括元素定位、z-index、字体阴影和双向文本等众多功能。

然而，CSS3 是一个重大的转变，目前是最新版本。它增加了一系列强大的功能，并推动了技术的移动优先哲学。其中一些非常关键的内容包括媒体查询、选择器、层叠和继承、模板布局、命名空间、MathML、灵活和网格布局、转换和过渡等。

小贴士

CSS3 的一些模块仍在考虑和提案阶段；许多移动设备和桌面电脑的旧版浏览器不支持 CSS3 标签。Bootstrap 使用它们，并且大量基于 CSS3 和 HTML5；因此，作为开发者，你必须确保在使用 Bootstrap 时，你正在构建一个面向未来的网站，但与此同时，你的网站可能不会与旧版浏览器兼容，除非你在这一方面采取了额外的预防措施。

移动优先哲学

作为一名经验丰富的网络开发者，你必须意识到移动优先哲学至今，如果你还没有，那么现在是醒悟的时候了。

让我们考虑以下几个事实（所有都是近似值）：

全球有超过 10 亿的手机用户，并且还在增加
超过 25%的互联网用户仅通过移动设备访问；他们很少使用桌面浏览器上网
地球上超过 90%的人都有手机，超过 50%的人拥有智能手机
超过 50%的手机用户将移动设备作为他们主要的互联网来源，而不是桌面电脑
超过 70%的平板电脑用户每周都会从平板电脑上在线购物
到 2015 年和 2016 年，预计手机和平板电脑的互联网使用量将超过桌面电脑

因此，如果不是现在，那么在接下来的几年内，我们将不仅为桌面机器开发网站，更多的是为移动设备开发。

这就是移动优先的方法，它与诸如渐进增强、优雅降级和响应式网页设计等术语并行。

在渐进增强中，你为手机设计和发展你的网站，这是所有设备中空间最小的。然后，你升级你的网站和内容以匹配平板电脑的可用空间，以及为桌面屏幕设计的完整网站，这意味着你是在自下而上地设计网站。

另一方面，在优雅降级的情况下，你采取相反的方法——传统的自上而下的方法。在那里，你为桌面用户设计一个完整的网站，然后通过删除一些可选内容并重新设计所有 CSS 样式和 JavaScript 来适应移动设备，使其逐渐与各种移动设备兼容。

渐进增强方法正日益流行，超过优雅降级——将移动优先哲学作为当今网页设计最关键的因素之一。

然而，响应式网页设计技术在两种策略中都是常见且必要的——无论你选择渐进增强还是优雅降级。此外，作为一名网页开发者，这是你想要掌握的最重要技能之一。

这彻底改变了整个网页设计和开发范式。当然，主要影响在于你如何构建 CSS 类和样式，以及为移动设备设计网站是 CSS 开发者的责任，而不是网站程序员的。CSS3 在这里提供了帮助。正如我们所见，随着响应式网站设计需求的增加，CSS 的力量也在增强。大多数 CSS3 功能和规范都与你需要开发响应式网站的需求相一致。

响应式设计基础

简而言之，响应式网页设计意味着设计和构建你的网站，使其几乎在所有设备上都能正确渲染，无论设备大小、浏览器、屏幕尺寸等。

如我们之前讨论的，最佳的方法是首先为最小的屏幕尺寸设计网站，然后逐步向上扩展。为了实现响应式和良好的用户体验，需要遵循一些非常基本的步骤。

小贴士

以下要点只是为了使基本概念更加清晰，并准备好你的基础知识。稍后我们将详细看到如何使用 Bootstrap 构建和生成一个完整的响应式网站。

设置视口

视口是用户访问的设备或监视器上网页的可见区域。视口的大小随设备而变化——对于手机来说，它非常小；对于平板电脑来说，它稍微大一些；对于台式电脑来说，它比平板电脑大；对于电视来说，它更大。

针对和优化各种设备的页面必须在文档的head部分包含一个meta视口元素。meta视口元素使浏览器理解如何控制页面尺寸和缩放以渲染不同的页面元素。

例如，

<meta name="viewport" content="width=device-width, initial-scale=1">

meta视口值width=device-width指示浏览器在渲染页面时匹配屏幕宽度为设备无关像素。HTML5 引入了这个meta标签，使网络开发者能够控制浏览器屏幕的大小，并按大小渲染网页内容。这是响应式网页设计的基础。

将内容大小调整到视口

不论用户正在使用的设备或浏览器是什么，没有人喜欢水平滚动条。因此，你需要确保所有内容和元素都调整到你所拥有的屏幕实际空间内——只有垂直滚动条。

当你设置了页面内容在可用的视口中时，也需要创建和结构化你的内容，以便适应可用的空间。例如，如果你在一个宽度为 600 像素的屏幕上放置一个图像，那么在 320 像素的屏幕上，你将面临一个水平滚动条来查看整个图像，即使你已经在head部分添加了meta viewport元素。

因此，一个适当的可响应式设计需要所有网页内容也能自动适应屏幕视口大小。

使用媒体查询实现响应式

市面上有各种各样的移动设备。那么，你该如何确保你的页面在所有设备和浏览器上都能高效渲染，而不牺牲任何用户体验呢？当然，你不能为不同的设备编写不同的代码，然后动态地找出要执行哪个代码库。

CSS 媒体查询即将到来——这些是简单的过滤器，用于根据设备的特性和属性更改 HTML 元素的样式。考虑以下示例：

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="(max-width: 800px)" href="max800.css">
<link rel="stylesheet" media="(max-width: 320px)" href="max320.css">
<link rel="stylesheet" media="(orientation: portrait)" href="prt.css">
<link rel="stylesheet" media="(orientation: landscape)" href="lnd.css">

响应式设计模式

在响应式网页设计中，以下是一些已建立并被广泛采用的模式：

流体设计：这是响应式设计中最受欢迎且最简单的方法。在这个模式中，大屏幕的多列布局在较小屏幕上渲染为单列，且顺序完全相同。
列降级：在这个模式中，页面也渲染为单列，但是块顺序被改变。这意味着，如果在大屏幕上，内容块按照顺序首先可见，那么在小屏幕上，该块可能被渲染为第二或第三。
布局调整器：这是一个复杂但强大的模式，在较小屏幕的情况下，整个屏幕内容的布局都会被改变。这意味着你需要为大型、中型和小型屏幕开发不同的页面布局。

导航模式

在设计响应式网页时，以下是一些你应该注意的事项。这些基本上是在开发移动友好和响应式网站时你应该关注的重大导航元素：

菜单栏
导航/应用栏
页脚
主要容器外壳
图片
标签页
HTML 表单和元素
警报和弹出窗口
嵌入式音频和视频等

提示

你可以看到，为了创建一个完全响应式的设计，你需要关注很多元素和方面。虽然所有这些都可以通过使用 CSS3 中的各种特性和技术来实现，但如果没有一个可以帮助你完成这一点的框架，当然这不是一个容易解决的问题。确切地说，你需要一个前端框架来处理所有技术响应式设计实施中的痛点，并让你专注于品牌和应用设计。

现在，我们介绍 Bootstrap，它将帮助你以更优化和高效的方式设计和开发响应式网页设计。

介绍 Bootstrap

简而言之，Bootstrap 是一个前端框架，用于在移动优先的新标准下更快、更简单地开发网络。它使用 HTML、CSS 和 JavaScript。2010 年 8 月，Twitter 将 Bootstrap 作为开源软件发布。

行业中可供选择的类似前端框架相当多，但 Bootstrap 可以说是其中最受欢迎的。从 2012 年起，Bootstrap 就是 GitHub 上星标最多的项目，这一点显而易见。

到目前为止，你一定已经明白了为什么和在哪里需要使用 Bootstrap 进行网络开发；不过，为了回顾一下，这里简要列出以下几点：

移动优先的方法
响应式设计
自动浏览器支持和处理
容易适应并开始使用

Bootstrap 包含的内容

以下图表展示了 Bootstrap 的整体结构：

CSS

Bootstrap 自带了基本的 HTML 元素样式、全局 CSS 类、高级网格模式的类，以及大量的增强和扩展 CSS 类。

例如，这是 Bootstrap CSS 中配置HTML全局元素的方式。

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

这是标准HRHTML 元素的风格化方式：

hr {
  height: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

这是 Bootstrap 中引入的新类的一个示例：

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

组件

Bootstrap 提供了一套丰富的可重用和内置组件，如面包屑、进度条、警报和导航栏。这些组件是专门为特定目的技术定制 CSS 类。

例如，如果你想在你页面上创建一个面包屑，你只需在 HTML 中使用 Bootstrap 的breadcrumb类添加一个DIV标签：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">The Store</a></li>
  <li class="active">Offer Zone</li>
</ol>

在背景（样式表）中，这个 Bootstrap 类被用来创建你的breadcrumb：

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}

注意

请注意，这些代码块集合仅仅是片段；我们将在后面的章节中详细探讨所有这些功能和特性。

JavaScript

Bootstrap 框架提供了一系列现成的 JavaScript 插件。因此，当你需要创建弹出窗口、标签页、轮播图或工具提示等时，你只需使用这些预包装的 JavaScript 插件之一。

例如，如果你需要在你的页面上创建一个标签控制，你可以使用以下方法：

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#recent" aria-controls="recent" role="tab" data-toggle="tab">Recent Orders</a></li>
    <li role="presentation"><a href="#all" aria-controls="al" role="tab" data-toggle="tab">All Orders</a></li>
    <li role="presentation"><a href="#redeem" aria-controls="redeem" role="tab" data-toggle="tab">Redemptions</a></li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="recent"> Recent Orders</div>
    <div role="tabpanel" class="tab-pane" id="all">All Orders</div>
    <div role="tabpanel" class="tab-pane" id="redeem">Redemption History</div>
  </div>
</div>

要激活（打开）一个标签，你编写以下 JS 代码：

$('#profileTab li:eq(1) a').tab('show');

小贴士

通过观察这里这条 JavaScript 语句的语法，你可能已经猜到 Bootstrap JS 插件是建立在 jQuery 之上的。因此，为 Bootstrap 编写的 JS 代码也都是基于 jQuery 的。我们将在后面的章节中进一步探讨这一点。

自定义

尽管 Bootstrap 提供了大多数（如果不是全部）标准功能和特性以支持响应式网页设计，但在某些情况下，你可能希望自定义和扩展框架。自定义的一个非常基本的要求就是部署你自己的品牌和颜色组合（主题），而不是 Bootstrap 默认的主题。可能会有几种情况，你希望改变框架的默认行为。

Bootstrap 提供了非常简单和稳定的平台定制方式。我们将在后面的章节中进一步探讨这一点。

小贴士

当你使用 Bootstrap CSS 时，所有全局和基本的 HTML 元素都会自动变为响应式的，并且会根据浏览网页的客户端设备正确地表现。

内置组件也被设计成响应式的，作为开发者，你不需要担心这些高级组件在不同设备和不同客户端代理上的行为。

摘要

我们简要地回顾了 CSS 的发展历史。我们看到了网页门户和页面的设计方法是如何向以移动端优先的方法转变，并且将变得更加成熟。

我们还涵盖了响应式网页设计的基础知识，并意识到需要一个前端框架来帮助我们开发响应式网页。

在这个背景下，我们介绍了 Bootstrap 框架，并简要地看到了 Bootstrap 的组成部分。

在下一章中，我们将深入探讨 Bootstrap，了解其结构，并查看如何使用 Bootstrap。我们还将简要讨论一些 CSS 预处理器工具和语言。

第二章：Bootstrap 入门

在上一章中，我们了解了为什么以及在哪里需要使用 Bootstrap。我们还知道了 Bootstrap 由哪些主要成分组成。在本章中，我们将下载并开始使用 Bootstrap。重要的是，我们将开始开发我们自己的简单 Web 应用程序，并使用 Bootstrap 的所有主要功能。

在本章中，我们将涵盖以下主题：

如何下载 Bootstrap
理解 Bootstrap 文件结构
CSS 预处理器的基本介绍
使用示例 Web 应用程序开始使用 Bootstrap

获取 Bootstrap

Bootstrap 是一个开源软件（在 MIT 许可下发布），完整源代码可以免费获取。

你可以通过两种方式下载 Bootstrap。

获取预编译捆绑包：
1. 导航至 github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip。
2. 这将下载编译并压缩的 bootstrap-3.3.1-dist.zip 文件，其中包含所有打包的 CSS、JavaScript 和字体文件。
  
  小贴士
  
  本书的结构是基于 Bootstrap 版本 3.3.1，这是写作时的最新版本。
获取完整源代码：
1. 导航至 github.com/twbs/bootstrap/archive/v3.3.1.zip。
2. 这将下载 Bootstrap 的完整源代码捆绑包。在使用之前，你必须安装和编译源代码。
  
  小贴士
  
  在后面的章节中，我们将看到如何设置 Bootstrap 源代码的开发环境以及如何编译和生成可分发文件。
  
  如果你打算构建 Bootstrap 的开发环境并自定义框架，则需要下载完整源代码。否则，你可以使用预先编译好的可分发捆绑包。

Bootstrap 文件结构

现在我们已经下载了 Bootstrap 的两种版本，让我们来看看下载的存档包含什么。然而，对于你的使用，你可以下载其中任何一个。

预编译捆绑包

预编译和可分发捆绑包包含三个文件夹。以下是文件夹及其内容的快照。

文件夹：css

这个文件夹包含了所有的 Bootstrap CSS 文件。在开发过程中，您可以使用完整的 CSS 文件（非压缩版本）；然而，在生产部署中，始终建议使用压缩版本——例如 bootstrap.min.css 和 bootstrap-theme.min.css。然而，使用 Bootstrap 主题是可选的，因为原始的 Bootstrap CSS 已经包含了颜色和其他样式标签。话虽如此，始终建议使用主题文件，因为它为您提供了一个干净的方式来覆盖原始 Bootstrap 的颜色组合和主题。因此，当您想要实现自己的颜色方案和品牌时，您会覆盖并更改主题文件，而不是原始的 Bootstrap CSS 文件。

folder: fonts

这个文件夹包含了 Bootstrap 使用的所有自定义字体。其中一个主要用途是生成 Bootstrap 中使用的 Glyphicons。

小贴士

我们将在稍后看到如何以及在哪里使用这些 Glyphicons。

folder: js

Bootstrap 的所有 JavaScript 组件和插件都存储在这个文件夹中。同样，您应该使用压缩版本——bootstrap.min.js 文件用于生产部署。

如您所知，Bootstrap JS 插件使用 jQuery，因此在使用这些 JavaScript 扩展之前，您必须在您的 HTML 页面中包含 jQuery。

小贴士

默认情况下，这个 JS 文件包含了 Bootstrap 提供的所有 JavaScript 插件，但是如果您只想使用一些选定的插件，您也可以包含特定的 JS 文件。我们将在后面的章节中更深入地探讨这一点。

源代码包

这里是源代码包中包含的文件和文件夹。

如您所见，源代码包相当全面，包含了大量内容。

然而，以下是最重要的。

rfolder: dist

这是收集所有最终可分发文件的文件夹。如果您看到这个文件夹的内容与我们在上一节中看到的可分发包相同。

当我们在后面的章节中构建 Bootstrap 的开发环境时，我们将看到编译后的输出文件将存储在这个文件夹中。

folder: fonts

Bootstrap 中使用的所有字体的源文件夹和文件。

folder: grunt

Bootstrap 使用 Grunt 来执行所有与构建、编译和打包相关的任务。这个文件夹包含了所有相关和必需的文件。

小贴士

我们将在后面的章节中详细说明如何使用 Grunt 编译 Bootstrap。

folder: js

所有 Bootstrap JavaScript 插件的源文件都存储在这里。

folder: less

Bootstrap 使用 CSS 预处理器 LESS 进行编译、定制和打包。这个文件夹包含了生成最终 CSS 文件的所有 LESS 文件。

小贴士

在源代码包中还有其他文件和文件夹，然而，当我们讨论 Bootstrap 的 Dev 环境时，我们将更深入地探讨这些内容。

CSS 预处理器

你可能已经注意到我们刚刚提到了 Bootstrap 源代码包中的 LESS 文件。在这个背景下，在继续深入 Bootstrap 之前，我们将简要讨论这种新的 CSS3 语言和技术。

CSS 预处理器是一个程序，它接受一些预处理的代码并将它们转换为浏览器理解的经典 CSS 代码。这种模式已被创新，以使 CSS 更具动态性、生产性、多用途性、效率和组织性。

传统上，CSS 不是一个编程语言（它现在仍然不是），你在一个语言中享受的所有那些功能（如 .NET、Java 或 PHP）都简单地不存在。在 CSS 中编码一直是“写两次”（WET），现在有了预处理器，我们也可以进行“不要重复自己”（DRY）编程了。

为了更好地理解场景，让我们举一些基本的例子。

这里是一个我们习惯编写的标准 CSS 段落：

.text-large {
  font-family: Arial, sans-serif, verdana;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.4em;
  color: #ccc;
}

.text-medium {
  font-family: Arial, sans-serif, verdana;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1.2em;
  color: #ccc;
}

.text-small {
  font-family: Arial, sans-serif, verdana;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.0em;
  color: #ccc;
}

很明显，许多这些属性都是重复的。当我们想要更改一个属性（例如 color）时，这更加痛苦——我们需要在三个地方都进行更改。

现在进入预处理器语言。我们的新代码将是：

.text {
  font-family: Arial, sans-serif, verdana;
  font-weight: bold;
  text-transform: uppercase;
  color: #ccc;
}

.text-large {
  .text;
  font-size: 18px;
  line-height: 1.4em;
}

.text-medium {
  .text;
  font-size: 14px;
  line-height: 1.2em;
}

.text-small {
  .text;
  font-size: 12px;
  line-height: 1.0em;
}

所以我们做的就是创建了一个包含所有常见属性的类，并将其包含在所有需要的地方。因此，如果我想更改 color，我只需在 .text 类中更改一次，其他所有地方都会更新。

这大大提高了你 CSS 开发和维护的可重用性和效率。我们之前只看到了一个 CSS 预处理器语言的语法——LESS。还有一些其他类似的语言，如 Sass、Stylus、Turbine 和 Switch CSS。尽管 Syntactically Awesome Stylesheets （Sass）和 LESS 是其中最受欢迎的。

这些语言提供了许多有趣和强大的功能。以下是一些重要功能的介绍。

小贴士

请注意，除非明确提及，以下所有语法都是 LESS 预处理器语言的。

变量

现在，你还可以在预处理的代码中定义变量。例如，

@color-main: #444;
@color-nav: #333;
@color-text: #222;
@color-foot: #111;
body {
  color: @color-main;
}
div {
  color: @color-text;
}
.navigation {
  color: @color-nav;
}
.footer {
  color: @color-foot;
}

混入

根据维基百科，"混入（mixin）是一个包含来自其他类的方法组合的类。" 在 CSS 的情况下，这大大增强了可重用性，因为你在那里定义了一个类和一组规则，并在多个实例中重用这组规则。

早期的第一个代码段（包含 .text、.text-large 和其他类的那个）是 LESS 编写的混入示例。在那里我们只定义了 .text 类一次，并在多个地方使用了它。

操作

趣味的是，现在你还可以使用 CSS 预处理器进行数学运算。例如，在 LESS 中，你编写以下代码：

@color-main: #111;
.header {
  color: @color-main * 3;
}

生成的 CSS 代码将简单地如下所示：

.header {
color: #333;
}

嵌套

考虑这个代码段：

h1 {
  font-family: Arial,sans-serif,verdana;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4em;
  a {
    color: black;
    &:hover {
      text-decoration: none;
    }
  }
}

这肯定比编写以下代码看起来更有组织和结构：

h1 {
  font-family: Arial,sans-serif,verdana;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4em;
}
h1 a {color:black;}
h1 a:hover {text-decoration:none;}

第一个是您会在 LESS 中编写的预处理器代码，第二个是生成（或处理）的 CSS 代码，准备在浏览器中渲染——这与我们以前通常编写的内容没有区别。

由于每个预处理器都是另一种语言，它们都有自己的语法和编写代码的方式——这并不是你熟悉的 CSS 语法。然而，在处理（即编译）之后，它们都会生成浏览器可以理解的标准化和相同的 CSS 代码。

注意

本书的内容范围不包括 CSS 预处理器完整的安装和工作指南，因此我们将仅限于 Bootstrap 的上下文。

Bootstrap 支持 Sass 和 LESS；在本书中，我们将使用 LESS 来介绍 Bootstrap。在后续章节中，我们将看到这些功能如何在 Bootstrap 的各个地方被使用。

如何使用 Bootstrap

如你所猜，要使用 Bootstrap，你需要在 HTML 页面中包含所有的 CSS 和 JavaScript 文件。一种方法是在下载 Bootstrap 后包含 CSS 和 JavaScript 文件，另一种方法是直接使用 Bootstrap 的 CDN 文件。

注意

CDN 代表内容分发（或分发）网络。它是一个由多个地点的分布式服务器组成的庞大系统。目标是向最终用户提供高性能和高可用性的内容。

如果下载了 Bootstrap 的本地副本，我们将在 HTML 的 HEAD 部分添加以下内容：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="img/bootstrap.min.js"></script>

此外，在 Bootstrap 的 CDN 的情况下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="img/bootstrap.min.js"></script>

这是我们的第一个使用 Bootstrap 的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Welcome to the Online Megastore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
    <link href="bs/css/bootstrap-theme.min.css" rel="stylesheet">
    <script type="text/javascript" src="img/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="img/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="page-header"><h1><span class="glyphicon glyphicon-home"></span>&nbsp;Welcome to the Online Megastore</h1></div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <div class="panel panel-info">
            <div class="panel-heading">Latest Additions</div>
            <div class="panel-body">...</div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
          <div class="panel panel-warning">
            <div class="panel-heading">Most Popular Products</div>
            <div class="panel-body">...</div>
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container"> 
        <div class="text-muted pull-left"><a href="http://www.packtpub.com" target="_blank">Bootstrap&reg; Sample App</a></div>
        <div class="text-muted pull-right">&copy; <a href="http://about.me/snig" target="_blank">Snig Bhaumik</a> 2015</div>
      </div>
    </div>
  </body>
</html>

在桌面屏幕上，输出将如下所示：

当然，这可能不是一个非常令人印象深刻的网页，但我们仍然开始使用 Bootstrap 的基本类创建网页。

然而，更重要的是，以下是在移动屏幕上同一页面的视图：

正如你可能注意到的，这两个块已经自动调整并垂直渲染，而在桌面端，它们是水平渲染的。

在本书中，我们将创建一个示例基本在线商店应用程序。在后续的每一章中，我们将探索和学习更多关于 Bootstrap 各个功能的特点；并将在这个应用程序中添加更多功能。

最后，我们将使用 Bootstrap 创建一个完整简单且响应式的应用程序用户体验。在这里，我们开始创建应用程序的基础结构。

应用程序文件夹结构

首先，这是我们的应用程序文件夹结构：

注意

请记住，我们只限于创建应用程序的 HTML/客户端部分；当然，服务器端或数据交易部分超出了本书的范围。

我们将在应用中使用所有下载的文件副本，而不是使用任何 CDN 链接。

bs 文件夹是预编译捆绑包的未压缩和未修改版本。在这个文件夹中，我们包含了 Bootstrap 所需的所有文件，准备使用。因此，在 HTML 代码中，我们以以下方式引用了 CSS 和 JS 文件：

<link href="bs/css/bootstrap.min.css" rel="stylesheet">
<link href="bs/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="img/bootstrap.min.js"></script>

js 文件夹用于存放所有自定义（我们应用特定的文件）和其他第三方 JavaScript 文件。我们不应该在 Bootstrap 文件夹中合并任何其他 JS 或 CSS 文件；这就是为什么我们创建了一个单独的文件夹来存储所有这些文件，除了 Bootstrap。在这种情况下，我们在这里添加了 jQuery 脚本文件（jquery-2.0.3.min.js）。

小贴士

顺便提醒一下，Bootstrap 使用并依赖于 jQuery 来实现其所有 JavaScript 插件。因此，我们在引用 Bootstrap JS 文件之前添加了 jQuery。

index.html 文件是我们简单应用的首页——在早期的文本中，你看到了这个文件的代码。我们将根据应用的需求在此位置添加更多 HTML 文件。

概述

在本章中，我们了解了市场上可用的 CSS 预处理器；我们还了解了一些使用这些预处理器工具和语言的特点和优势。

我们学习了如何下载 Bootstrap 框架，以及 Bootstrap 包中可用的各种风味。我们了解到，文件和文件夹都包含在每个分发的包中。

最后，我们学习了如何创建一个包含并使用 Bootstrap 的简单网页。

我们已经开始创建一个示例网络应用，并使用 Bootstrap CSS 创建了我们的第一个页面。我们还建立了一个基础结构，我们将在这个基础上开发示例网络应用。

在下一章中，我们将探索 Bootstrap 提供的所有 CSS 类和功能，并使用这些类为我们的网络应用添加更多功能。

第三章：使用 Bootstrap CSS 创建响应式布局

使用 Bootstrap 时的基本想法和规则是，你不应该创建自己的 CSS 类和样式；相反，你应该始终利用和适应框架提供的类。这样，你将能够利用 Bootstrap 提供的全部功能和潜力。为此，你必须了解框架提供的所有类。当然，你可以根据你的需求和品牌更新和扩展这些类；我们将在稍后看到如何做到这一点。

在本章中，我们将介绍 Bootstrap 所配备的多数主要 CSS 类。我们将涵盖以下内容：

Bootstrap 的 HTML 文件结构
基本 HTML 元素
Bootstrap 中响应式类别的详细信息
处理图片
理解 Bootstrap 中的至关重要的网格系统
构建数据输入表单

Bootstrap 的基本 HTML 结构

在本节中，我们将探讨当你使用 Bootstrap 作为前端框架时基本的 HTML 文件结构。

head 部分

只为了回顾，你的 HTML 文件必须标记为 HTML5 doctype。因此，你总是在文件的开始处包含这个：

<!DOCTYPE html>
<html lang="en">
  ...
</html>

第二个重要的事情是，你必须在你的 head 部分包含 meta viewport 标签。例如：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后，你当然会包含 Bootstrap CSS 和 JS 文件。因此，你的 HTML 文件的简约 head 部分看起来如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>…</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
    <link href="bs/css/bootstrap-theme.min.css" rel="stylesheet">

    <script type="text/javascript" src="img/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="img/bootstrap.min.js"></script>
  </head>

  <body>
    …
  </body>
</html>

正文部分

你所有的 HTML 正文部分必须放置在具有 container 或 container-fluid 类的 div 元素内部：

  <body>
    <div class="container">
...
    </div>
  </body>

container 类确保你的页面将以响应式固定宽度样式渲染。而 container-fluid 类则将你的页面渲染为响应式全宽度设计。因此，如果你想让你的页面在屏幕中间具有固定宽度，而不考虑浏览器窗口的宽度，那么请使用 container 类。另一方面，如果你想让你的页面始终占用整个屏幕，你需要使用 container-fluid 类。以下图表说明了这一点：

基本 HTML 元素

如你所预期，所有标准 HTML5 元素在 Bootstrap 中都被考虑并进行了样式化。因此，你只需简单地使用任何基本 HTML 元素，这些元素将被渲染为 Bootstrap 特定的样式和行为。

例如，从 H1 到 H6 的所有标题标签都可以直接使用。你只需简单地写：

<h1>This is a Heading</h1>

趣味的是，如果你想在其他任何元素中使用相同的标题样式，你可以简单地使用提供的 .h1 CSS 类。

所有以下标准 HTML5 元素都包含在 Bootstrap 的响应式样式集中：

段落 – <p>
突出显示 – <mark>
删除文本 – <del>
插入文本 – <ins>
删除线 – <s>
下划线 – <u>
粗体 – <strong> 或 <b>
斜体 – <em> 或 <i>
缩写 – <abbr>
地址 – <address>
引用块 – <blockquote>
列表 – <ul>, <ol>, <li>
描述列表 – <dl>, <dd>
代码 – <code>, <samp>, <kbd>, <var>
表格 – <table>, <thead>, <tbody>, <tr>, <td>
表单元素 – <form>, <label>, <text>, <textarea>, <password>, <datetime>, <number>, <email>, <date>, <month>, <week>, <time>, <tel>, <color>, <url>, <search>, <input>, <button>

响应式类

由于 Bootstrap 的主要重点是创建最小努力优化的移动网站，因此该框架提供了一些类来控制你的桌面和移动网站版本。

理解基础知识

Bootstrap 使用四个不同的标记来控制和提及元素和设备尺寸。以下表格列出了这些标记并详细说明了它们：

标记名称	目标设备/屏幕尺寸	元素
`xs`	适用于超小设备，例如宽度<768px 的手机。示例类名：`.hidden-xs`	将渲染具有超小尺寸的元素。例如，在按钮的情况下，字体大小将是 12px，行高将是 1.5，填充将是 1px 5px。使用：`.btn-xs`
`sm`	适用于小设备，例如宽度≥768px 且<992px 的平板电脑和手机。示例类名：`.hidden-sm`	将渲染具有小尺寸的元素。例如，在按钮的情况下，字体大小将是 12px，行高将是 1.5，填充将是 5px 10px。使用：`.btn-sm`
`md`	适用于中等尺寸设备，例如宽度≥992px 且<1200px 的桌面。示例类名：`.hidden-md`	默认尺寸
`lg`	适用于大设备，例如宽度≥1200px 的大桌面显示器和电视。示例类名：`.hidden-lg`	将渲染具有大尺寸的元素。例如，在按钮的情况下，字体大小将是 18px，行高将是 1.33，填充将是 10px 16px。使用：`.btn-lg`

控制跨设备的元素显示

如果你在你的 HTML 代码中添加一个带有 CSS 类.hidden-sm的div元素，这个div元素将在所有小设备（宽度≥768px 且<992px 的设备）中隐藏；而在所有其他设备（那些不在这个定义的宽度范围内的设备）中显示。Bootstrap 会自动检测客户端设备的尺寸和分辨率，并相应地渲染元素。

以下表格列出了这些类及其对应的渲染效果：

类名	超小设备，例如宽度<768px 的手机	小设备，例如宽度≥768px 且<992px 的平板电脑和手机	中等尺寸设备，例如宽度≥992px 且<1200px 的桌面	大设备，例如宽度≥1200px 的大桌面显示器和电视
`.hidden-xs`	✗	✓	✓	✓
`.hidden-sm`	✓	✗	✓	✓
`.hidden-md`	✓	✓	✗	✓
`.hidden-lg`	✓	✓	✓	✗

例如，查看以下代码：

<div class="hidden-xs">This DIV will be hidden in extra small devices, and will be displayed in all other devices.</div>

同样，如果您希望您的div元素仅在大型设备上显示，而在较小设备上不显示（当您不希望在手机上渲染大型媒体文件时，这是一个非常常见的用例），您只需使用类.visible-lg-block：

类名	非常小的设备，例如宽度小于 768px 的手机	小型设备，例如宽度在 768px 至 992px 之间的平板电脑和手机	中等尺寸设备，例如宽度在 992px 至 1200px 之间的桌面电脑	大型设备，例如宽度大于等于 1200px 的大桌面显示器和电视
`.visible-xs-block`, `.visible-xs-inline`, `.visible-xs-inline-block`	✓	✗	✗	✗
`.visible-sm-block`, `.visible-sm-inline`, `.visible-sm-inline-block`	✗	✓	✗	✗
`.visible-md-block`, `.visible-md-inline`, `.visible-md-inline-block`	✗	✗	✓	✗
`.visible-lg-block`, `.visible-lg-inline`, `.visible-lg-inline-block`	✗	✗	✗	✓

例如，请看以下代码：

<div class="visible-lg-block">This DIV will be displayed only in large devices, and will be hidden in all other devices.</div>

因此，您可以通过使用前面的类来控制您的 HTML 元素的可视性，根据最终用户使用的目标设备。在先前的例子中，div元素仅在大型设备上显示，而在任何较小或中等设备上都不会显示。

如果您希望您的 HTML 元素在中等和大型设备上显示，但在较小设备上不显示，您可以添加类.visible-md-block和.visible-lg-block。

渲染图片

如您所知，根据可用空间和屏幕大小控制图片渲染是一个挑战，尤其是在响应式网站上。

Bootstrap 再次提供了解决方案——您只需将.img-responsive类添加到您的IMG HTML元素中，这就足够了。

提示

重要的是要注意，除了图片之外，当您在页面中包含 Bootstrap CSS 时，大多数其他 HTML 元素会自动响应用户设备。然而，在图片的情况下，您需要手动添加此类。

这只是给您的图片添加以下 CSS 样式：

.img-responsive
{
display: block;
max-width: 100%;
height: auto;
}

因此，图片将根据其容器元素的宽度全宽显示，图片的高度将根据其宽高比进行缩放，这不受图片实际大小的影响。

注意

如您所见，响应式图片类消耗了容器元素的 100%宽度，至于如何正确地构建父元素结构，则取决于您。

例如，如果您使用硬编码的大小固定父元素的宽度，那么拥有这个.img-responsive类的整个目的就被取消了。您始终需要确保您在页面上的 HTML 元素上没有设置任何固定宽度，以便使您的网页正确响应。

也有一些实用类，对于您的图片样式非常有用。例如，如果您希望您的图片以柔和的圆角（iOS 设计之后最受欢迎的模式）渲染，您可以使用类.img-rounded。它只是给图片添加一个 6px 的边框半径：

.img-rounded {
border-radius: 6px;
}

如果您想将图片渲染为圆形（或椭圆形，取决于图片的宽高比），则使用类.img-circle：

.img-circle {
border-radius: 50%;
}

最后，如果您想为图片添加一个小边框，请使用类.img-thumbnail。

<img src="img/rose.png" class="img-rounded img-responsive" alt="" title="">

小贴士

一个例外是.img-thumbnail类；如果您使用.img-thumbnail类，则不需要包含.img-responsive类，因为大多数响应式样式都包含在缩略图类本身中。

在示例应用程序中显示响应式图片

让我们现在在我们的购物车 Web 应用程序中添加一些产品图片。以下是代码：

<ul class="list-inline">
  <li><img src="img/p1.png" class="img-thumbnail" alt="Product 1" title="Product 1"></li>
  <li><img src="img/p2.png" class="img-thumbnail" alt="Product 2" title="Product 2"></li>
  <li><img src="img/p3.png" class="img-thumbnail" alt="Product 3" title="Product 3"></li>
</ul>

输出将类似于以下截图：

请注意以下要点：

我们使用了 UL 的.list-inline类来在单行中显示产品图片
然而，在非常窄的手机屏幕上，图片将会垂直堆叠。
您最近访问的标题并非来自前面的代码；我们将在接下来的章节中很快看到完整的代码。

网格系统

设计响应式网站的基本规则之一是尽可能去除传统的 HTML 表格，并使用流体 div 元素。

Bootstrap 网格系统的基本架构是将屏幕水平划分为最多 12 列（逻辑上）。Bootstrap 提供了类来创建每种设备尺寸的列组合 - 如下矩阵所示：

类名	描述
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1	用于在相应设备尺寸中占用一列的类。
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2	用于在相应设备尺寸中占用两列的类。
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3	用于在相应设备尺寸中占用三列的类。
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4	用于在相应设备尺寸中占用四列的类。
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5	用于在相应设备尺寸中占用五列的类。
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6	用于在相应设备尺寸中占用六列的类。
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7	用于在相应设备尺寸中占用七列的类。
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8	用于在相应设备尺寸中占用八列的类。
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9	用于在相应设备尺寸中占用九列的类。
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10	在相应设备大小中用于占用十个列的类。
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11	在相应设备大小中用于占用十一个列的类。
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12	在相应设备大小中用于占用所有十二列的类。

我们将举几个示例场景来说明这一点。在我们的第一个场景中，假设我们想要创建三个等宽的列——无论所有设备大小如何。这个代码如下：

<div class="row">
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Column 1: col-xs-4 col-sm-4 col-md-4 col-lg-4
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Column 2: col-xs-4 col-sm-4 col-md-4 col-lg-4
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Column 3: col-xs-4 col-sm-4 col-md-4 col-lg-4
  </div>
</div>

这里是输出（在所有设备上可见）：

在我们的第二个场景中，假设我们只想在较小屏幕上显示前两列，第三列将不会显示，而在较大屏幕上我们保持相同的设计。我们的代码如下：

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
    Column 1: col-xs-6 col-sm-4 col-md-4 col-lg-4
  </div>
  <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
    Column 2: col-xs-6 col-sm-4 col-md-4 col-lg-4
  </div>
  <div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
    Column 3: hidden-xs col-sm-4 col-md-4 col-lg-4
  </div>
</div>

因此，输出如下：

在第三个场景中，假设在较小屏幕上我们需要所有列都垂直排列。在中等屏幕上，前两列应占用更多空间，而在大屏幕上它们应该是相等的。以下是我们的代码：

<div class="row">
  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4">
    Column 1: col-xs-12 col-sm-5 col-md-5 col-lg-4
  </div>
  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4">
    Column 2: col-xs-12 col-sm-5 col-md-5 col-lg-4
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2 col-lg-4">
    Column 3: col-xs-12 col-sm-2 col-md-2 col-lg-4
  </div>
</div>

输出如下：

如您所见，三列的宽度（和可见性）正由类根据目标设备和屏幕大小自动控制。

要创建一个一列宽度的占位符，您使用.col-*-1类；对于两列宽度，您使用.col-*-2类；依此类推。对于一个占用所有 12 列空间的占位符，您使用.col-*-12类。这里的*代表您要针对的相应设备大小（如xs、sm、md和lg）。

这里最重要的一个点就是列的总大小必须始终为 12——如果小于 12，则会有一些空间未被使用，如果大于 12，则最后一个占位符将被换行。

这也是为什么在第一个场景中，我们为所有设备大小使用了具有四列大小的类，如col-xs-4、col-sm-4等。由于我们有三个占位符在一行中，每个占位符的大小变为4（3X4=12）。

在第二个场景中，对于超小设备，我们使前两个占位符每个都使用col-xs-6，而第三个占位符被隐藏（6+6=12）。

在第三个场景中，我们使第一个占位符在最小设备上跨越整个宽度（col-xs-12）。对于中等设备，我们使前两列占用大部分空间（5+5+2=12）。而对于大设备，所有占位符都是相等的。

因此，您可以看到，Bootstrap 的网格系统使您能够轻松地为所有设备大小创建表格布局，而且无需任何额外的复杂 CSS/JavaScript 编码。

构建数据输入表单

表单是网页的组成部分——无论何时您需要从用户那里捕获任何信息，您都需要在页面上创建一个网络表单。Bootstrap 提供了多种方式来设计和创建适用于移动设备和桌面的 HTML 表单。

让我们为我们的网络应用程序创建一个 联系我们 表单。以下是我们的代码：

<form>
  <div class="form-group">
    <label for="yourName" class="control-label">Name</label>
    <input type="text" class="form-control" id="yourName" placeholder="Your name please">
  </div>
  <div class="form-group">
    <label for="yourEmail" class="control-label">Email address</label>
    <input type="email" class="form-control" id="yourEmail" placeholder="Your Email Id">
  </div>
  <div class="form-group">
    <label for="yourComments" class="control-label">Tell us</label>
    <textarea class="form-control" id="yourComments" placeholder="Your commments" rows="3"></textarea>
  </div>
  <div class="checkbox">
    <label><input type="checkbox">Subscribe Me !!!</label>
  </div>
  <button type="submit" class="btn btn-primary">Post It</button>
</form>

下面是表单可能的样子：

使表单水平排列

假设现在我们想要将标签水平地与控件并排显示。执行此操作的代码如下：

<form class="form-horizontal">
  <div class="form-group">
    <label for="yourName" class="col-sm-3 control-label">Name</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="yourName" placeholder="Your name please">
    </div>
  </div>
  <div class="form-group">
    <label for="yourEmail" class="col-sm-3 control-label">Email address</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="yourEmail" placeholder="Your Email Id">
    </div>
  </div>
  <div class="form-group">
    <label for="yourComments" class="col-sm-3 control-label">Tell us</label>
    <div class="col-sm-9">
      <textarea class="form-control" id="yourComments" placeholder="Your commments" rows="3"></textarea>
    </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <div class="checkbox">
      <label><input type="checkbox">Subscribe Me !!!</label>
    </div>
  </div>
  <div class="clearfix">&nbsp;</div>
  <div class="col-sm-12 text-center">
    <button type="submit" class="btn btn-primary">Post It</button>
  </div>
</form>

输出结果如下所示：

完成联系我们页面

让我们通过为每个文本控件添加一些上下文图标来进一步美化表单。我们将在应用程序中创建一个完整的 联系我们 页面。以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Contact Us</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
    <link href="bs/css/bootstrap-theme.min.css" rel="stylesheet">

    <script type="text/javascript" src="img/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="img/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="page-header"><h1><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;We would like to hear from you !!!</h1></div>

      <form class="form-horizontal">
        <div class="form-group">
          <label for="yourName" class="col-sm-3 control-label">Name</label>
          <div class="col-sm-9">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-user"></span>
              <input type="text" class="form-control" id="yourName" placeholder="Your name please">
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="yourEmail" class="col-sm-3 control-label">Email address</label>
          <div class="col-sm-9">
            <div class="input-group">
              <span class="input-group-addon">@</span>
              <input type="email" class="form-control" id="yourEmail" placeholder="Your Email Id">
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="yourComments" class="col-sm-3 control-label">Tell us</label>
          <div class="col-sm-9">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-comment"></span>
              <textarea class="form-control" id="yourComments" placeholder="Your commments" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3">
          <div class="checkbox">
            <label><input type="checkbox">Subscribe Me !!!</label>
          </div>
        </div>
        <div class="clearfix">&nbsp;</div>
        <div class="col-sm-12 text-center">
          <button type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Post It</button>
        </div>
      </form>
    </div>
  </body>
</html>

下面是页面可能的样子：

现在我们来看看幕后发生了什么：

.form-group 类用于封装组内的多个控件——就像我们对标签和相应的文本框所做的那样。
.control-label 和 .form-control 类分别用于设置标签和表单元素的样式。
如果您想要创建一个具有水平标签和控件的表单——请使用 .form-horizontal 类，并将标签和控件放置为网格列。.control-group 类将作为表单中的每一行。
使用 .input-group 类可以将多个控件关联在一起。
您可以使用 .form-inline 类创建内联表单，而不是使用 form-horizontal 类。
您可以为控件使用 disabled 或 readonly 状态——Bootstrap 将自动关联必要的样式，但是，所有控件都必须添加 .form-control 类。
使用 .has-success、.has-warning、.has-error 类来反映各种验证状态。
为了控制大小，您可以使用 .input-lg、.input-sm 类。为了控制一组的大小，您可以使用 .form-group-lg 或 .form-group-sm 类。
为了显示任何帮助文本，您可以在单独的标签中使用 .help-block 类。这将使文本在新的一行中显示。
我们使用 .btn-primary 类来设置按钮样式。除此之外，其他可用的类包括 .btn-success、.btn-warning、.btn-info、.btn-danger 和 .btn-link。
我们已经使用 Glyphicons 来美化表单。这个概念在后面的章节中会详细介绍。

其他实用类

Bootstrap 提供了多种其他实用 CSS 类，您可以在多种场合和目的中使用：

对于应遵循 Web 可访问性标准的网站（www.w3.org/WAI/），内容必须与屏幕阅读器和其他等效设备兼容。为此，您使用 .sr-only 和 .sr-only-focusable 类。这将确保内容对于普通人和屏幕不会被渲染；然而，它将被屏幕阅读器读出。
对于显示或隐藏内容，您应该分别使用 .show 和 .hide 类。
对于内容的水平对齐，可用的类有 .pull-left 和 .pull-right。
Bootstrap 提供了五种不同的前景颜色类 – .text-primary、.text-danger、.text-warning、.text-info 和 .text-success。同样地，对于背景，您有 .bg-primary、.bg-danger、.bg-warning、.bg-info 和 .bg-success。
对于创建表格，您会使用标准的 <table> 标签；然而，除了这个之外，我们还应该使用 .table 类来设置元素。为了在表格和单元格周围渲染边框，使用的是 .table-bordered 类；而对于显示交替颜色的行，您应该使用 .table-striped 类。同样地，为了在鼠标悬停时改变行的颜色，您会使用 .table-hover 类。
重要的是，为了创建响应式表格，您应该使用 .table-responsive 类。请注意，这个类只影响小于 768px 的设备上的显示，对于更大的设备则没有效果。

封装一切

我们现在使用本章讨论的类和样式重写我们的示例应用程序主页。

注意

完整的源代码可以从 Packt Publishing 网站下载。

在桌面上，页面现在看起来是这样的：

对于屏幕尺寸较小的设备，页面看起来如下：

摘要

在本章中，我们学习了 Bootstrap 框架提供的 CSS 类和功能。当然，这并不涵盖 Bootstrap 在 CSS 方面提供的所有类和功能，一个章节可能不足以涵盖 Bootstrap 提供的所有功能范围。然而，我们仍然涵盖了几乎所有的主要功能；接下来章节中我们将继续介绍其他功能。我们还在我们的示例应用程序中添加了一个新的页面，即“联系我们”，并用一些新的布局和漂亮的区域重新设计了主页。

在下一章中，我们将学习 Bootstrap 一起提供的打包组件。

第四章：Bootstrap 中的组件包

Bootstrap 中的组件可以理解为相关 HTML 元素的集合，每个元素都与预定义的 CSS 类相关联，以生成特定的功能性和 UI 效果。在前一章中，我们看到了每个 HTML 元素是如何被 Bootstrap CSS 样式的；在这一章中，我们将看到一些元素，每个元素都由一些 CSS 类提供支持，一起可以创建一个新的控件并生成完整的功能——一个新的复杂组件。

例如，你一直都在 HTML 中创建组件，如导航栏、分页控件、进度条、警告和通知。你也知道，这些实际上是由许多 HTML 元素组合而成的集合。大多数时候，你使用了一些第三方库，或者自己使用大量的 HTML、CSS 和 JavaScript 代码来构建组件。

现在是时候使用 Bootstrap 组件了，这些组件非常直观，易于使用，最重要的是，实现起来代码行数更少。当然，所有这些默认都是移动友好的。

在这一章中，我们将介绍 Bootstrap 框架提供的几个主要组件：

使用 Glyphicons
创建导航栏
设计徽章、工具栏和按钮组
显示警告和警告信息
使用面板和井组织内容
使用分页和面包屑控制导航

页面页头

你在页面上最想要的是顶部的一个漂亮的页头。这是一个简单的 HTML 标题，包裹在一个div元素中。

这里是我们应用程序主页上使用的代码：

<div class="page-header"><h1>Welcome to the Online Megastore</h1>
</div>

如果你喜欢在页头旁边加上一条消息，你可以在其中使用<small>元素。例如，看看以下代码：

<div class="page-header">
<h1>Welcome to the Online Megastore <small>the one-stop shop</small></h1>
</div>

Glyphicons

根据Glyphicons 的原始供应商，“这是一个精心准备的单一颜色图标和符号库，强调简洁和易于定位。”简单来说，这些都是图标字体，用于表示和象征简单和常见的操作和行为。例如，如果你想为主页添加一个超链接，你可以添加一个表示这个链接的图标。购物车有一个最常见的图标；类似的例子还有登录按钮/链接或注销按钮/链接。

这些图标在今天的网页设计中非常常见，很多时候，仅使用图标就足够了，你可能不需要在之后写任何文本。到目前为止，你将使用小图标图像来完成这个目的；然而，现在我们将使用尺寸非常小、渲染速度快、在移动设备上也很高效的 Glyphicons。此外，它们可以轻松缩放和更改颜色，通过使用这些图标来替换图像图标，可以最小化 HTTP 调用次数。

为了在 Bootstrap 中使用 Glyphicons，你只需简单地添加一个带有适合你图标的 CSS 类的span元素。例如，看看以下代码：

<span class="glyphicon glyphicon-home"></span>

如果你注意，我们在主页的页面标题中使用了这个图标，并且在页面标题文本之前生成了主页图标。Bootstrap 库中提供了丰富的 Glyphicons，具体列表请见getbootstrap.com/components/#glyphicons。

你可能还记得，在 Bootstrap 的文件夹结构中有一个fonts文件夹——这个文件夹中的文件负责所有 Glyphicons 的功能。

导航栏

在页面标题之后，下一件重要的事情是为用户提供一个导航栏，以便浏览您网站的不同页面。

我们的应用程序页面目前还没有导航栏。我们虽然有两个页面在我们的应用程序中——让我们为这些页面添加一个导航栏。

这是导航栏的基本和初步代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#the-menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand brand" href="/index.html">Megastore</a>
    </div>

    <div class="collapse navbar-collapse" id="the-menu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index.html">Home</a></li>
        <li><a href="/contact.html">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>

小贴士

下载示例代码

您可以从您在www.packtpub.com的账户中下载示例代码文件，以获取您购买的所有 Packt Publishing 书籍。如果您在其他地方购买了这本书，您可以访问www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。

我们将此代码包含在我们的索引页中，位于主div容器下方。其渲染效果如下：

对于较小的设备，如手机，其外观如下所示：

这里需要注意的最重要的事情是，导航菜单已经自动转换为汉堡或三明治图标，因为这是最受欢迎和标准的移动设备显示菜单方式。

现在，让我们给我们的导航栏添加一些更有趣的功能。例如，如果你在主页上垂直滚动，导航栏会在顶部消失。我们将添加另一个 Bootstrap 类，使其固定在顶部。

<nav class="navbar navbar-default navbar-fixed-top">

这将使菜单栏固定在浏览器顶部，并且即使在您有很长的页面并且用户向下滚动时，也会始终对用户可见。

小贴士

然而，您会注意到实际的内容被固定在导航栏下方覆盖。为了纠正这一点，我们需要给body元素添加一定的顶部填充。我们已经在body标签中添加了这一点，然而，当然建议将其放在 CSS 类中：

<body style="padding-top: 30px;">

我们接下来要做的是用一些图标美化我们的菜单。为此，我们将为每个菜单项添加 Glyphicons，使用以下代码：

<ul class="nav navbar-nav">
  <li class="active"><a href="/index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>
  <li><a href="/contact.html"><span class="glyphicon glyphicon-earphone"></span>&nbsp;Contact Us</a></li>
</ul>

我们还需要在顶部菜单中添加一个登录链接，以便用户可以从菜单本身登录/注销。我们只需在导航菜单中添加另一个UL链接：

<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Sign In</a></li>
</ul>

最后，一个搜索框，使用户能够搜索我们商店的任何产品，如下所示：

<form class="navbar-form navbar-right visible-md-inline visible-lg-inline">
  <div class="form-group" style="margin-top: 4px">
    <label class="sr-only" for="keyword">Keyword</label>
    <input type="text" class="form-control input-sm" id="keyword" placeholder="Enter Search keyword" />
  </div>
</form>

如果您注意的话，我们只为中等和大型设备添加了这个搜索框。以下是导航栏的最终源代码。我们为显示我们商店中所有产品的页面添加了另一个链接（browse.html）。我们将在稍后创建这个页面。我们还添加了一个链接以查看用户的购物车：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#the-menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand brand" href="/index.html">Megastore</a>
    </div>

    <div class="collapse navbar-collapse" id="the-menu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>
        <li><a href="/browse.html"><span class="glyphicon glyphicon-briefcase"></span>&nbsp;Browse Products</a></li>
        <li><a href="/contact.html"><span class="glyphicon glyphicon-earphone"></span>&nbsp;Contact Us</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;My Cart</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Sign In</a></li>
      </ul>
      <form class="navbar-form navbar-right visible-md-inline visible-lg-inline">
        <div class="form-group" style="margin-top: 4px">
          <label class="sr-only" for="keyword">Keyword</label>
          <input type="text" class="form-control input-sm" id="keyword" placeholder="Enter Search keyword" />
        </div>
      </form>
    </div>
  </div>
</nav>

这里是我们导航栏的当前外观：

徽章

徽章是简单的指示器，用于显示您想要突出显示的项目数量。非常简单的用例包括显示未读通知、电子邮件、消息等。我们将在导航栏中添加这个，以显示购物车中的项目数量。这是更新的代码行：

<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;My Cart <span class="badge">4</span></a></li>

它看起来是这样的：

如您所见，您只需简单地添加一个带有 badge 类的 span 元素，并将文本放在里面以突出显示。

警告

您可以使用警告（alerts）向用户传达沟通信息；例如，显示用户正在尝试进行的操作的状态，显示一些系统信息，显示用户任何警告消息，显示任何错误消息或状态，等等。显示基本警告相当简单——只需在 Bootstrap 中创建一个带有 .alert 类的 div 元素。例如，看看以下代码：

<div class="alert alert-info">You last visited us on ...</div>

您可以使用这些类中的任何一个来显示上下文信息——alert-info、alert-warning、alert-success 或 alert-danger。

在 alert 中放置链接需要您在 anchor 标签中添加 .alert-link。这将确保链接也将以相应的上下文颜色显示。例如，我们已将此警告添加到主页的最后部分：

<div class="alert alert-info">You last visited us on Thursday, 20th March 2015\. Please <a href="/contact.html" class="alert-link">let us know</a> in case of any issues or feedback.</div>

注意

Bootstrap 警告模块还提供了一些其他功能，我们将在下一章中讨论。

工具栏和按钮组

为了将多个按钮组合在一起，我们会使用 .btn-group 类。这个类创建了一组按钮；然而，这些按钮中的每一个都必须关联有 .btn 类。例如，使用以下代码：

<div class="btn-group">
  <button type="button" class="btn btn-success">Add</button>
  <button type="button" class="btn btn-warning">Edit</button>
  <button type="button" class="btn btn-danger">Delete</button>
</div>

这就是前面的代码将生成的内容：

我们可以将多个按钮组合在一起生成工具栏。让我们有点创新，在按钮中使用图标（而不是按钮文本）。以下是这个代码：

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-print"></span></button>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
</div>

这就是我们的工具栏外观：

您还可以将按钮组、工具栏和下拉菜单一起使用，以生成更丰富的用户体验。我们将在下一章中探讨这些内容。

面板

当然，您希望将您的网页和内容分割成不同的部分和子部分。这就像您在普通门户框架中看到的那样，或者像 iGoogle 时代那样流行。我们也在我们的主页上使用了这种模式，我们创建了三个不同的部分——最新添加、最受欢迎的产品和您最近访问过。

在 Bootstrap 中，可以使用面板创建这些部分。Bootstrap 中的面板有两个独立的占位符——即标题和主体，分别使用类.panel-heading和.panel-body。

就像 Bootstrap 中的许多其他组件一样，面板也有五种不同的模式——.panel-info、.panel-success、.panel-primary、.panel-warning和.panel-danger。

因此，在我们的代码中，我们使用了：

<div class="panel panel-warning">
  <div class="panel-heading">Most Popular Products</div>
  <div class="panel-body">...</div>
</div>

还建议在.panel-heading内部使用.panel-title类，以保留预定义的标题样式并显示超链接的上下文颜色。

与面板标题类似，您也可以使用.panel-footer来创建面板的页脚部分。因此，一个完整的面板代码可以如下所示：

<div class="panel panel-warning">
  <div class="panel-heading">
    <h2 class="panel-title">some title</h2>
  </div>
  <div class="panel-body">contents</div>
  <div class="panel-footer">some footer</div>
</div>

一个有趣的方面是展示面板内的表格。Bootstrap 足够智能，可以合并所有填充和边框，并将这两个控件无缝统一。

这里是代码：

<div class="panel panel-warning">
  <div class="panel-heading">
    <h2 class="panel-title">some title</h2>
  </div>
  <table class="table table-hover table-striped">
    <thead><td>caption 1</td><td>caption 2</td></thead>
    <tr><td>line 1</td><td>line 1</td></tr>
    <tr><td>line 1</td><td>line 1</td></tr>
    <tr><td>line 1</td><td>line 1</td></tr>
    <tr><td>line 1</td><td>line 1</td></tr>
  </table>
  <div class="panel-footer">some footer</div>
</div>

输出如下：

如您所见，表格及其边框与面板无缝连接，给人一种统一的外观和感觉。

井

井几乎与面板相似，但功能更少。这将为您生成一个容器元素，以便可以在该容器中渲染一组逻辑上相关的 HTML 内容。

例如，让我们回顾一下我们在上一章中创建的联系我们页面。让我们把这个表单放在一个井里。这就是现在页面的样子：

注意

页面的完整源代码可以从www.packtpub.com/下载。

除了添加导航栏外，我们还可以添加一个新的具有类.well的div元素，并将联系我们表单包裹在那个井里：

<div class="well well-sm">
  <form class="form-horizontal">

我们现在将看到我们页面的完全不同的外观。

巨幕

Bootstrap 中的一个有趣的新增功能是巨幕。这是一个可选地捕获整个视口并在其中渲染内容的组件。当我们想要展示一些内容，或者在有些页面中需要显示重要信息时，我们可以使用这个组件。一个很好的例子是 404 页面：

如您所见，该部分已捕获可用屏幕空间的全宽。然而，如果您不希望这样，这里还有一个变体：

代码如下：

<div class="jumbotron">
  <div class="container">
    <h1 style="padding-bottom: 50px">Oooops, we cannot find this page.</h1>
    <a href="/index.html" class="btn btn-warning btn-lg btn-block">Go to Home Page</a>
  </div>
</div>

两个方差之间的区别仅在于，在第一种情况下，jumbotron代码块放置在主容器元素外部，而在第二种情况下，代码块放置在主容器元素内部。

因此，在第一种情况下，它捕获了整个屏幕的宽度，而在第二种变化中，它被渲染为一个固定宽度的视图。

面包屑导航

这是一个简单的组件，用于在您的网页中生成面包屑导航。只需在 OL 元素中添加 .breadcrumb 类，它内部的 LI 元素将被渲染为每个面包屑阶段。以下是代码：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Browse Categories</a></li>
  <li><a href="#">Electronics</a></li>
  <li><a href="#">Mobiles</a></li>
  <li><a href="#">Apple</a></li>
  <li class="active">iPhone 6</li>
</ol>

这里是生成的面包屑导航：

分页导航

Bootstrap 提供了两种分页控件模式，如下所示：

这里是代码：

<!-- Pattern #1 -->
<nav>
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>

<!-- Pattern #2 -->
<nav>
  <ul class="pager">
    <li><a href="#">&larr;&nbsp;Previous</a></li>
    <li><a href="#">Next&nbsp;&rarr;</a></li>
  </ul>
</nav>

如您所见，这两种模式都是简单的无序列表（UL）控件，但使用了不同的 Bootstrap 类。

摘要

在本章中，我们看到了如何通过在一系列 HTML 控件中使用多个 CSS 类来扩展 Bootstrap，以创建不同的打包组件。通过这个过程，我们几乎拥有了设计灵活网页所需的所有常用控件。所有这些组件都是仅使用 CSS 类构建的。在下一章中，我们将探索 Bootstrap 的 JavaScript 组件。

第五章. Bootstrap 中的 JavaScript 插件

Bootstrap 框架中最强大的功能之一是 JavaScript 插件。在这个库中，我们几乎拥有所有必需的前端组件，例如模态窗口、轮播图、下拉菜单、工具提示、警告、导航标签、手风琴等。与之前讨论的 CSS 类和组件一起，这些 JavaScript 插件使 Bootstrap 成为一个完整的套件和框架，用于开发你的 HTML 页面——无论是桌面设备还是移动设备。

在本章中，我们将深入探讨这些插件，并使用这些组件极大地增强我们的示例应用程序。

正如我们之前简要讨论过的，Bootstrap JavaScript 组件是使用 jQuery（jquery.com/）构建的，并且基于 jQuery。因此，这些插件的语法和行为与 jQuery 相似。

注意

我们假设你对 jQuery 有基本的了解，因为我们将使用基于 jQuery 的脚本在我们的进一步实现和解释中。

对于不熟悉 jQuery 的人来说，可以参考api.jquery.com/上的在线文档。

基本概念

在深入实现 JavaScript 插件之前，让我们首先澄清一些基本概念。

自定义数据属性

根据 W3C 规范，自定义数据属性可以定义为以下内容：

"自定义数据属性旨在存储页面或应用程序专有的自定义数据，对于这些数据没有更合适的属性或元素。"

(www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes). 因此，在 HTML5 中，你可以在任何 HTML 元素中添加自定义属性。属性名应该以data-*开头；在这里，*代表你属性的真正名称。属性值，就像任何其他 HTML 属性一样，是字符串。这一特性是在 HTML5 中引入的，以使网站开发者能够存储与 HTML 元素对应的自定义值，即那些不能在任何标准属性中调整的值。

在 Bootstrap JavaScript 插件中，一些这样的自定义数据属性被大量使用：

data-target
data-toggle
data-dismiss
data-spy
data-placement
data-content
data-container
data-animation
data-loading-text
data-complete-text
data-parent
data-slide
data-ride

所有这些data-*属性完全是自定义的，并由 Bootstrap 框架使用。我们将在后面看到这些数据属性如何在各种 JavaScript 组件中使用。简而言之，即使在不编写任何 JavaScript 代码的情况下，你也能围绕这些插件开发功能。

JavaScript API

尽管我们可以使用 Bootstrap 中使用的强大数据属性开发许多功能，但我们仍然需要标准的操作方式——调用方法、处理事件、动态设置属性等等。

JavaScript 事件

像任何其他标准的 JavaScript 组件库一样，Bootstrap 附加组件也支持典型的触发和处理事件的方式。当您想要在特定事件发生时执行某些操作时，处理这些事件可能非常有用。例如，您希望在模态窗口关闭时调用 AJAX 调用。

打包附加组件

正如您在前面的章节中注意到的源代码中，我们已经将bootstrap.min.js文件包含到了我们的 HTML 页面中。这个文件包含了 Bootstrap 提供的所有 JavaScript 附加组件。因此，当您将此文件包含到 HTML 页面中时，您将能够使用任何和所有这些附加组件。

如果您只想包含和使用可用的组件中的一部分，那么您也可以创建并使用这个文件的子集。我们将在后面的章节中看到如何做到这一点。

模态窗口

模态窗口可能是最广泛使用的自定义组件之一。标准 JavaScript 的 alert 和 prompt 时代已经过去了；您应该实现自定义模态窗口以与用户交互。

Bootstrap 提供了一套丰富的功能和特性，几乎可以满足所有关于模态窗口的需求变化。

基本模态窗口

下面是最基本的模态窗口版本：

下面是创建它的代码：

<div class="modal" id="theModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="theModalLabel">Title of the window</h4>
      </div>
      <div class="modal-body">
        Some contents.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

当然，您需要一个按钮或链接来打开这个窗口。下面是相应的代码：

<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#theModal">Open Modal</button>

通过仅仅放置这两个代码块，您应该能够创建一个模态窗口和一个打开它的按钮。如您所见，我们还没有编写任何 JavaScript 代码，但仍然可以生成一个模态窗口和一个控制打开它的控件。

这里需要注意的最重要的事情是button元素的data-toggle和data-target属性。通过将模态窗口作为data-toggle的值，我们通知 Bootstrap 这个按钮将调用某个模态窗口，而应该调用哪个模态窗口则由data-target属性决定。因此，您可以看到data-target属性的值是模态窗口——这实际上是作为模态窗口工作的div元素的 ID。现在，让我们注意一下modal-footer部分中的按钮。这个按钮有一个data-dismiss属性，表示它将关闭当前的模态窗口。

这是最常见的 Bootstrap 分发的 JavaScript 附加组件的工作方式。当然，其他组件中也在使用几个其他数据属性，但开发和用法是相同的。

最后，我们也可以通过常规 JavaScript 打开模态对话框，如果你出于某种原因不想使用数据属性——例如，如果你想在发生特定事件时打开模态窗口，例如 AJAX 回调被调用。以下是我们的传统脚本方式：

<button type="button" class="btn btn-primary btn-lg" onclick="callMe()">Open Modal by Script</button>

脚本如下：

function callMe() {
$('#theModal').modal();
}

此方法本质上是一个简化的重载变体的形式：

modal('show'): 这会打开模态对话框。
modal('hide'): 这会关闭对话框。
modal('toggle'): 这会切换状态——如果对话框是打开的，则关闭；如果关闭，则打开。
modal(options): 一些常用的选项包括 keyboard（true/false）、show（true/false）和 backdrop（static/true/false）。将 keyboard 的值设置为 false 可以确保在按下 Esc 键时对话框不会关闭。将 static 设置为 backdrop 的值将限制在鼠标点击时对话框不会关闭。

注意

这里需要注意的一个重要事项是，如果你想要使用前面的任何选项（例如 keyboard、show、backdrop），你可能需要使用 JavaScript API，而不是通过数据属性来调用对话框。

示例 - 使用模态对话框增强我们的应用程序

现在，让我们通过模态对话框来增强我们的应用程序。你可能还记得，在前一章中我们在顶部导航栏中添加了一个用于登录的链接。让我们为用户提供一个登录我们网站的弹出窗口。以下是我们的模态框代码：

<!-- Sign In Dialog Box -->
<div class="modal fade" id="logonBox" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <input type="text" class="form-control" id="userName" placeholder="User Name">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="doLogon">Sign In</button>
      </div>
    </div>
  </div>
</div>

这是导航栏中登录链接的代码：

<li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Sign In</a></li>

最后，这是我们的 JavaScript：

<script>
  $('#logonLink').on('click', function(e) {
    $('#logonBox').modal({
      keyboard: false,
      backdrop: 'static'
    });
  });
  $('#doLogon').on('click', function(e) {
    alert('Thank you for Signing In');
    $('#logonBox').modal('hide');
  });
</script>

注意

你可以从下载的源代码包中获取完整的页面源代码。

这就是我们的登录对话框的外观：

在脚本中，当然，你需要添加你的代码来实际登录用户，这可能是一个提交调用或对服务器的 AJAX 调用。

此外，Bootstrap 模态窗口还支持一些事件，以便在发生这些事件之一时执行任何操作。

例如，看看以下代码：

$('#logonBox').on('hidden.bs.modal', function (e) {
  alert('You have cancelled the Sign In operation');
})

这将在模态窗口完全关闭时显示此浏览器警告。其他公开的事件包括—show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal 和 loaded.bs.modal。

<div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li ><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li ><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    <li ><a href="#tab4" data-toggle="tab">Tab 4</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab1"><br/>This is Tab 1</div>
    <div class="tab-pane" id="tab2"><br/>This is Tab 2</div>
    <div class="tab-pane" id="tab3"><br/>This is Tab 3</div>
    <div class="tab-pane" id="tab4"><br/>This is Tab 4</div>
  </div>
</div>

这里是简单的标签显示：

显示标签的另一种方式被称为药丸。只需将类 .nav-tabs 替换为 .nav-pills。以下是实现方式：

现在，让我们在我们的应用程序中使用这个标签显示。我们想要有一个注册表单（到目前为止，我们只有登录）。我们将把这个注册表单添加到显示登录表单的同一个模态对话框中。以下是相同截图的截图：

下面是注册标签的截图：

现在，让我们看看前述截图的代码：

<div class="modal fade" id="logonBox" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <div>
          <ul class="nav nav-pills">
            <li class="active"><a href="#signin" data-toggle="tab" data-caption="Sign In">Sign In</a></li>
            <li ><a href="#signup" data-toggle="tab" data-caption="Sign Up">Sign Up</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="signin">
              <form style="padding-top: 5px">
                <div class="form-group">
                  <input type="text" class="form-control" id="userName" placeholder="User Name">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
                <button type="button" class="btn btn-success btn-block" id="doLogon">Sign In</button>
              </form>
            </div>
            <div class="tab-pane" id="signup">
              <form style="padding-top: 5px">
                <div class="form-group">
                  <input type="text" class="form-control" id="yourName" placeholder="Your Full Name">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" id="yourUserName" placeholder="Desired User Name">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" id="yourEmail" placeholder="Your Email Id">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="yourPwd" placeholder="Password">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="confirmPwd" placeholder="Confirm Password">
                </div>
                <button type="button" class="btn btn-success btn-block" id="doLogon">Sign Up</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

下面是相应的 JavaScript 代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var data = $(e.target).data('caption');
  var modal = $('#logonBox');
  modal.find('.modal-title').text(data);

});

HTML 标记相当直观；然而，这段小的 JS 代码很有趣。这段代码的作用是，当用户从一个标签导航到另一个标签（从登录到注册，反之亦然）时，对话框的标题（标题）会相应地更改。

这里有几个值得注意的点：

当选择新标签时（shown.bs.tab 事件），将调用此函数。这个函数本质上是一个事件处理器。
e.target 对象代表新打开的标签。
在 HTML 标记中，你可以看到我们添加了一个自定义数据属性 data-caption；此属性用于设置模态窗口的标题。

与此 shown.bs.tab 事件类似，其他公开的事件还包括—show.bs.tab、hide.bs.tab 和 hidden.bs.tab。

折叠和手风琴

Bootstrap 折叠组件用于简单地显示和隐藏网页的不同部分和子部分。当你不想在最初显示这些部分，但点击按钮或超链接时可以切换时，这很有用。以下是一个简单的示例：

下面是前述截图的 HTML 代码：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#theSection" id="theButton">Open this</button>
<div class="collapse" id="theSection">
  <div class="well">
    this content is coming from the collapsible section.
  </div>
</div>

前述截图的 JavaScript 代码是：

// When the collapsible element is shown, change the button's text to 'close this'
$('#theSection').on('show.bs.collapse', function () {
  $('#theButton').text('Close this');
});
// When the collapsible element is collpased, change the button's text to 'Open this'
$('#theSection').on('hide.bs.collapse', function () {
  $('#theButton').text('Open this');
});

再次，通过使用 data-target 和 data-toggle 属性，我们已经实现了折叠行为。此外，我们还使用了 show.bs.collapse 和 hide.bs.collapse 事件处理器来相应地更改按钮的文本。

示例 - 显示我们商店的产品类别

你可能记得我们在上一章中在我们的导航栏中添加了一个链接。让我们为它创建一个页面，并在这个页面中使用这个折叠组件作为手风琴来显示我们商店的产品类别。以下是使用手风琴模式对类别进行标记的代码：

<div class="panel-group" id="catList">
  <div class="panel panel-primary" id="cat1Head">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#catList" href="#cat1"><span class="glyphicon glyphicon-user"></span>&nbsp;Fashion and Clothing for Him</a>
      </h4>
    </div>
    <div id="cat1" class="panel-collapse collapse in">
      <ul class="list-group">
        <li class="list-group-item">Shirts</li>
        <li class="list-group-item">Tees</li>
        <li class="list-group-item">Trousers</li>
        <li class="list-group-item">Footwear</li>
        <li class="list-group-item">Accessories</li>
      </ul>
    </div>
  </div>

  <div class="panel panel-default" id="cat2Head">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#catList" href="#cat2"><span class="glyphicon glyphicon-heart"></span>&nbsp;Fashion and Clothing for Her</a>
      </h4>
    </div>
    <div id="cat2" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">Shirts</li>
        <li class="list-group-item">Tees</li>
        <li class="list-group-item">Skirts</li>
        <li class="list-group-item">Footwear</li>
        <li class="list-group-item">Jewellery</li>
        <li class="list-group-item">Accessories</li>
      </ul>
    </div>
  </div>

  <div class="panel panel-default" id="cat3Head">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#catList" href="#cat3"><span class="glyphicon glyphicon-phone"></span>&nbsp;Electronics</a>
      </h4>
    </div>
    <div id="cat3" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">Mobiles</li>
        <li class="list-group-item">Tablets</li>
        <li class="list-group-item">LEDs and LCDs</li>
        <li class="list-group-item">Laptops</li>
        <li class="list-group-item">Desktops</li>
        <li class="list-group-item">Cameras</li>
        <li class="list-group-item">Appliances</li>
        <li class="list-group-item">Health Care</li>
        <li class="list-group-item">Accessories</li>
      </ul>
    </div>
  </div>
</div>

下面的 JavaScript 代码可以使用一些额外的 Bootstrap 类来美化我们的标记：

$('#cat1').on('show.bs.collapse', function () {
  $('#cat1Head').removeClass('panel-default').addClass('panel-primary');
  $('#cat2Head').removeClass('panel-success').addClass('panel-default');
  $('#cat3Head').removeClass('panel-warning').addClass('panel-default');
});      
$('#cat2').on('show.bs.collapse', function () {
  $('#cat1Head').removeClass('panel-primary').addClass('panel-default');
  $('#cat2Head').removeClass('panel-default').addClass('panel-success');
  $('#cat3Head').removeClass('panel-warning').addClass('panel-default');
});      
$('#cat3').on('show.bs.collapse', function () {
  $('#cat1Head').removeClass('panel-primary').addClass('panel-default');
  $('#cat2Head').removeClass('panel-success').addClass('panel-default');
  $('#cat3Head').removeClass('panel-default').addClass('panel-warning');
});

这就是我们分类浏览器的样子。我们为三个主要类别创建了三个独立的区域。以下是所有三个类别合并在一起的截图：

最后，这是我们的浏览页面的样子：

注意

该页面的完整源代码可供下载。

工具提示和弹出框

当然，您需要为每个用户友好的网站开发添加工具提示。工具提示是您通常在图像中使用的title属性的更高级版本。以下是一个简单的工具提示：

这个 HTML 标记的示例如下所示：

<a class="btn btn-info btn-sm" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Open all items in this shop...">See all</a>

当然，data-toggle、data-placement和title属性选项仅在当前上下文中相关。您有四个选项（实际上是四个方向）的数据放置选项——顶部、右侧、底部和左侧。提示将根据此属性值显示。

然而，您需要在您想要使用提示功能的页面上初始化提示功能。这是因为，与任何其他组件不同，Bootstrap 默认不会初始化此组件。以下是相应的代码——您可以直接将其包含在 HTML 页面的 JS 部分中：

$(document).ready(function () {    
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();  
});

此脚本将启用当前页面中所有的工具提示和弹出提示。工具提示的下一个高级选项是弹出提示。在工具提示中，您不能有复杂和冗长的数据。您也不能在工具提示中显示 HTML 内容。弹出提示更灵活和高级。假设，在产品列表中，我们想在鼠标点击时显示简要详情。以下示例包含两种类型的弹出提示创建——一种通过数据属性，另一种通过 JavaScript。以下是我们的 HTML 代码：

<img src="img/p1.png" class="img-responsive img-thumbnail" title="Product 1" data-toggle="popover" data-placement="right" data-content="Details of Product 1">

对于产品 2，HTML 标记和 JavaScript 如下所示：

<img src="img/p3.png" class="img-responsive img-thumbnail" title="Product 3" id="prod3">

$('#prod3').popover({
  html:true,
  placement:'left',
  trigger:'click',
  container:'body',
  content:function(){
    return '<div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="img/p3.png" class="img-responsive img-thumbnail" alt="Product 3" title="Product 3"><br/>&nbsp;<br/><button type="button" class="btn btn-xs btn-success">Add to cart</button><br/><button type="button" class="btn btn-xs btn-info">See full details</button></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>';
  }
});

这就是弹出提示的渲染方式（两个弹出提示截图合并为一个）：

您可以看到，在 JavaScript 初始化弹出提示时，您可以传递各种其他参数，这为您提供了更多的控制和灵活性。至于content值，您始终可以调用另一个函数，该函数反过来会调用 AJAX 调用并从您的数据库中获取数据。

下拉菜单

Bootstrap 下拉组件可以在许多情况下使用，例如在菜单、按钮、链接、导航栏等。

假设我们需要在产品列表面板中创建的“查看所有”链接中的下拉菜单中添加一些选项。这是我们想要的：

这是实现此功能的标记：

<div class="dropdown">
  <a class="btn btn-info btn-sm" href="#" data-toggle="dropdown" title="Open items in this shop...">See all&nbsp;<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">See next 20 items</a></li>
    <li><a href="#">See next 100 items</a></li>
    <li class="divider"></li>
    <li><a href="#">Open all items</a></li>
  </ul>        
</div>

以类似的方式，我们还可以在导航菜单中添加下拉菜单。假设我们需要在导航栏中为用户的账户、个人资料、购物车等添加下拉菜单。这是预期的结果：

要实现这一点，我们需要更改以下行：

<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;My Cart <span class="badge">4</span></a></li>

变为以下内容：

<li class="dropdown">
  <a data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>Welcome Back&nbsp;<span class="caret"></span></a> 
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;My Cart&nbsp;<span class="badge">4</span></a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-picture"></span>&nbsp;My Profile</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-gift"></span>&nbsp;Order History</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Notifications</a></li>
  </ul>        
</li>

因此，您可以看到 Bootstrap 下拉菜单在本质上非常通用，可以在许多地方和多种用途中使用。

警告

我们在上一章中简要介绍了这个组件。为了扩展其功能，让我们添加一个简单的关闭按钮来关闭警告框：

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  You last visited us on Thursday, 20th March 2015\. Please <a href="/contact.html" class="alert-link">let us know</a> in case of any issues or feedback.
</div>

因此，我们在这里有了一个关闭按钮：

警告组件还提供了 JavaScript 接口，因为大多数时候你希望警告信息根据用户的操作动态显示。

如果你还记得，在弹出组件中，我们在产品点击时添加了一个弹出窗口，以显示产品详情。那里我们也有一个添加到购物车按钮。假设，当用户点击此按钮时，应出现一个警告框，确认产品已添加到购物车中。我们为此稍微改变了弹出窗口：

$('#prod3').popover({
  html:true,
  placement:'left',
  trigger:'click',
  container:'body',
  content:function(){
    return '<div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="img/p3.png" class="img-responsive img-thumbnail" alt="Product 3" title="Product 3"><br/>&nbsp;<br/><button type="button" class="btn btn-xs btn-success" onclick="addToCart()">Add to cart</button><br/><button type="button" class="btn btn-xs btn-info">See full details</button></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>';
  }
});

我们在这里所做的唯一改变是，为添加到购物车按钮添加了一个onclick事件处理器。

我们还在页面中添加了一个空白占位符（在页面标题之后），以便显示警告信息：

<div class="page-header"><h1><span class="glyphicon glyphicon-list-alt"></span>&nbsp;Browse Products and Categories</h1></div>
<div id="msg"></div>

最后，为onclick事件处理器编写的 JavaScript 函数：

function addToCart() {
  var txt = '<div id="alertdiv" class="alert alert-success alert-dismissable"><button class="close" data-dismiss="alert">&times;</button><h4>Congratulations</h4>This product is added to your cart.</div>';
  $('#msg').html(txt);
  $('#prod3').popover('hide');
};

因此，每当按下添加到购物车按钮时，此警告信息将显示：

当然，在这个函数中，你需要添加你的 AJAX 调用，以便实际上将产品添加到购物车中。根据这个执行结果，用户将得到通知。以下是一个示例，如果由于某种原因产品无法添加到购物车中：

更新后的代码当然位于addToCart JavaScript 函数中：

var txt = '<div id="alertdiv" class="alert alert-warning alert-dismissable"><button class="close" data-dismiss="alert">&times;</button><h4>Apologies</h4>This product could not be added into your cart. Please try again later.</div>';

如此可见，警告组件非常灵活且通用，足以在各种情况下使用。

轮播图

轮播图是流行的幻灯片组件，Bootstrap 也提供了使用它。在我们的主页上，让我们以轮播图的形式显示最受欢迎的产品。以下是 HTML 标记：

<div id="bestSellers" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#bestSellers" data-slide-to="0" class="active"></li>
    <li data-target="#bestSellers" data-slide-to="1"></li>
    <li data-target="#bestSellers" data-slide-to="2"></li>
    <li data-target="#bestSellers" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="img/c1.png" alt="Product 1">
      <div class="carousel-caption">Product 1</div>
    </div>
    <div class="item">
      <img src="img/c2.png" alt="Product 2">
      <div class="carousel-caption">Product 2</div>
    </div>
    <div class="item">
      <img src="img/c3.png" alt="Product 3">
      <div class="carousel-caption">Product 3</div>
    </div>
    <div class="item">
      <img src="img/c4.png" alt="Product 4">
      <div class="carousel-caption">Product 4</div>
    </div>
  </div>

  <a class="left carousel-control" href="#bestSellers" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#bestSellers" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

让我们把前面的代码块放置在我们主页的最受欢迎的产品部分。轮播图渲染如下截图所示：

与其他组件一样，轮播图组件也通过 JavaScript API 提供。例如，在以下代码中，如果我们必须通过脚本调用轮播图组件：

$('#bestSellers).carousel({
interval: 3000,
pause: 'hover'
});

interval值定义了每张幻灯片停留的时间和然后前进的时间（以毫秒为单位）。提及悬停暂停指示 Bootstrap 停留在当前幻灯片上，直到鼠标移出容器。轮播图组件的重要部分如下：

carousel-indicator：这些控件用于在轮播图的一组幻灯片中打开特定的幻灯片
carousel-inner：这些部分是轮播图中每张幻灯片的实际内容
carousel-control：这些实际上是用于在轮播图中导航到上一张或下一张幻灯片的左右箭头

最终预览

两个页面的完整代码可以在本书提供的可下载代码中找到。两个主要页面——主页和浏览产品页面的最终版本截图如下所示：

在小型移动设备上，它看起来如下截图所示：

这是“浏览产品”页面的桌面视图：

最后，页面的移动版本如下所示：

摘要

在本章中，我们几乎完成了对 Bootstrap 所有功能和特性的探索。我们看到了 CSS 类，可用的组件，以及最后的 JavaScript 扩展。再次强调，一些重要的 CSS 类包括网格系统、响应式类、数据输入表单、表格和图片。同样，一些重要的组件包括面板和井、工具栏和按钮组、面包屑和导航控件，以及图标字体。最后，在本章中，我们探索了 JS 扩展：模态窗口、工具提示和弹出窗口、轮播图、手风琴和警告。

在下一章中，我们将开始创建我们的 Bootstrap 开发环境，并将自定义默认的 Bootstrap 选项。

第六章：编译和构建 Bootstrap

到目前为止，我们已经讨论了 Bootstrap 的基础知识，了解了其架构，并探索了 Bootstrap 的所有功能和特性。

我们还使用各种 Bootstrap 组件创建了一个简单的 Web 应用程序。然而，我们使用了 Bootstrap 的 CSS 和 JS 文件，并没有更改或更新任何文件。尽管 JavaScript 文件的更新非常罕见，你也不会找到任何正常理由去更改 JS 文件中的内容，但覆盖 CSS 文件是非常常见的，在大多数情况下，当你使用 Bootstrap 作为前端框架进行最终生产使用时，这是非常必要的。你当然需要更改颜色、字体等等，以满足客户品牌指南。

尽管更新bootstrap.css文件并输入自己的颜色、字体名称等看起来非常简单，但你可能想象得到，这绝对不是建议的方法。

正如我们之前简要讨论过的，Bootstrap 广泛使用了LESS预处理器，覆盖 Bootstrap CSS 类值的正确方法是在 LESS 文件中更改这些变量。编译和构建 Bootstrap 实际上意味着编译这些 LESS 文件，生成可分发 CSS 文件，以及生成最终的 JavaScript 文件。

在本章中，我们将探讨如何为 Bootstrap 建立编译和构建环境。在下一章中，我们将探索如何使用这个开发环境更新 LESS 变量，以覆盖 Bootstrap 的默认外观和感觉。以下是本章将涵盖的主要要点：

构建 Bootstrap 所需的工具列表，如何安装和配置这些工具
如何安装 Bootstrap 源代码
如何使用这些工具编译和构建 Bootstrap

注意

在这里，我们将使用各种工具来编译和构建 Bootstrap。然而，我们不会深入讨论这些工具，而是主要关注如何使用这些工具来构建 Bootstrap。

必需的工具

你将需要以下工具：

Node.js
Grunt

可选地，你也可以使用 Bower；然而，在我们的案例中，我们将讨论涉及和使用 node.js 的步骤。

Node.js

Node.js是一个开源的服务器和网络应用程序运行时环境。简单来说，node.js 是一个服务器端 JavaScript 运行时环境。

整个框架基于 JavaScript 语言——它是用 JavaScript 编写的，在 JavaScript 运行时环境中执行；在 node.js 上开发的应用程序也是基于 JavaScript 的。它使用 Google V8 JavaScript 引擎来执行最终应用程序代码。

除了 node.js，捆绑包中还包括一个重要的组件，即节点包管理器（npm）。该组件用于查找、提取和安装 JavaScript 应用程序的所有依赖项。换句话说，它管理整个依赖项安装过程，这样你就不必找出运行和执行特定软件包所需的其他元素。

因此，我们将使用 npm 引擎来获取 Bootstrap 的源代码和所有相关软件。我们首先安装 node.js，npm 引擎将随它一起安装。

注意

npm 相对于 Bower 有一些优势。例如，npm 通过使用嵌套依赖项来避免依赖项冲突。而另一方面，Bower 仅针对前端进行了优化。

安装 node.js

如果你使用 64 位 Windows，你可以从nodejs.org/dist/v0.12.1/x64/node-v0.12.1-x64.msi获取最新的 node.js 安装程序。

然而，对于其他发行版，请访问nodejs.org/download/。在那里你可以找到各种 Windows、Linux 和 Mac 安装程序包。下载后，在你的机器上安装 node.js。安装完成后，确保 node.js 安装文件夹包含在 Windows 可执行路径中。这是因为我们稍后将会使用 npm 的命令行界面（CLI）。让我们测试我们的安装：

打开 Windows 命令提示符。
输入npm，然后按Enter。如果你看到以下屏幕，说明一切正常：

Grunt

如他们的网站所建议的，Grunt 是 JavaScript 任务运行器。几乎就像 Apache Ant 一样，你将一个长长的任务列表放入其中，然后引擎逐个执行这些任务。在基于 JavaScript 的框架和应用程序的情况下，我们使用 Grunt。

就像在 Ant 的情况下，我们有build.xml文件；在 Grunt 的情况下，我们有Gruntfile.js文件——其中列出了所有要执行的任务，这意味着这是配置 Grunt 项目的文件。

在我们当前的范围内，我们不需要了解 Grunt 和 Grunt 文件的完整架构，我们只是使用这个引擎来编译和构建 Bootstrap。

然而，首先我们必须安装 Grunt。为了编译和构建 Bootstrap 的目的，我们只需要grunt-cli模块，而不是完整的 Grunt 任务运行器。这是 Grunt 的 CLI 模块。

安装 Grunt-cli

好处是，无需手动下载。我们已经在早期部分下载并安装了 npm，现在其余的安装将由 npm 处理和管理。以管理员权限打开 Windows 命令提示符。

小贴士

然而，拥有管理员权限是可选的；如果你无法管理，可以继续使用正常的命令提示符。

输入以下命令：

npm install -g grunt-cli

你应该会看到一个类似于以下截图的输出：

如你所见，grunt-cli 模块已被安装在我的 C:\Users\Snig\AppData\Roaming\npm\node_modules 文件夹中。grunt.cmd 命令文件被安装在 C:\Users\Snig\AppData\Roaming\npm 文件夹中。

在你的屏幕上检查这个输出，并标记 grunt-cli 已安装的文件夹。检查你的 Windows path 变量，如果这个文件夹已被添加到路径中，如果没有，你必须手动将这个文件夹添加到你的路径中。

提示

使用管理员权限（如前所述）打开 Windows 命令提示符仅用于更新此系统路径。

另一种方法当然是在你计划安装 Bootstrap 源代码、编译和构建的本地文件夹中安装 grunt-cli，这意味着你的 Bootstrap 开发文件夹。

假设，在我们的例子中，这个文件夹是 D:\Bootstrap。这将是我们下载和安装 Bootstrap、编译和构建它的开发文件夹。在下一章中，我们只在这个文件夹中自定义 Bootstrap。

为了在这个本地文件夹中安装 grunt-cli，我们运行以下命令：

npm install --prefix D:\Bootstrap grunt-cli

然而，我们将继续使用第一种方法安装 Grunt，使用 –g 选项。此选项确保包以全局模式安装。

注意

关于使用 npm 安装包的更多选项和信息，请参阅 docs.npmjs.com/cli/install。

一切完成后，你可以通过在 Windows 命令提示符中执行 Grunt 命令来测试安装，如下面的截图所示：

我们遇到这个错误是因为我们在没有配置 grunt 项目的文件夹中执行了 grunt，这意味着这个文件夹中没有 Gruntfile.js 文件。

安装 Bootstrap

我们现在将安装 Bootstrap，获取 Bootstrap 源代码，并为创建 Bootstrap 的开发环境做准备。按照以下步骤操作：

打开 Windows 命令提示符并导航到 D:\Bootstrap 文件夹。
执行以下命令：
```
npm install bootstrap
```
你将得到以下输出：

如你所猜，Bootstrap 3.3.4 版本已被下载和安装。现在，让我们看看我们的安装文件夹：

你已经创建了一个名为 node_modules 的新文件夹
在 node_modules 文件夹中，已创建了一个名为 bootstrap 的新文件夹
在这个新文件夹中，你已经获取了 Bootstrap 源代码包

注意，之前的命令下载并安装了 Bootstrap 的最新可用版本。如果你需要任何旧版本，你可以执行此命令（在此命令中我们安装 Bootstrap 版本 3.3.1）：

npm install bootstrap@3.3.1

你应该得到这个：

现在，如果你检查新创建文件夹的内容，你会看到 Bootstrap 下载的源代码包：

注意

有趣的是，你可以将这些文件和文件夹与我们在第二章中下载的源代码包进行比较，Bootstrap 入门。在那里，我们使用 URL github.com/twbs/bootstrap/archive/v3.3.1.zip 从 GitHub 下载了 Bootstrap 源代码存档。

你可以看到下载的版本完全相同。然而，我们现在正在为 Bootstrap 创建开发环境，而不仅仅是下载源代码。

为了了解确切发生了什么，npm 是许多基于 JavaScript 和 CSS 的工具和包的仓库和包管理器。每个包都有一个独特的名称。

在我们的例子中，我们之前已经安装了grunt-cli，现在我们安装了bootstrap——grunt-cli和这里的bootstrap是我们试图安装的包的名称。要查看 npm 中可用的包列表，你可以访问www.npmjs.com/。

如果你搜索bootstrap这个包，你会得到超过 2,000 个结果——这意味着在 npm 中，以这个名字命名的包有超过 2,000 个。以下是一个截图：

如果我们点击列表中的第一个，我们就会进入 npm 中的主要 Bootstrap 包页面(www.npmjs.com/package/bootstrap)：

到目前为止，我们已经有了 Bootstrap 源代码包，我们现在准备好编译、构建并生成最终的分发文件。

提示

注意，在右侧菜单中提到了安装命令npm install bootstrap。这就是通过 npm 安装 Bootstrap 的方法。

编译和构建 Bootstrap

如果你探索bootstrap文件夹，你还可以看到一个dist文件夹，其中包含最终的 CSS、JavaScript 和字体文件。构建项目的目标就是生成这个dist文件夹，以便在实际应用中使用。

我们首先要做的事情是删除这个dist文件夹，因为我们的过程会重新生成它。然而，删除这个文件夹并不是必需的，因为无论如何，构建过程都会创建或覆盖现有的文件和文件夹。

安装依赖项

要安装依赖项，请按照以下步骤操作：

首先，我们需要安装构建和运行 Bootstrap 的其他依赖项。
前往D:\Bootstrap\node_modules\bootstrap文件夹并运行以下命令：
```
npm install
```

这将从当前bootstrap文件夹中的package.json文件获取依赖项列表，并将安装所有这些依赖项。以下是从文件中摘取的一段，以下是 Bootstrap 3.3.1 的依赖项列表：

  "devDependencies": {
    "btoa": "~1.1.2",
    "glob": "~4.0.6",
    "grunt": "~0.4.5",
    "grunt-autoprefixer": "~1.0.1",
    "grunt-banner": "~0.2.3",
    "grunt-contrib-clean": "~0.6.0",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-connect": "~0.9.0",
    "grunt-contrib-copy": "~0.7.0",
    "grunt-contrib-csslint": "~0.3.1",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-jade": "~0.13.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-less": "~0.12.0",
    "grunt-contrib-qunit": "~0.5.2",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~3.0.0",
    "grunt-exec": "~0.4.6",
    "grunt-html-validation": "~0.1.18",
    "grunt-jekyll": "~0.4.2",
    "grunt-jscs": "~0.8.1",
    "grunt-saucelabs": "~8.3.2",
    "grunt-sed": "~0.1.1",
    "load-grunt-tasks": "~1.0.0",
    "npm-shrinkwrap": "~5.1.0",
    "remarkable": "~1.4.0",
    "time-grunt": "~1.0.0"
  },

因此，当前面的命令（npm install）成功完成后（确保此步骤没有错误，否则后续步骤可能无法正常工作），您将在bootstrap文件夹下获得另一个node_modules文件夹——这包含了构建 Bootstrap 所需的所有依赖项：

如您所见，所有依赖项都已按照package.json文件中列出的内容安装。

构建 Bootstrap

最后，是时候编译和构建 Bootstrap 了。我们实际上正在做以下事情：

编译（Compiling）在这里意味着实际编译 LESS 文件并生成实际的最终 CSS 文件。
构建（Building）意味着所有 CSS、JavaScript 和字体文件的最终打包或捆绑，这些文件准备在实际应用程序中使用。

我们再次进入D:\Bootstrap\node_modules\bootstrap文件夹并运行此命令：

grunt dist

如果一切正常，您将得到以下输出：

现在让我们检查文件夹结构。如果您看到bootstrap文件夹，您将看到其中的dist文件夹和文件，它们已经被重新创建。我们将简要地看看幕后到底发生了什么。Grunt 在这个项目中至少执行了 11 个主要任务：

任务	描述
`clean:dist`	Grunt 尝试删除`dist`文件夹，这是我们之前已经删除的。因此，您可以看到，您不需要手动清理`dist`文件夹。
`less:compileCore`	在此步骤中，Grunt 已编译 LESS 文件和代码，以生成 Bootstrap 主 CSS 文件。
`less:compileTheme`	在此步骤中，Grunt 已编译 LESS 文件和代码，以生成 Bootstrap 主题 CSS 文件。
`autoprefixer:core`	Autoprefixer 是一个解析 CSS 文件并添加特定供应商前缀的工具或方法（例如，`-webkit-transition: -webkit-transform 1s;`）。此任务会查找所有需要此 autoprefixer 的地方，并在 Bootstrap 主 CSS 文件中添加特定的前缀。
`autoprefixer:theme`	此任务会查找所有需要此 autoprefixer 的地方，并在 Bootstrap 主题 CSS 文件中添加特定的前缀。
`csscomb:dist`	格式化和美化 CSS 文件。
`cssmin:minifyCore`	最后，当 CSS 文件生成后，此任务会压缩文件。换句话说，在这个任务中，创建了`bootstrap.min.css`文件。
`cssmin:minifyTheme`	与上一个任务类似，此任务创建了`bootstrap-theme.min.css`文件。
`copy:fonts`	如其名所示，此任务在`dist`文件夹中创建并复制所有字体文件。
`concat:bootstrap`	到目前为止，此任务已处理 CSS 文件，将所有单独的 JavaScript 文件合并成一个最终的文件——`bootstrap.js`。
`uglify:core`	由于前面的任务已经压缩了 CSS 文件，这个任务也将 JavaScript 文件进行压缩。在这一步中，创建了 `bootstrap.min.js` 文件。

所有这些步骤（以及一些其他步骤）都在 Gruntfile.js 文件中提及和配置，您可以在 bootstrap 源代码文件夹中找到它。因此，最终，您已经得到了您自己的 Bootstrap CSS 和 JS 文件的可分发版本。

摘要

在本章中，我们学习了一些现在在创建 CSS 和 JavaScript 应用程序时相当有用且流行的工具和系统——node.js 和 Grunt。

我们看到了如何安装和配置这些工具。最后，我们看到了如何使用这些工具来编译 Bootstrap LESS 文件并生成可消费的 CSS 文件。我们学习了如何打包和构建 Bootstrap 文件并生成整个可分发包。

在下一章中，我们将了解如何自定义 Bootstrap 以满足您的设计和外观感受需求。

第七章：自定义 Bootstrap

在上一章中，我们已经完成了 Bootstrap 开发和自定义环境的设置。

在本章中，我们将看到如何自定义 Bootstrap CSS 以满足您在外观和感觉方面的需求。我们将使用我们的 Bootstrap 开发环境来自定义 CSS。

实际上，有两种方法可以自定义 Bootstrap 输出：

通过使用构建环境更新 Bootstrap 源代码
通过使用 Bootstrap 网络界面生成自定义代码

我们将在本章中探讨这两种方法。

使用构建环境进行自定义

只是为了回忆，这是我们上一章配置的 Bootstrap 源代码包的文件夹结构。请注意，文件和文件夹的列表可能因您使用的 Bootstrap 版本而异。

在我们的例子中，我们使用 Bootstrap 3.3.1：

如前一个截图所示，这些是我们将在自定义 Bootstrap 行为时处理的两个重要文件夹。

尽管在 JavaScript 代码（如图表中标记的 js 文件夹）中更改任何内容的情况非常罕见，但我们将专注于 LESS 文件（如图表中标记的前一个截图所示的 less 文件夹）来更改 Bootstrap CSS。

这里是 less 文件夹的内容：

如您所见，Bootstrap 中每个可用的 CSS 组件和对象都有一个单独的 LESS 文件，例如按钮、面板、表格、缩略图、井、面包屑、图标和网格。

然而，除了单个 LESS 文件外，我们还有通用文件，例如：

bootstrap.less
theme.less
utilities.less
scaffolding.less
variables.less

每个文件都可以如下解释：

bootstrap.less 文件是主要的协作文件，它封装了所有单个 LESS 文件并生成最终的庞大 bootstrap.css 文件。
theme.less 文件主要负责生成 bootstrap-theme.css 文件。
utilities.less 文件创建了一般实用类，例如，一些类如 getbootstrap.com/css/#helper-classes 中所示。
scaffolding.less 文件是 Bootstrap CSS 文件的主要模板。它定义了页面结构和模板，并为默认 HTML 组件（如 html、body 和 input）设置样式
variables.less 文件可能是我们将要处理的最重要的文件之一。此文件封装了在 Bootstrap CSS 中各个位置使用的所有 LESS 变量。

为了更改和更新 Bootstrap CSS，我们将主要更改此文件中各种变量的值。只是为了回忆，这是我们目前的浏览页面：

现在，让我们在variables.less文件中更改一些变量和值，以改变这个网站的外观和感觉：

打开variables.less文件。

第一部分是Colors。默认代码是：

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%);
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

让我们将其更改为以下内容：

@gray-base:              #000;
@gray-darker:            #222; 
@gray-dark:              #282828;  
@gray:                   #555; 
@gray-light:             #888;   
@gray-lighter:           #ADAFAE;

@brand-primary:         #2A9FD6;
@brand-success:         #77B300;
@brand-info:            #9933CC;
@brand-warning:         #FF8800;
@brand-danger:          #CC0000;

在下一个Scaffolding部分，更改此代码：

//** Background color for '<body>'.
@body-bg:               #fff;
//** Global text color on '<body>'.
@text-color:            @gray-dark;

变成这样：

//** Background color for '<body>'.
@body-bg:               #060606;
//** Global text color on '<body>'.
@text-color:            @gray-light;

现在我们来看看这会给页面带来什么变化。为了实现这一点，我们将构建代码并将其部署到 Web 服务器：

打开命令提示符，使用D:\Bootstrap\node_modules\bootstrap进入project文件夹。
构建项目并在终端运行此命令：grunt dist。
新的 CSS 和 JavaScript 文件集将在dist文件夹中生成。
为了部署这个更新的代码，我们将复制css文件夹（只复制css文件夹，因为我们没有对 JavaScript 或字体进行任何更改）到应用的bs文件夹（参考第二章，Bootstrap 入门，其中我们讨论了我们正在构建的应用程序的文件夹结构）。

小贴士

请注意，每次你更改这些文件中的任何内容时，你不需要手动复制css文件夹和文件，相反，你可以使用合适的 Grunt 命令来自动执行这项工作。

这是我们的页面新外观：

你可以看到，我们页面的背景颜色和字体颜色已经改变，这是由于这一行代码：

@body-bg:               #060606;

在这里，我们选择将主体颜色从白色（#FFF）改为#060606。

@body-bg元素是一个 LESS 变量，已定义；此变量用于在scaffolding.less文件中设置body元素的背景颜色，如下所示：

body {
  font-family: @font-family-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @text-color;
  background-color: @body-bg;
}

同样，文本颜色、字体族、字体大小和其他样式也是从 LESS 变量设置的。

所有这些 LESS 文件都包含按照 LESS 预处理器语言的代码行和语法。在这里，我们不会深入探讨 LESS 语法。然而，建议你在调整 Bootstrap LESS 文件之前熟悉 LESS。

注意

了解 LESS 的一个好起点是他们的官方网站——lesscss.org/。

以这种方式，我们不断在variables.less文件中更改各种 LESS 变量。这是我们浏览产品页面外观和感觉的最终版本：

这是弹出对话框的外观：

我们在variables.less文件中更改的一些代码如下：

@dropdown-bg:                    @gray-darker;
@dropdown-border:                rgba(255,255,255,0.1);
@dropdown-fallback-border:       #444;
@dropdown-divider-bg:            rgba(255,255,255,0.1);;
@dropdown-link-color:            #FFF;

@navbar-default-link-color:       #FFF;
@navbar-default-color:            @text-color;
@navbar-default-bg:               @gray-dark;

@state-success-text:             #fff;
@state-success-bg:               @brand-success;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #fff;
@state-info-bg:                  @brand-info;
@state-warning-text:             #fff;
@state-warning-bg:               @brand-warning;
@state-danger-text:              #fff;
@state-danger-bg:                @brand-danger;

@modal-content-bg:            lighten(@body-bg, 20%);
@modal-backdrop-bg:           #FFF;
@modal-backdrop-opacity:      .9;
@modal-header-border-color:   @gray-dark;

@panel-bg:                    @gray-darker;
@panel-inner-border:          @gray-dark;
@panel-default-text:          @text-color;

@thumbnail-border:            transparent;

如果你想知道这些 LESS 文件是如何转换成合适的、浏览器可消费的 CSS 文件的，那么less:compileCore这个 Grunt 任务就负责这项工作。它在后台调用 LESS JavaScript 编译器，解析 LESS 文件，并最终生成 CSS 文件。

我们所讨论的 LESS JavaScript 编译器是 less.js，位于 D:\Bootstrap\node_modules\bootstrap\node_modules\grunt-contrib-less\tasks 文件夹中。

因此，我们已经看到了如何更新 Bootstrap LESS 文件以自定义默认的外观和感觉。这样，如果需要，您还可以更新任何其他 LESS 文件。更新 JavaScript 源文件的过程也是相同的。所有 JS 源文件都位于 D:\Bootstrap\node_modules\bootstrap\js 文件夹中。您可以更改这些 JS 源文件中的任何一个，使用 grunt 构建 Bootstrap，并将它们部署到最终应用程序位置以供使用。

注意

话虽如此，前面提到的方法确实会强制您更新 Bootstrap 本身的实际源文件；因此，当您下载 Bootstrap 的更新版本时，您的自定义代码将被覆盖。

因此，一个更好的方法是为每个覆盖的文件创建自定义版本，并将您的自定义代码放入其中。最后，导入并使用这些自定义文件。这样，当您下载 Bootstrap 的更新版本时，您的自定义代码将不会受到影响。

使用 Bootstrap 网页界面进行自定义

生成自定义 CSS 文件的第二种方法是通过使用 Bootstrap 网页界面——getbootstrap.com/customize/.

此界面允许您选择并添加您项目所需的 CSS 和 JavaScript 组件。例如，如果您不需要 ScrollSpy JS 组件，那么为什么要在您的生产服务器上部署相应的 JS 代码呢？代码将通过 bootstrap.min.js 文件加载，您的 HTML 页面大小将变得不必要地更大。因此，避免加载您实际上不会使用的所有这些 JavaScript 组件是一种良好的做法。

下面的截图是此页面的截图：

您可以通过此网页界面完成另一个（可能更重要）的要求，即通过更改 LESS 变量来自定义 Bootstrap CSS（所有那些我们在本章前一部分中自定义的相同变量）：

您需要做的只是更新此界面中这些变量的值，最后在页面底部点击编译和下载按钮。

这将生成 Bootstrap CSS 和 JS 文件，包括正常和压缩形式。当然，您需要特别注意您使用的 Bootstrap 版本，因为此界面仅对最新稳定版本起作用。如果您正在使用任何特定的（较旧）版本的 Bootstrap，您应该使用我们在此处创建的本地构建环境进行自定义。这也会使您能够正确维护您在本地源代码版本控制服务器（如 SVN）中的自定义。

摘要

在上一章中，我们学习了如何建立 Bootstrap 的编译和构建环境。在这一章中，我们利用这个环境生成了我们定制的 Bootstrap 文件。

我们通过使用 Bootstrap 的官方网页界面看到了另一种进行这种定制的方法。

随着我们几乎完成了对 Bootstrap 的探索之旅，在下一章和最后一章中，我们将看到如何通过使用许多其他第三方框架和组件来扩展 Bootstrap。

第八章. 扩展 Bootstrap

我们现在知道了如何使用、构建和自定义 Bootstrap。我们已经探索了 Bootstrap 在各种用例和需求中的大多数功能和实用工具。

然而，在许多场合，你可能会觉得 Bootstrap 提供的样式和组件不够用，为了创建一个高端网站并拥有丰富的用户体验，你可能还需要一些额外的功能和内置组件，这些可以帮助你快速设计和生成响应式网站。

幸运的是，开源社区中有很多 Bootstrap 的扩展，适用于各种方面和需求——例如主题、UI 组件、jQuery 插件、通知、表格和导航。

为了更好地理解场景，如果你在 jQuery 的世界里，你当然使用过 jQuery UI 的扩展(jqueryui.com/)——这些是基于标准和默认 jQuery 的组件，旨在为你提供更多默认 jQuery 不提供的功能和控制。同样，我们也有许多基于默认 Bootstrap 的社区扩展。

注意

重要的是要记住，这些扩展是由社区成员和第三方供应商开发的。感谢社区和开发这些扩展并将其作为开源许可的人。然而，Bootstrap 团队不对这些扩展的性能和功能承担任何责任。

在最后一章中，我们将探索一些精选的扩展，以使我们的基于 Bootstrap 的应用程序更加功能丰富和强大。

本章将讨论以下扩展：

扩展默认的 Bootstrap 主题
安装和使用树形视图控件
安装和使用所见即所得（WYSIWYG）编辑器

主题扩展 – Bootswatch

这是基于 Bootstrap 开发并使用的一个最大的免费主题库。参考他们的网站bootswatch.com/，你可以看到在这个空间中列出了许多免费的主题。

注意

这些免费主题是在 MIT 许可下分发的。然而，在开始使用文件之前阅读使用条款和条件会更好。

为了理解如何使用它们，我们将下载并使用这些主题。比如说，我们将继续使用联合主题——bootswatch.com/united/。你可以用两种方式使用这个主题（或任何其他主题）：

通过下载 CSS 文件并在你的应用程序中直接使用。
通过下载 LESS 变量文件，并正确构建和部署。

我们将探索这两种方法。

注意

注意，Bootstrap 除了支持 LESS 之外，还支持 SASS 预处理器。如果你习惯使用 SASS，你也可以选择 SASS 而不是 LESS。然而，本书我们将讨论 LESS 的方法。

下载 CSS 文件

要下载主题，您可以访问 bootswatch.com/united/ 网址，并从顶部导航栏下载 bootstrap.min.css 和/或 bootstrap.css 选项：

执行以下步骤：

下载 CSS 文件，并进入我们应用程序中 bs 文件夹下的 Bootstrap 的 css 文件夹（参考第二章，Bootstrap 入门以查看应用程序文件夹结构）。
将下载的 United 主题的 CSS 文件复制到这个文件夹中（您实际上在这里覆盖了现有的 CSS 文件。所以，如果备份原始文件会更好）。
在浏览器中打开应用程序，您将看到外观和感觉已经更新。

使用 LESS 文件

如您所想象，在这个方法中，我们将下载 LESS 变量文件，并使用构建环境生成 CSS 文件。按照以下步骤操作：

首先，我们下载 LESS 文件（参考前面的截图），并将它们复制到我们的 Bootstrap 构建环境中，即在 D:\Bootstrap\node_modules\bootstrap\less 文件夹中。

小贴士

在这里，我们也在覆盖现有的 variables.less 文件。所以如果你不在任何源代码控制服务器下，在覆盖现有文件之前进行备份会更好。
接下来的步骤非常明显，我们编译并构建项目（命令 grunt dist）。将 CSS 文件复制到最终的应用程序部署文件夹中。
在浏览器中打开应用程序，查看新的外观和感觉。它看起来可能类似于以下截图：
弹出对话框的新外观如下：
这里是移动设备视图：

以类似的方式，您可以下载并使用这些免费提供的任何主题。然而，正如您正确猜到的，下载和使用 LESS 文件（而不是 CSS 文件）是一个更好的方法。

树形视图控件

HTML 中的树形视图控件（有时也称为大纲视图）通常用于表示层次信息。视图中的每个项目都可以有多个子项（或子控件），每个子项也可以进一步有多个子控件。此外，这个层次可以向上延伸到任何级别。每个项目可以展开以显示子项，也可以折叠以隐藏它们。最常用的树形视图之一是 Windows 资源管理器，其中显示了所有文件夹和子文件夹（以及相应的文件）。

这里是建立在 Bootstrap 之上的树形视图控件的示例。这样的控件默认情况下在 Bootstrap 分发中不可用，当然，您也不想在您的网页中使用任何其他控件，这可能会挑战您的移动设备兼容性要求。

注意

在社区市场中，有很多这样的控件、组件和库可供选择。如果你需要任何在默认 Bootstrap 发行版中不可用的控件，始终建议实现一个基于 Bootstrap 的控件，而不是使用任何基于 jQuery 或其他 JavaScript 的组件。即使你使用这样的控件，也要确保它们不会破坏移动兼容性。

本章展示了这些示例，以指导你如何使用这些基于 Bootstrap 构建的控件。

作为例子，我们选取了这个在 Bootstrap 社区中流行的组件：github.com/jonmiles/bootstrap-treeview。假设，在浏览器网页中，我们将用树形视图替换类别列表的 panel-group 视图。

这里是使用该控件的 HTML 代码；这替换了整个包含类别列表的 panel-group HTML 部分：

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
  <div id="categoryList"></div>
</div>

这行简单的 HTML 代码就足够了。其余的技巧在于 JavaScript 代码中。

var categories = [
  {
    text: "Fashion and Clothing for Him",
    icon: "glyphicon glyphicon-user",
    state: {
      expanded: true,
      selected: true
    },
    nodes: [
    {
      text: "Shirts",
    },
    {
      text: "Tees"
    },
    {
      text: "Trousers"
    },
    {
      text: "Footwear"
    },
    {
      text: "Accessories"
    }
  ]
  },
…

];
$('#categoryList').treeview({
  data: categories,
  onNodeSelected: function(event, data) {
    $('#productHead').text(data.text);
  }
});

正如你所见，我们已经将嵌入到 HTML 元素中的实际数据替换成了正确的 JSON 数据格式，在 JavaScript 中。这种方法当然是更好且合适的，因为你可能想要调用一些 AJAX 或服务器端调用以获取类别列表，而它将返回 JSON 格式的数据。

我们还添加了一个小的事件处理器（onNodeSelected），以更改右侧部分的标题。以下是输出结果：

安装树形视图组件

从 GitHub URL github.com/jonmiles/bootstrap-treeview 下载 ZIP 存档。在这个存档的dist文件夹中，我们有两个文件——一个 JS 文件和一个 CSS 文件。将这些两个文件复制到我们的应用程序文件夹中，并在 HTML 页面中包含它们。以下是我们要讨论的文件：

我们已经将这些文件包含到我们的browse.html页面中：

<link href="bootstrap-treeview.min.css" rel="stylesheet">
<script type="text/javascript" src="img/bootstrap-treeview.min.js"></script>

小贴士

作为一种常规做法，我们在包含主 Bootstrap JS 文件之后，包括所有基于 Bootstrap 和 Bootstrap 扩展的额外 JS 文件。

WYSIWYG 编辑器和 Font Awesome

WYSIWYG 是一个非常常见且流行的组件，你期望网页用户输入一些 HTML 和格式化内容；这个控件在内容管理系统（CMS）中尤其重要。

在本节中，我们将演示一个基于 Bootstrap 且适用于移动端的编辑器。我们将使用的编辑器是bootstrap-wysiwyg；你可以在mindmup.github.io/bootstrap-wysiwyg/页面上探索它。我们将用这个编辑器替换我们联系我们页面中的标准文本区域控件，以提供更好的用户体验。以下是 HTML 代码：

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#yourComments">
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
    <ul class="dropdown-menu"></ul>
  </div>
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
      <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
      <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
    </ul>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
  </div>
  <div class="btn-group hidden-xs hidden-sm">
    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
  </div>
  <div class="btn-group hidden-xs hidden-sm">
    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
  </div>
  <div class="btn-group hidden-xs hidden-sm">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
    <div class="dropdown-menu input-append">
      <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
      <button class="btn" type="button">Add</button>
    </div>
    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
  </div>
  <div class="btn-group hidden-xs hidden-sm">
    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
  </div>
</div>    
<div id="yourComments">please tell us what you think about us.</div>

这是我们的控制器的 CSS 代码：

#yourComments {
  background-color: white;
  border: 1px solid rgb(204, 204, 204);
  border-collapse: separate;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset;
  box-sizing: content-box;
  max-height: 25em;
  min-height: 15em;
  outline: medium none;
  overflow: scroll;
  padding: 4px;
}

最后，JavaScript 代码如下：

function initEditorToolbar() {
  var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
    'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
  'Times New Roman', 'Verdana'],
  fontTarget = $('[title=Font]').siblings('.dropdown-menu');

  $.each(fonts, function (idx, fontName) {
    fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
  });
  $('a[title]').tooltip({container:'body'});
  $('.dropdown-menu input')
    .click(function() {return false;})
    .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
    .keydown('esc', function () {this.value='';$(this).change();});

  $('[data-role=magic-overlay]').each(function () { 
    var overlay = $(this), target = $(overlay.data('target')); 
    overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
  });
};
initEditorToolbar();
$('#yourComments').wysiwyg();
$('#yourComments').cleanHtml();

在桌面系统中，我们新页面的外观现在如下所示：

在移动设备上，我们新页面的外观如下：

正如你所见，标准的文本区域控件已被更丰富的所见即所得编辑器所取代。你还应该注意，在移动设备的情况下，我们已经隐藏了许多工具栏按钮；这样，在空间较小的设备上，你可以使一些不重要的按钮不可用。

安装和使用所见即所得组件

为了安装、配置和使用所见即所得组件，需要下载几个 JS 库。以下是我们所使用的所见即所得组件的先决条件。

bootstrap-wysiwyg 组件

从github.com/mindmup/bootstrap-wysiwyg/ GitHub 页面下载 bootstrap-wysiwyg 组件。然而，你只需要主要的 JS 文件，因此你只需下载此文件即可，从raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js下载。将此文件复制到应用程序文件夹中，并在 HTML 页面中包含它：

<script type="text/javascript" src="img/bootstrap-wysiwyg.js"></script>

jQuery 热键组件

所见即所得编辑器使用热键（或快捷键）如Ctrl +B，Ctrl + U，和Ctrl + I进行标准操作。因此，我们还需要这个库。

你可以从github.com/jeresig/jquery.hotkeys GitHub 页面下载它。然而，对于前面的情况，你只需要主要的 JS 文件。因此，你只需下载raw.githubusercontent.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js文件即可。

将此文件复制到应用程序文件夹中，并在 HTML 页面中包含它：

<script type="text/javascript" src="img/jquery.hotkeys.js"></script>

Font Awesome

Font Awesome 是为 Bootstrap 项目设计的图标字体套件。您可以使用这些 CSS 类扩展外观、感觉和用户体验，当然，这些都是对设备友好的。

关于 Font Awesome 的更多信息，请参阅fortawesome.github.com/Font-Awesome/。我们不会本地下载和安装它，而是将从 CDN 位置使用文件。因此，我们在 HTML 页面中写下以下内容：

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

因此，当所有依赖项和库都包含在内时，前面的 HTML 和 JavaScript 代码将在你的页面上渲染所见即所得编辑器。你已经看到了 HTML 和 JS 代码，以及编辑器如何在你的页面上渲染。

注意

这里有一些链接，你可以从中探索更多此类组件和库：

摘要

在本章的最后，我们探索了一些组件和资源，以扩展 Bootstrap 的默认行为。通过使用社区提供的库，你可以获得几乎所有的组件，以满足实现任何网站需求。

因此，你可以看到，结合这些第三方资源，Bootstrap 的功能和灵活性得到了极大的增强和扩展，而且只需要非常少的编码和实施工作，你就可以开发出一个功能齐全且适合移动端的网站。

作为额外信息，你可以通过使用 Google 网站管理工具等来检查你网站的移动友好性，例如，www.google.com/webmasters/tools/mobile-friendly/。

posted @ 2025-09-26 22:07 绝不原创的飞龙阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

Bootstrap-精要-全-

Bootstrap 精要（全）

前言

本书涵盖内容

你需要这本书的内容

这本书是为谁而写的

习惯用法

注意

技巧

读者反馈

客户支持

下载示例代码

错误清单

盗版

询问

第一章：CSS 和 Bootstrap 的演变

小贴士

移动优先哲学

响应式设计基础

小贴士

设置视口

将内容大小调整到视口

使用媒体查询实现响应式

响应式设计模式

导航模式

提示

介绍 Bootstrap

Bootstrap 包含的内容

CSS

组件

注意

JavaScript

小贴士

自定义

小贴士

摘要

第二章：Bootstrap 入门

获取 Bootstrap

小贴士

小贴士

Bootstrap 文件结构

预编译捆绑包

文件夹：css

folder: fonts

小贴士

folder: js

小贴士

源代码包

rfolder: dist

folder: fonts

folder: grunt

小贴士

folder: js

folder: less

小贴士

CSS 预处理器

小贴士

变量

混入

操作

嵌套

注意

如何使用 Bootstrap

注意

应用程序文件夹结构

注意

小贴士

概述

第三章：使用 Bootstrap CSS 创建响应式布局

Bootstrap 的基本 HTML 结构

head 部分

正文部分

基本 HTML 元素

响应式类

理解基础知识

控制跨设备的元素显示

渲染图片

提示