Rails-的-Bootstrap-指南-全-

Rails 的 Bootstrap 指南（全）

原文：zh.annas-archive.org/md5/00c49d667c228a2fdb014fd664ef6242

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

嗨！所以，你想学习 Bootstrap 及其神奇之处，并将其应用于 Rails 项目中？我认为你选择这本书是正确的选择。

网页设计并非每个人的强项。我曾见过许多经验丰富的网页开发者，他们在网页设计方面却非常糟糕。他们有能力制作出最强大的应用程序，但缺乏创建外观体面的网站所需的技能。

另一方面，CSS 和 JavaScript 前端框架的受欢迎程度突然上升。这些框架让用户能够轻松创建流行的 CSS 和 JavaScript 组件，例如下拉菜单、响应式菜单、用于构建网站的适当网格系统等等，而无需了解 CSS 和 JavaScript 编码。Bootstrap 作为本书的先驱之一，提供了许多预设计的 CSS 组件，可以直接使用。你只需知道适当的 HTML 文件即可使用这些前端框架。

本书将帮助你了解 Bootstrap 是什么，以及如何在 Rails 环境中使用它。它将通过许多实际示例引导你了解 Bootstrap 的各种 CSS 和 JavaScript 组件。如果你是 Sass 开发者，这本书将帮助你识别各种 Sass 变量以自定义 Bootstrap。

希望你能享受阅读这本书的乐趣！

本书涵盖的内容

第一章，介绍 Rails 中的 Web 应用程序开发，专注于如何通过 Bootstrap 美化 Rails 应用程序。这一解释之后是本章的总结。

第二章，介绍 Bootstrap 3，将展示如何在 Rails 项目中下载和使用 Bootstrap。

第三章，使用 Bootstrap 的网格系统为 Rails 应用提供动力，将带你了解 Bootstrap 的网格系统，然后继续展示如何在我们的第一个示例应用程序中使用它。

第四章，在 Rails 应用程序中使用 Bootstrap 的排版、按钮和图像，更多地关注如何美化网站的内容，如文本、链接和图像。

第五章，在 Bootstrap 中重新设计表格和表单，将探讨 Bootstrap 表格和表单的各种功能。在这一章中，我们将首先创建虚拟产品，然后将它们集成到我们的实际应用程序中。

第六章，创建导航栏，将教你如何创建 Bootstrap 导航栏，以及我们如何修改它以满足我们的需求。

第七章，其他各种 Bootstrap 组件，将探索一些其他现成的 Bootstrap 组件。

第八章, 使用 Bootstrap Modals，将教你如何创建一个 Bootstrap 模态框及其各种类型和功能。我们还将在我们的 Rails 应用程序中集成一个模态组件。

第九章, 使用 Bootstrap Carousel 创建图片幻灯片，将帮助你开始使用 Bootstrap Carousel，如何添加幻灯片的标题，以及如何自定义 Carousel。

第十章, 使用 Bootstrap Modals 创建购物车，将介绍如何实现我们到目前为止在 Bootstrap 中学到的内容。这一章将肯定地澄清 Bootstrap 的一些核心概念，例如如何使用 Bootstrap 模态框、排版、按钮和响应式表格。

附录, 为 Rails 应用程序添加自定义样式，讨论了如何向由 Bootstrap 框架支持的 Rails 应用程序添加自定义样式。

你需要这本书的内容

要使用本书中的示例，你需要以下内容：

Bootstrap 版本 3.3.1
Rails 版本 4.2

这本书适合谁阅读

这本书是为对 Ruby on Rails 有基本了解的 Web 开发者编写的。你应该肯定地具备 HTML 及其工作原理的知识。然而，对于本书来说，你不需要具备 CSS 和 JavaScript 的先验知识。

惯例

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

文本中的代码词汇、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称按照以下方式显示：“让我们创建一个名为Bootstrap_Rails_Project的文件夹。”

代码块按照以下方式设置：

a{
display: block;
text-decoration: none;
width: 100px;
margin: 10px auto;
padding: 5px;
text-align: center;
background: #ccc;
color: #444;
font-size: 20px;
box-shadow: 4px 4px 0px #888;
font-weight: bold;
}

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

rails new TODO

新术语和重要词汇以粗体显示。你会在屏幕上看到这些词汇，例如在菜单或对话框中，文本中会像这样显示：“现在点击新建待办事项。”

注意

警告或重要注意事项以如下方式显示。

小贴士

小技巧和窍门看起来像这样。

读者反馈

读者反馈始终欢迎。告诉我们你对这本书的看法——你喜欢什么或可能不喜欢什么。读者反馈对我们开发你真正从中受益的标题非常重要。

要发送一般反馈，只需发送一封电子邮件到<feedback@packtpub.com>，并在邮件主题中提及书名。

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

客户支持

现在您是 Packt 书籍的骄傲拥有者，我们有多个方面可以帮助您从您的购买中获得最大收益。

下载示例代码

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

勘误

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

盗版

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

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

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

问题

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

第一章. 介绍 Rails 中的 Web 应用程序开发

以最佳方式展示您的应用程序一直是每位网页开发者最重要的因素。在这个以移动设备为先导的时代，我们被迫随风而行，使我们的应用程序兼容于手机、平板电脑、个人电脑以及地球上所有可能的显示设备。

Bootstrap 是解决开发者所面临所有烦恼的一站式解决方案。它无需额外努力，也不需要任何高级 CSS 知识，就能创建出美丽的响应式设计。对于每一位开发者来说，它都是真正的福音。

在本章以及整本书中，我们将关注如何借助 Bootstrap 美化我们的 Rails 应用程序。在本章中，我们将使用 Rails 创建一个基本的 Todo 应用程序。我们将探索 Rails 应用的文件夹结构，并分析哪些文件夹对于模板化 Rails 应用程序很重要。这将有助于你快速回顾 Rails 概念。

我们还将了解如何创建视图、链接它们以及样式化它们。本章中的样式化将通过应用程序的默认 CSS 文件以传统方式完成。最后，我们将讨论如何使用 Bootstrap 加速设计过程。

简而言之，我们将涵盖以下主题：

为什么选择 Bootstrap 与 Rails 结合使用？
在 Rails 中设置 Todo 应用程序
分析 Rails 应用的文件夹结构
创建视图
使用 CSS 样式化视图
传统样式化 Rails 应用的挑战

为什么选择 Bootstrap 与 Rails 结合使用？

Rails 是目前最受欢迎的 Ruby 框架之一，无论是需求还是技术趋势都处于巅峰状态。有超过 3,100 名成员为其开发贡献力量，已有成千上万的应用程序使用它构建，Rails 已经为今天的每个 Web 框架树立了标准。

Rails 最初由 David Heinemeier Hansson 在 2003 年开发，目的是简化他在 Ruby 中的开发过程。后来，他足够慷慨，将 Rails 释放到开源社区。如今，它广为人知为 Ruby on Rails。

Rails 通过将重点从重新发明轮子转移到创新新功能，缩短了开发周期。它基于配置原则的约定，这意味着如果你遵循 Rails 的约定，你最终编写的代码将比不遵循时少得多。

另一方面，Bootstrap 是最受欢迎的前端开发框架之一。它最初是为 Twitter 的某些内部项目开发的。它通过提供大多数已经构建并准备好使用的可重用组件，使新手网页开发者的生活变得更加容易。Bootstrap 可以通过多种方法轻松集成到 Rails 开发环境中。我们可以直接使用框架提供的 .css 文件，或者通过其 Sass 版本扩展它，并让 Rails 编译它。

注意

Sass 是一个 CSS 预处理器，它将逻辑和功能引入 CSS。它包括变量、函数、混合等功能。在 Rails 中使用 Sass 版本的 Bootstrap 是一种推荐的方法。它提供了各种选项，可以轻松自定义 Bootstrap 的默认样式。

Bootstrap 还为那些没有实际 JavaScript 知识的人提供了各种 JavaScript 组件。这些组件几乎在当今构建的每个现代网站上都是必需的。

Bootstrap 与 Rails 的结合是致命的。您可以更快地构建应用程序，并投入更多时间来思考功能，而不是重写代码。

在 Rails 中设置待办事项应用

由于这本书的目标是针对 Rails 开发者，我假设您已经具备基本的 Rails 开发知识。您还应该在您的机器上安装 Rails 和 Ruby 以开始。

注意

在编写这本书时，使用了 Ruby 2.1.1 和 Rails 4.1.4。

让我们先了解这个待办事项应用将做什么。我们的应用程序将允许我们创建、更新和删除待办事项列表中的项目。我们将首先分析在构建此应用程序时创建的文件夹，以及哪些文件夹对于模板化应用程序是必要的。

因此，让我们先试水：

首先，我们需要选择我们的工作区，它可以是系统中的任何文件夹。让我们创建一个名为 Bootstrap_Rails_Project 的文件夹。现在，打开终端并导航到这个文件夹。
是时候创建我们的待办事项应用了。输入以下命令以创建一个名为 TODO 的 Rails 应用程序：
```
rails new TODO
```
此命令将执行一系列其他必要的命令以创建 Rails 应用程序。因此，请稍等片刻，直到它停止执行所有代码。如果您使用的是 Rails 的新版本，则此命令还会在最后执行 bundle install 命令。bundle install 命令用于安装其他依赖项。

上述命令的输出如下：

现在，您应该在 Bootstrap_Rails_Project 内部有一个名为 TODO 的新文件夹，这是由前面的代码创建的。以下是输出：

分析 Rails 应用程序的文件夹结构

让我们导航到 TODO 文件夹，查看我们的应用程序文件夹结构是什么样的：

让我为您解释这里的一些重要文件夹：

第一个文件夹是 app 文件夹，我们将在这本书中重点关注它。我们应用程序的所有内容都将存放在这个文件夹中。
app 文件夹内的 assets 文件夹是存储所有静态文件（如 JavaScript、CSS 和图片）的位置。您可以偷偷看看里面的各种文件。
controllers 文件夹处理浏览器的各种请求和响应。
helpers 文件夹包含用于 views 和 controllers 的各种辅助方法。
下一个文件夹 mailers 包含发送电子邮件所需的所有必要文件。
models 文件夹包含与数据库交互的文件。
最后，我们有 views 文件夹，它包含所有将被编译成 HTML 文件的 .erb 文件。

因此，让我们启动 Rails 服务器，并在浏览器中检查我们的应用程序：

在终端中导航到 TODO 文件夹，然后输入以下命令以启动服务器：
```
rails server
```
你也可以使用以下命令：
```
rails s
```
你会看到服务器正在 3000 端口下部署。因此，输入以下 URL 来查看应用程序：

http://localhost:3000。

你也可以使用以下 URL：http://0.0.0.0:3000。
如果你的应用程序设置得当，你应该在浏览器中看到 Rails 的默认页面：

创建视图

我们将使用 Rails 的 scaffold 方法来创建模型、视图和其他 Rails 需要的必要文件，以便使我们的应用程序运行。以下是我们的应用程序应执行的任务集：

它应该列出待办事项
每个任务都应该是可点击的，并且与该项目相关的详细信息应该在新视图中显示
我们可以编辑该项目的描述和一些其他细节
我们可以删除该条目

这个任务看起来相当长，但任何 Rails 开发者都知道这有多容易。我们实际上不需要做任何事情就能实现它。我们只需要传递一个单独的 scaffold 命令，其余的将由 Rails 处理。

使用 Ctrl + C 键关闭 Rails 服务器，然后按照以下步骤操作：

首先，在终端中导航到项目文件夹。然后，输入以下命令：
```
rails g scaffold todo title:string description:text completed:boolean
```
这将创建一个名为 todo 的新模型，它具有各种字段，如标题、描述和完成状态。每个字段都与其相关联的类型。
由于我们创建了一个新的模型，它必须在数据库中反映出来。因此，让我们迁移它：
```
rake db:create db:migrate
```
上述代码将在新数据库中创建一个新表，并包含相关字段。
让我们分析一下我们所做的工作。scaffold 命令创建了许多用于管理 todo 模型的 HTML 页面或视图。因此，让我们检查我们的应用程序。我们需要再次启动服务器：
```
rails s
```
前往本地主机页面 http://localhost:3000 的端口号 3000。
你应该仍然看到 Rails 的默认页面。现在，输入 URL：http://localhost:3000/todos。
你现在应该看到应用程序，如下面的截图所示：
点击 New Todo，你将被带到允许你填写我们之前创建的各种字段的表单。让我们创建我们的第一个 todo 并点击提交。它将显示在列表页面上：

这很简单，不是吗？我们还没有做什么。这就是 Rails 的力量，人们为之疯狂。

使用 CSS 样式视图

显然，应用程序的外观并不疯狂地好。所展示的表格极其混乱，需要一些 CSS 样式。因此，让我们继续为我们的 Rails 应用程序添加样式。

我们将使用应用程序的默认 CSS 文件来添加和修改样式：

打开 Bootstrap_Rails_Project。
打开 TODO 文件夹；进入 app 文件夹。导航到 assets 文件夹。在那里你会找到一个名为 stylesheets 的文件夹。这个文件夹包含应用程序的所有 CSS 文件。

目前，你将找到三个不同的文件：application.css、scaffold.css.scss 和 todos.css.scss。第一个文件是应用级别的 CSS 文件。你可以在其中写入任何内容，它将应用于整个应用程序。接下来的两个文件是 Sass 文件。Rails 使用 SASS 来为应用程序应用样式。这些 SASS 文件被编译成 CSS 文件，并在运行时包含在应用程序中。

我们将使用一个普通的 CSS 文件（不包含 SASS）来为我们的 Todo 应用程序应用样式。让我们首先继续并分析应用程序的 HTML 源代码。截图如下：

你可以看到，所有的 CSS 文件在这里都是按字母顺序加载的。这可能会在覆盖 CSS 时成为一个严重的问题。我们希望我们的 CSS 文件在最后。这样，我们就可以在未来的一些地方覆盖应用级别的样式。

因此，让我们重新排列这里的 CSS 文件。为了做到这一点，请遵循以下步骤：

使用文本编辑器打开 application.css 文件。在那里你可以看到一些以 require_ 为前缀的代码行。我们需要稍作调整，以获得如图所示的结果：
让我们在同一 stylesheets 文件夹中创建一个名为 styles.css 的新 CSS 文件。现在回到 application.css 文件。
从文件中删除以下行：
```
*= require_tree
```
前面的行是在告诉 Rails 按字母顺序包含所有 CSS 文件。
现在，添加以下行：
```
*= require 'styles'
```
前面的行将包含 styles.css 到应用程序中。确保 application.css 的外观如下所示：

require_self 命令将 application.css 文件包含在应用程序中。如果我们现在检查 HTML 源文件，我们应该看到只有两个 CSS 文件被包含：application.css 和 styles.css。因此，我们现在可以安全地为应用程序编写 CSS 样式。

重新设计 Todo 应用程序

在本节中，我们将不使用任何框架来编写所有的 CSS 文件以进行重新设计。这将帮助我们更好地理解在最后为了样式化简单的链接和其他 HTML 元素时，我们需要编写多少 CSS 代码。

我们将重新设计现有的 Todo 应用程序，使其看起来像以下截图所示：

前面的截图显示了重新设计的主页。正如你所见，TODO 活动列表现在在屏幕中央以类似表格的结构正确显示。甚至动作链接（显示、编辑和删除）也被重新设计成看起来像 3D 按钮。让我们看看重新设计的版本：

前面的截图显示了重新设计的“新建 Todo”页面。表单已被重新设计，并应用了背景颜色，如下所示：

前面的截图显示了重新设计的“编辑 TODO”屏幕版本，它与“新建 Todo”屏幕相同。这里唯一的区别是自动填充功能，它会根据数据库中可用的数据填充字段。输入字段更加宽敞，字体大小更大，以便正确显示其中的文本。让我们看看“查看 Todo”页面的截图：

前面的截图显示了重新设计的“查看 Todo”页面。我们保持了该页面的简洁和清晰，以便更好的可读性。在所有页面中，我们都使网站的内容居中。

哦！设计内容太多了！别担心，我们会轻松完成。

通常认为在开始设计之前组织设计过程是一个好的做法。在我们的 Todo 应用程序中，我们有三种不同的视图：

主页列出所有 Todo：这是在 http://localhost:3000/todos
新建 Todo 表单和编辑 Todo 表单：它们都是相同的视图，可以通过两种不同类型的 URL 访达
显示查看 Todo：它显示特定的 TODO 详细信息

让我们从美化主页开始：

打开我们最近创建的 styles.css 文件。我们将要编写的所有样式都应该写入此文件。
我们将首先使用 CSS 中的通用选择器 (*) 清除浏览器默认的边距和填充。因此，我们为此的 CSS 将是：
```
*{
margin: 0;
padding: 0
}
```
让我们先美化页面的标题。如果你检查页面的 HTML 源代码，你会看到它是一个 H1 元素。因此，我们为此的 CSS 将是：
```
h1{
padding: 20px;
text-align: center;
color: #5093C2;
}
```
前面的代码使标题出现在页面中央。它还添加了浅蓝色。我们还使用 CSS 的填充属性在其周围创建了一些空间。刷新页面以验证它。
是时候装饰 table 元素了。我们为此的 CSS 将是：
```
table{
  width: 800px;
  margin: auto;
text-align: center;
}
```
前面的代码使表格定位到浏览器中央。首先，我们给它应用了 800px 的宽度，然后我们给它应用了自动定位的边距。由于浏览器现在知道了表格元素的宽度，它将自动在它每侧的额外空间中分配。这将使我们的表格在浏览器屏幕中居中。最后一个属性 text-align 用于对齐表格内的文本。
让我们在表格内的元素上应用一些更多的样式：
```
td, th{
  padding: 10px;
  border: 1px solid #888888;
}
```
在前面的 CSS 代码中，我们已经为表格元素的td和th元素应用了样式。我们使用填充创建了文本周围的空间。我们还为每个单元格应用了边框。这是一个1px宽度和颜色为#888888的实线边框。

是时候设计应用程序的链接了。我们将尝试使它们看起来像按钮，以便它们看起来更易于点击。我们的 CSS 如下：

a{
display: block;
text-decoration: none;
width: 100px;
margin: 10px auto;
padding: 5px;
text-align: center;
background: #ccc;
color: #444;
font-size: 20px;
box-shadow: 4px 4px 0px #888;
font-weight: bold;
}

链接<a>是内联 HTML 元素。因此，在第一行，我们使用display属性使其看起来像一个块级元素。现在，我们可以应用宽度和边距。就像我们对表格元素所做的那样；我们也将应用特定的宽度，并使所有链接都对其父元素居中。我们还为链接文本周围添加了5px的填充。

为了给链接上色，我们应用了背景，并为了使文本在这个背景中更明显，我们为它应用了颜色属性。我们还玩弄了按钮的阴影，使其看起来更有 3D 效果。

确保刷新浏览器屏幕以查看我们持续应用的变化。希望你在设计应用程序的过程中享受这个过程。

我们最终设计了主页屏幕。表单还没有被样式化！让我们现在就做：

点击New Todo文件，让我们为其添加样式：
```
form{
  width: 300px;
  margin: auto;
  background: #ccc;
  padding: 20px;
  border: 1px solid #444;
}
```
我们为表单应用了适当的宽度，并使其出现在屏幕中央。我们还给它提供了一个不错的背景颜色。我们还应用了填充和边框，使其看起来更宽敞和平滑。
接下来，我们需要设计标签和输入字段。如果你查看这个页面的 HTML 源代码，你会看到每个标签及其相关的输入字段都被包裹在一个具有field类的div标签内。记住，这些类和 HTML 结构不是我们写的。这些是由 Rails 自动生成的。我们只是在处理 CSS 文件。
现在，我们将使用field类来为New Todo视图内的元素应用样式。在这里，我们将设计标签、输入字段和textarea元素：
```
.field{
  padding: 10px 0;
}

.field label{
	font-weight: bold;
}

.field input, .field textarea{
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
  width: 280px;
}
```
我们在field中的div元素内应用了适当的间隔。在这里，我们给填充属性赋予了两个不同的值。第一个值用于创建顶部和底部的空间，而下一个值将用于左侧和右侧。
接着，我们对field元素的标签元素应用了样式。我们使用font-weight属性使其看起来加粗。最后，我们给输入字段和textarea应用了相同的 CSS 样式。我们通过添加填充来使它们看起来更宽敞。为了去除输入和textarea元素周围的浏览器默认边框，我们应用了边框属性。我们还应用了border-radius来使角落略微圆润。最后，我们固定了文本区域和输入元素的宽度，以确保它们正确对齐。
是时候设计这个 HTML 页面中的最后一个元素了，即创建待办事项按钮：
```
.actions input{
  padding: 8px;
  border: 1px solid #CCC;
  border-radius: 5px;
  font-size: 18px;
  width: 280px;
  background: #83B5D8;
  color: #444;
}
```
我们在这里应用的大多数 CSS 样式与我们对输入和 textarea 元素应用的样式相似。在这里，我们添加了两个额外的属性，background和color，使其看起来不同，并在表单中正确突出显示。
我们已经成功设计了新建待办事项和编辑待办事项页面。我们现在只剩下显示待办事项页面。所以，不要拖延，让我们首先查看这个页面。点击显示链接。

大部分内容已经被我们样式化。我们只剩下设计这个页面上的文本了，代码如下：
```
p{
  width: 350px;
  font-size: 20px;
  margin: auto;
  padding: 10px 0;
  color: #444;
}

p#notice{
  color: #76a3da;
}
```
我们为p元素应用了固定宽度，并使用 margin 属性使其显示在屏幕中心。我们还为它们应用了一个合适的字体大小。现在，让我们使用 margin 和 padding 属性将它们分开。

此页面也在新建待办事项或编辑待办事项页面之后显示，顶部有一个通知。此元素有一个id元素，用于显示状态，即是否成功创建了一个新的todo或成功更新了一个现有的todo。我们使用 CSS 对其应用了样式。请确保在先前的 CSS 代码中p和#notice之间没有空格。我们正在针对具有 id 的p标签，即#notice，所以选择器之间不应该有空格。

恭喜！我们已经成功完成了整个应用程序的设计。

小贴士

下载示例代码

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

传统上在 Rails 应用程序中样式的挑战

我们创建的应用程序非常基础，以至于我们没有为其逻辑部分编写任何代码。我们甚至没有触及应用程序的 HTML 布局。你已经看到了 CSS 样式在某些地方是多么复杂，例如设计链接。我们在这里编写的 CSS 组织得非常糟糕。我们在许多地方使用目标元素级别选择器来应用样式，这被认为是一种非常糟糕的设计方式。

我们的 CSS 代码没有分成几个更小的部分。所有的样式都直接写在了一个文件中，styles.css。在接下来的章节中，我们将看到如何使用 SASS 来为我们的 Rails 应用程序应用样式。使用 SASS，我们可以将逻辑引入 CSS 代码中。

我们还将克服在 Rails 应用程序中为每个元素进行样式的困难。你会发现，对于非 CSS 开发者来说，使用 Bootstrap 设计高端应用程序是多么容易。当你使用 Bootstrap 时，你甚至不会编写任何 CSS 代码。它的开发者为你编写了一大堆 CSS 代码。

摘要

本章的主要目的是向您简要介绍如何在没有任何 CSS 前端框架的帮助下开发和设计一个简单的 Rails 应用程序。我们通过创建一个外部 CSS 文件styles.css并将其导入到应用程序中，使用另一个 CSS 文件application.css来手动设置应用程序的样式。我们还讨论了新手网页设计师在直接设置应用程序时可能遇到的一些复杂性。

在下一章中，我们将开始使用 Bootstrap。我们将学习它是什么，以及它如何帮助快速设计 Rails 应用程序。我们还将学习如何将 Bootstrap 集成到 Rails 应用程序中。

第二章：介绍 Bootstrap 3

在上一章中，我们学习了如何创建一个简单的 Rails 项目，以及如何更改其默认的 CSS 样式。如果开发者是新手并且对 CSS 的了解有限，那么这个过程会变得更加困难。Bootstrap 有助于解决这个问题。它为你提供了访问一些流行的、现成的可重用组件的权限，例如时尚的导航栏、图片容器、弹出框等。你所要做的就是复制并自定义你想要使用的组件的标记。

在本章中，你将了解 Bootstrap 是什么，以及它对 Rails 开发者的重要性。我们将看到如何在我们的 Rails 项目中下载和使用 Bootstrap。我们将在本章中再次创建相同的 Todo 应用程序，并为其应用 Bootstrap 样式。

在本章中，我们将涵盖：

什么是 Bootstrap？
在 Rails 项目中安装 Bootstrap

什么是 Bootstrap？

Bootstrap 是一个完整的前端框架，它帮助开发者在不需担心前端开发的情况下开发 Web 应用程序。如果你是一名开发者，你的主要目标是展示你应用程序的强大功能，而不需要在 CSS 设计上投入任何努力，那么 Bootstrap 就是为你准备的。它允许开发者从一系列由 Bootstrap 开发和设计的流行可重用 HTML 组件中选择。

让我们设想一个场景。托马斯是一名 Rails 开发者。他使用 Rails 创建了一个强大的电子商务购物系统。该系统具有通常从购物网站期望的许多功能。托马斯在确保应用程序的安全性上投入了额外的努力，并使系统准备就绪。然后是托马斯必须最终向风险投资家展示这个应用程序以获得一些资金以启动他的项目的时候。但是等等，托马斯没有做任何使他的应用程序看起来令人满意的事情。他的应用程序只包含基本的 HTML 标记，其中几乎可以忽略不计的 CSS 样式。他的应用程序会产生影响吗？

答案是，绝对不行。尽管托马斯能够创建一个健壮的 Rails 应用程序，但它缺乏展示能力。他缺乏适当的 CSS 知识是他无法为他的项目创造强大影响的主要原因。

对于每一位开发者来说，平衡前端和后端能力始终是非常重要的。如果你无法以令人满意的方式展示你的应用程序，那么它肯定是没有用的。可能会有一些开发者从类似的前车之鉴中吸取教训，正如前一个例子所描述的那样。他们会努力尝试，并使用 CSS 学习网页设计，无论他们是否对这个领域感兴趣。通过这样做，他们忘记了设计是一个与之前所做完全不同的领域。这是 UX/UI 开发者的工作。

Bootstrap 开发者已经编写了许多可以直接插入我们项目的 CSS 定义，以表示它。它也是一个开源项目，许可协议为 MIT。这给了你在任何类型的项目中使用它而不必担心许可问题的自由。为什么我们要重新发明轮子，当有人已经为我们做了这项工作呢？专注于快速应用开发的开发者应该考虑在他们的每个项目中使用 Bootstrap。

Bootstrap 不仅仅是为开发者提供更好的 CSS 组件。它是一个移动优先的框架。这意味着你在应用中使用 Bootstrap 编写的任何内容，即使在较小的移动设备上也能兼容。由 Bootstrap 驱动的应用可以从极小的设备如 iPhone 扩展到更大的显示设备如 Retina 显示屏。它帮助你编写一个代码库并在任何地方使用。随着技术的进步，即使是本地的 iOS 和 Android 应用现在也可以使用 HTML、CSS 和 JavaScript 编写。它们被称为混合应用，这些应用通过像 PhoneGap 这样的工具移植到本地平台。想象一下，你的 Rails 应用正在各种设备上使用，如手机、智能电视、平板电脑，甚至是桌面屏幕。太棒了！不是吗？

在 Rails 项目中安装 Bootstrap

Bootstrap 只是一个 CSS、JavaScript 和字体文件的包。你可能很困惑为什么在这里我们使用“安装 Bootstrap”这个术语。好吧，在 Rails 中使用 Bootstrap 有两种不同的方式。第一种是将 Bootstrap 文件直接复制到 Rails 项目的适当位置。第二种是Bootstrap Sass 方式。正是因为第二种方式，我们使用了“安装”这个术语。它也作为一个 gemset 存在，可以在任何 Rails 项目中通过 bundle 安装。我们将在本节中详细探讨这两种方式。

还有第三种方式，使用 CDN 上的 Bootstrap 文件，这是最简单的一种。我们将在最后探讨这一点。

在 Rails 项目中放置 Bootstrap 文件

这是使用 Bootstrap 在 Rails 中的第一种方法。许多 Rails 开发者做错了这种方法。正确放置 Bootstrap 文件对于激活 Bootstrap 非常重要。按照以下步骤放置 Bootstrap 文件：

让我们创建一个新的 Rails 项目。这次我们将命名为Rails_Bootstrap_Project命令，如下所示：
```
rails new Rails_Bootstrap_Project
```
如同往常，前面的代码将运行各种其他命令，并需要一些时间来完成。我们不会讨论在这个 Rails 项目中创建的各种文件夹，因为这在上一章中已经介绍过了。
让我们在 Rails 中使用 scaffolding 命令创建一个名为todos的新模型，如下所示：
```
rails g scaffold todos title:string description:text completed:boolean
```
让我们也通过使用 migrate 命令在数据库中进行这个更改，如下所示：
```
rake db:migrate
```
你应该会收到一个成功的迁移消息。现在是时候启动服务器并检查 Todo 应用了。
```
rails s
```

现在，你可以访问 http://localhost:3000/todos 并点击 新建 Todo。应用程序应该可以正常工作，你将得到以下截图：

安装完成后，我们将得到一个名为 Rails_Bootstrap_Project 的文件夹，里面包含许多文件。如果你是 Rails 开发者，你肯定会想直接跳进去。让我们暂时保持这个项目原样，并继续从其官方网站下载 Bootstrap。步骤如下：

前往 getbootstrap.com 并点击 下载 Bootstrap 按钮。它将带你去另一个页面，有三个不同的选项可供选择。
选择第一个按钮，上面简单地写着 下载 Bootstrap。一个压缩包将开始下载。
下载完成后，提取所有文件。你可以在默认的 Bootstrap 包中看到三个不同的文件夹，分别是 css、js 和 fonts。我们需要将这些文件正确地放入我们的 Rails 项目中，以便使 Bootstrap 正常工作。

每个 Bootstrap 包都附带一组标准文件。css 文件夹包含四个不同的 CSS 文件。前两个 CSS 文件是：bootstrap.css 和 bootstrap.min.css。这两个文件完全相同，只是创建方式不同。在这里，bootstrap.css 是一个文档版本，而 bootstrap.min.css 是一个压缩版本。在压缩版本中，你将找不到任何注释或适当的缩进。压缩版本适用于准备用于生产的项目，因为它的大小更小。

接下来的两个文件，bootstrap.theme.css 和 bootstrap.theme.min.css，是 Bootstrap 的主题文件。Bootstrap 创建了自己的主题文件来覆盖其默认样式在各个组件上。这些文件完全是可选的。我个人从未使用过它们。这两个主题文件也是完全相同的。第一个是一个文档版本，而第二个是一个压缩版本。

接下来，我们来看看 Bootstrap 包的 js 文件夹，我们将找到两个不同的 JavaScript 文件：bootstrap.js 和 bootstrap.min.js。同样，这两个文件在本质上非常相似。前者是一个文档版本，而后者是一个压缩版本。这是主要的 Bootstrap JavaScript 文件。许多组件，如导航栏，都依赖于这个文件来正常工作。Bootstrap 的 JavaScript 组件依赖于 jQuery。Bootstrap 的包中不包含 jQuery，但我们需要将其包含在我们的应用程序中。通常，所有 Rails 项目都包含 jQuery。因此，我们不需要单独包含它。

Bootstrap 附带了一组图标，可以在我们的 Rails 应用程序中使用。这些图标被称为 Glyphicons。与其他图标不同，这些图标是字体。所有图标都存在于 Bootstrap 包的 fonts 文件夹中的各种字体文件中。

现在我们已经浏览了 Bootstrap 包中的所有文件，让我们按照以下步骤开始在我们的 Rails 应用中导入它们：

首先移动 CSS 文件。从 CSS 文件夹中复制bootstrap.min.css并将其放置在 Rails 应用的stylesheets文件夹中，通过导航到vendor/assets/stylesheets：
接下来，从js文件夹中复制bootstrap.min.js并将其粘贴到 Rails 应用的javascripts文件夹中，通过导航到vendor/assets/javascripts：
复制完整的fonts文件夹并将其放置在vendor文件夹下的assets文件中：

现在我们已经将所有的 Bootstrap 文件放在了vendors/assets文件夹中。现在是时候从默认的 Rails CSS 和 JavaScript 文件中链接它们了。
通过导航到app/assets/stylesheets打开stylesheets文件夹中的application.css文件：
将以下行应用到.css文件的应用中：
```
*= require bootstrap.min
```
这将包括vendor/assets/stylesheets目录中的bootstrap.min.css。Bootstrap 在bootstrap.min.css中编写了一些 CSS 属性，提供了字体文件的路径。这个路径在这里不起作用。我们需要在application.css文件中覆盖它。

将以下行粘贴到application.css中：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../assets/glyphicons-halflings-regular.eot');
  src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('../assets/glyphicons-halflings-regular.woff') format('woff'),
  url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

我们已经完成了 Bootstrap 的 CSS 文件的链接。接下来，我们需要链接 Bootstrap 的 JavaScript 文件。

打开app/assets/javascripts目录中的application.js文件：
将以下行应用到.js文件的应用中：
```
//= require bootstrap.min
```
这将通过导航到vendor/assets/javascripts链接javascripts文件夹中的bootstrap.min.js文件。
现在完成了！是的，我们已经成功地将 Bootstrap 应用到了我们的 Rails 应用中。重新启动服务器并打开我们创建的 Todo 应用。你将看到应用外观的一些细微变化：

新的截图有一个更粗体和清晰的字体。Bootstrap 使用浏览器重置，它清除所有默认的浏览器样式。因此，元素和浏览器窗口之间没有间隙。这有助于正确定义 CSS，并确保你的设计在各种浏览器中看起来都一样。

这就是将 Bootstrap 的静态文件直接注入到 Rails 项目中的全部内容。让我们看看其他一些方法。

Bootstrap – Sass 方式

Bootstrap 也支持 Sass。它作为一个 gemfile，可以直接安装到 Rails 应用中。我们首先将 Bootstrap 作为一个 gem 安装，然后尝试理解为什么这样做更好：

让我们创建另一个名为Rails_Bootstrap_Sass_Project的项目：
```
rails new Rails_Bootstrap_Sass_Project
```
安装完成后，打开位于应用程序文件夹家目录中的 Gemfile。
你可以在文件中看到许多 gem 依赖项。我们需要添加另一个 gem 依赖项，即 bootstrap-sass。也在这个文件中添加以下行：
```
gem 'bootstrap-sass', '~> 3.1.1'
```
上述命令将安装 Bootstrap 3.1.1，这是撰写本书时的最新版本。你也可以指定其他版本，根据可用性。
是时候再次安装这个项目的 gem 了。打开终端，导航到 Rails_Bootstrap_Sass_Project 文件夹。然后，输入以下命令：
```
bundle install
```
这将获取 gem bootstrap-sass 并将其包含到项目中。让我们使用脚手架命令创建一个名为 todos 的模型，如下所示：
```
rails g scaffold todos title:string description:text completed:boolean
```
还需要使用 rake 命令完成数据库迁移，如下所示：
```
rake db:migrate
```
迁移完成后，我们将从 Rails 的默认 css 和 javascript 文件链接 Bootstrap 的 css 和 js 文件。

通过导航到 app/assets/stylesheets 文件夹打开位于 stylesheets 文件夹中的 todos.css.scss 文件。将以下行放置在其中：
```
@import "bootstrap";
```
接下来，通过导航到 app/assets/javascripts 文件夹打开 javascripts 文件夹中的 application.js 文件。在文件中插入以下行：
```
//= require bootstrap
```

完成了！简单，不是吗？

如果你运行这个项目，你可以看到 Bootstrap 的字体和重置已经应用到默认应用中。

通过 CDN 使用 Bootstrap

内容分发网络（CDN）是一种在云端托管流行库的方式，允许开发者在需要时直接访问这些文件。一些流行的 CDN 服务提供商包括 Google Hosted Libraries (developers.google.com/speed/libraries/devguide)、cdnjs (cdnjs.com/)、CloudFlare (www.cloudflare.com/) 以及其他一些。

Bootstrap 还提供了 CDN 支持。他们已经在自己的云服务器上托管了 CSS 和 JavaScript 文件。让我们尝试使用以下步骤在 Rails 项目中使用 CDN：

创建一个名为 Rails_Bootstrap_CDN_project 的新 Rails 项目：
```
rails new Rails_Bootstrap_CDN_project
```
项目创建完成后，使用脚手架创建一个名为 todos 的新模型：
```
rails g scaffold todos title:string description:text completed:boolean
```
使用以下命令进行数据库迁移：
```
rails db:migrate
```
一旦所有上述步骤都成功完成，前往新创建的文件夹 Rails_Bootstrap_CDN_project。进入 app/assets/stylesheets 并打开 application.css 文件。
我们需要从 CDN 导入 Bootstrap 的 CSS 文件到这个文件中。因此，将以下行粘贴到其中：
```
@import "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
```
接下来，我们需要将 Bootstrap 的 JavaScript 文件从其 CDN 包含到我们的主视图中。前往 app/views/layouts 并打开 application.html.erb 文件。将以下行粘贴到 </head> 标签上方或 body 标签上方的 body 内部。
```
 <script src="img/bootstrap.min.js">
</script>
```

完成了！你已经成功将所有 Bootstrap 文件导入到你的 Rails 包中。继续前进，运行服务器并检查应用程序。它应该应用了 Bootstrap 的样式。

摘要

在所有将 Bootstrap 引入/安装到 Rails 项目的方法中，我肯定会建议你选择 Sass 方式。熟悉 Sass 的开发者绝对应该选择这种方式。

Sass 允许开发者完全自定义 Bootstrap 的默认样式和行为。随着我们继续阅读本书，我们将看到如何通过 Sass 来自定义 Bootstrap。Sass 为 CSS 世界带来了模块化。它在其中引入了编程能力。你可以使用变量、函数、继承等功能，通过 Sass 实现。

CDN 是另一种更好的选择，但风险很大。CDN 通常在许多安全网络中被屏蔽。在这种情况下，你的应用程序将加载而不包含任何 Bootstrap 文件。CDN 还通过向不同网络发送额外的请求来降低 Web 应用的性能。希望你已经通过本章对 Bootstrap 有了一个公平的了解。它是一个极其有用的框架，通过其 HTML 和 CSS 组件的使用，强制快速开发。在接下来的章节中，我们将看到如何在 Rails 应用程序中使用一些流行的 Bootstrap 组件。我们将看到使用 Bootstrap 创建高度响应式的 Rails 应用程序是多么容易。

第三章. 使用 Bootstrap 的网格系统为 Rails 应用供电

我们现在对 Bootstrap 有了很好的了解，以及我们如何在项目中安装它。通过本章，我们将了解 Bootstrap 可以做什么。

网格系统是 Bootstrap 框架的一个基本组成部分。如果不正确理解 Bootstrap 的网格系统，您将无法制作出响应式的网站/应用。这里的“响应式”是指一个在所有尺寸的设备上都能完美运行和显示的应用。

这就是混合应用的生成！开发者希望编写一次代码，使其可以从所有设备访问。为此，他们必须首先使他们的 Web 应用具有响应性。Bootstrap 通过其最流行的功能之一——网格系统，帮助创建响应式网站。

在本章中，我们将首先了解 Bootstrap 的网格系统，然后将其应用于我们的第一个应用，即 Online Packt Shopping。我们将尝试在本书的其余部分使用这个相同的应用。

在本章中，我们将涵盖：

Bootstrap 的网格系统是什么？
在 Rails 应用中实现 Bootstrap 的网格系统

Bootstrap 的网格系统是什么？

当我们第一次思考网格时，我们会想象垂直和水平线条的交叉，这些线条构成了网格。这里发生的情况也是如此。Bootstrap 的网格系统包含与水平线条相当的行，以及与垂直线条相当的列。当这些行和列相交时，它们就形成了网格，我们可以用它们在我们的网页中填充一些内容。简单，不是吗？

使用 Bootstrap 的网格系统的最大优点之一是它具有响应性。与 HTML 表格不同，Bootstrap 的网格系统是灵活的，并且在小屏幕上也能正确调整。Bootstrap 中的网格大小不是固定的。它们根据设备屏幕的大小而变化。因此，内容会根据可用空间重新排列。

大多数开发者未能正确理解网格系统，因此他们未能实现响应式网页设计。在本节中，我们首先创建一个静态的非 Rails 网页，展示如何创建 Bootstrap 的网格系统，然后我们将将其应用于我们的 Rails 应用中。

让我们在系统中的任何位置创建一个名为Responsive_website_static的文件夹。然后，创建一个名为index.html的 HTML 文件。我们将使用 Bootstrap 的 CDN 链接在网页中导入 Bootstrap 的 CSS 和 JavaScript 代码。现在，打开index.html文件，然后粘贴以下基本的 HTML 布局到其中：

<!DOCTYPE html>
<html lang="en">
  <head>f
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive_website_static</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstra. min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js">
    </script>
  </body>
</html>

上述标记符符合 Bootstrap 的推荐标记符。您可以看到它还有一些额外的元标签。这些元标签用于在所有类型的设备上正确渲染网页。使用UTF-8字符集是为了告诉浏览器您的网页包含一些unicode字符。

下一个具有 http-equiv="X-UA-Compatible" 和 content="IE=edge" 属性的元标签用于 Internet Explorer。有时，Internet Explorer 会切换到兼容模式而不是使用其最佳模式。因此，这个标签告诉 Internet Explorer 在渲染你的网站时使用其最佳模式。

下一个元标签是一个 viewport 标签。它告诉浏览器在移动设备上缩放并适应整个屏幕。

我们没有从浏览器下载 Bootstrap 文件，而是使用了 CDN 链接来链接到 Bootstrap 的 CSS 和 JavaScript 文件。由于 Bootstrap 也依赖于 jQuery，我们同样使用了 jQuery 文件的 CDN 链接。

最后，我们有一个 <h1> 标签，用于在网页上显示消息 Hello World。因此，让我们在浏览器中打开它并检查所有文件是否已正确加载。网页现在应该看起来像以下截图：

如果你使用的是 Google Chrome，你可以轻松地检查所有 CDN 文件是否已正确加载。在网页上的任何地方右键单击，并选择“检查元素”。屏幕下方将出现许多开发者工具标签。选择网络标签并重新加载页面。在 状态文本 列中，你将看到针对每个资源名称的许多响应代码。如果没有响应代码失败，则所有文件都已正确加载。

在我们开始向网页内填充任何内容之前，我们需要创建一个容器。这将用于包裹所有网页内容并将其居中到浏览器屏幕。Bootstrap 中有两种不同的容器类："container" 和 "container-fluid"。第一个类 "container" 具有固定宽度并自动居中到浏览器窗口。第二个类 "container-fluid" 是一个全宽容器，它从浏览器窗口的左侧延伸到右侧。因此，让我们在 index.html 中定义一个容器并将 Hello World 消息放入其中：

<div class="container">
  <h1>Hello World</h1>	
</div>

以下截图显示了输出：

你可以看到消息是如何向中心移动的。如果我们给容器应用一个背景，它将更加清晰可见。因此，让我们给容器标记写入内联 CSS：

<div class="container" style="background: cyan">
  <h1>Hello World</h1>	
</div>

这是前面代码的输出：

在使用 Bootstrap 的网格系统之前，你应该始终定义一个容器。现在，我们可以继续定义行。要定义一个行，我们必须使用一个名为 row 的类。因此，让我们继续并在容器内创建一个行：

<div class="container">
  <div class="row">
  </div>
</div>

创建一行是告诉 Bootstrap 你想要使用其网格系统的一种方式。现在是时候在上面的行内布局垂直列了。Bootstrap 中的一个单独的列将占据行内的所有空间。创建两列将把行的空间分成两半。因此，你创建的列越多，行的空间就会平均分配。Bootstrap 的网格系统可以扩展到 12 列。如果你创建超过 12 列，剩余的列将自动移动到新的一行。所以，让我们首先创建一个单独的列：

<div class="container" style="background: cyan">
  <div class="row">
    <div class="col-xs-12" style="background: green">
      <h1>Hello World</h1>
    </div>
  </div>
</div>

让我们来看看输出结果：

在 Bootstrap 网格系统中，列是通过它将跨越的列数来声明的。如果你想创建一个单独的列，你需要它跨越 12 个 Bootstrap 列。因此，我们得到类 "col-xs-12"。如果你想创建两列，你必须使用类 "col-xs-6"。这将使每个列跨越六个 Bootstrap 列。所以，让我们继续，在前面的标记中创建两列：

<div class="container" style="background: cyan">
    <div class="row">
      <div class="col-xs-6" style="background: green">
        <h1>Hello</h1>
      </div>
    <div class="col-xs-6" style="background: red">
      <h1>World</h1>
    </div>
  </div>
</div>

让我们来看看输出结果：

Bootstrap 为不同尺寸的设备定义了类。在前面的例子中，我们一直在使用类如 "col-xs-*"。在这里，字母 xs 代表超小设备及其以上的设备范围。因此，类 "col-xs-" 将在从超小设备开始的所有类型的设备上创建一个大小为 12 个 Bootstrap 列的列。Bootstrap 有四种不同类型的类，用于四种不同尺寸的设备：

超小设备 ".col-xs-*"：这些设备的屏幕尺寸小于 768 像素
小设备 ".col-sm-*"：这些设备的屏幕尺寸小于 992 像素，且大于或等于 786 像素
中等设备 ".col-md-*"：这些设备的屏幕尺寸小于 1200 像素，且大于或等于 992 像素
大设备 ".col-lg-*"：这些设备的屏幕尺寸大于 1200 像素

例如，如果你正在定义列，考虑到中等设备大于或等于 992 像素，那么这些列即使在大于或等于 992 像素和 1200 像素的大设备上看起来也相同。在小于 992 像素的小设备和 768 像素的超小设备上，它们将堆叠在一起。因此，如果你为超小设备定义列，那么它们在所有类型的设备上看起来都一样。

使用 Bootstrap，你还可以在不同设备上动态地更改列的数量。例如，使用类 "col-xs-4" 和 "col-sm-6" 一起，将使列在超小设备上跨越四个 Bootstrap 列，在小设备上跨越六个 Bootstrap 列。步骤如下：

<div class="container" style="background: cyan">
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background: green">
      <h1>Hello</h1>
    </div>
    <div class="col-xs-12 col-sm-6" style="background: red">
      <h1>World</h1>
    </div>
  </div>
</div>

让我们来看看输出结果：

前面的截图显示了在超小设备上的网页。浏览器由于类 "col-xs-12" 的存在，每行渲染一列。

希望现在你已经了解了 Bootstrap 列的命名方式。那么，让我们继续探讨 Bootstrap 网格系统中的另一个重要概念，即嵌套列。

嵌套列

在 Bootstrap 中，可以在列内定义列。为此，您需要在列标记内声明一个新的行，然后继续在其中创建列。让我们修改之前的代码来测试嵌套列：

<div class="container" style="background: cyan">
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background: green">
      <h1>Hello</h1>
      <div class="row">
        <div class="col-xs-6" style="background: orange">
          <h2>PACKT</h2>
        </div>
        <div class="col-xs-6" style="background: grey">
          <h2>PUBLISHING</h2>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6" style="background: red">
      <h1>World</h1>
    </div>
  </div>
</div>

让我们看看输出结果：

在前面的屏幕截图中，你可以清楚地看到我们在第一个列内创建了两个不同的列。由于第二个列没有嵌套列，因此主容器的背景色（青色）现在对我们可见。这样，你可以创建任意数量的嵌套列。

在 Rails 应用程序中实现 Bootstrap 的网格系统

现在是时候在我们的 Rails 应用程序中使用网格系统了。如前所述，我们将创建一个名为 Online Packt Shopping 的应用程序。我们将在本章中使用网格系统创建一个针对产品的 CRUD 应用程序。随着我们学习 Bootstrap 的不同功能，我们将继续开发这个应用程序。

因此，让我们继续创建一个名为 Online Packt Shopping 的 Rails 应用程序。

rails new OnlinePacktShopping

应用程序创建后，你应该导航到新创建的文件夹内，并启动 Rails 服务器以测试应用程序是否正确安装。那么，让我们使用以下命令进行操作：

cd /OnlinePacktShopping
rails server

访问网页 http://localhost:3000。它应该显示默认的 Rails 应用程序 欢迎板。

我们的产品将具有以下四个属性：

名称
特色图片
描述
价格

因此，让我们相应地进行操作

现在，我们将使用以下命令构建和生成一个产品模型：

rails generate scaffold Product name:string featImage:string description:text price:decimal

此命令将创建一个名为 NewProduct 的模型及其相关属性。你需要使用 rake 命令将新创建的模型迁移到数据库中。你可以使用以下命令来完成：

rake db:migrate

一旦成功完成，运行服务器并打开：http://localhost:3000/products。你应该看到一个空的产品列表页面：

我们首先需要将 Bootstrap 包含到这个应用程序中。为此，我们将使用第二章中描述的 CDN 方法：在 安装 Bootstrap 到 Rails 项目 部分的 介绍 Bootstrap 3 中。第二章。

一旦你在你的应用程序中包含了 Bootstrap，你可以重新加载前面的网页，并看到 Bootstrap 对 HTML 元素应用的 CSS 重置。你还可以看到字体已从 Times New Roman 更改为 Open Sans。那么，让我们看看输出结果：

我们将遵循前一小节中讨论的所有步骤。首先，我们需要为我们的应用程序定义一个容器。打开application.html.erb，它位于app/views/layouts中。

我们需要将<%= yield %>包裹在 Bootstrap 容器标记内：

<div class="container">
  <%= yield %>
</div>

让我们看看输出结果：

接下来，我们需要更改此页面上内容显示的方式。我们不需要一个表格来列出我们的产品。我们将使用 Bootstrap 的网格系统以响应式网格布局美观地显示产品。

打开index.html.erb，它位于products文件夹中，通过导航到app/views/products。如果您熟悉 Rails 开发，您必须知道在views文件夹内为每个模型都有一个单独的文件夹。每个模型文件夹中的index.html.erb文件用于显示各种模型。继续并删除该文件中所有内容。

首先，我们需要一个页面标题来告诉用户页面显示的内容。因此，让我们使用 Bootstrap 的".page-header"类创建一个页面标题。在index.html.erb中插入以下代码：

<div class="page-header">
  <h3>All Products</h3>
</div>

接下来，我们需要创建一个行来显示产品。因此，更新标记并添加以下内容：

<div class="row">
</div>

现在，我们将在该行内创建列。对于我们的应用程序，我们希望在布局中具有以下功能：

极小移动设备中的列
小移动设备中的列
中等设备中的列
大设备中的列

因此，我们将使用以下组合来定义我们的列：“col-xs-12 col-sm-6 col-md-4 col-lg-3”。让我们继续并更新前面的行标记，只使用一个列：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

我们现在将遍历每个产品的列标记。因此，我们需要更新我们的标记如下：

<div class="row">
  <% @products.each do |product| %>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  </div>
  <% end %>
</div>

现在，我们需要填充这个列的产品详情：

<div class="row">
  <% @products.each do |product| %>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 text-center">
    <h2><%= product.name %></h2>
    <img class="img-responsive" src=<%=asset_path product.featImage %>/>
    <p><%= product.description %></p>
    <h4>$<%= product.price %></h4>
    <%= link_to 'Show', product, :class=>"btn btn-primary" %>
  </div>
  <% end %>
</div>

在前面的代码中，我正在遍历product对象，重复打印相同的标记，但带有不同的数据。对于每个产品，我使用<h2>标签打印其名称，使用<img>标签打印图像，使用<p>标签打印产品描述，使用<h4>标签打印产品价格，最后使用link_to打印产品页面的链接。

您可以看到，在打印 HTML 标签中的数据时，我还添加了一些额外的类。这些类携带与它们关联的一些 CSS 样式，这些样式是由 Bootstrap 编写的。例如，将类"img-responsive"添加到<img>标签中将使图像适应网格的大小，而不管图像的大小如何。我还使用了btn和btn-success类的组合，这些类用于<a>和<button>标签。这些类给链接带来了时尚的按钮外观。我们将在后续章节中了解更多关于这些类的信息。

让我们继续并查看在我们在数据库中使用“新产品”页面填充数据后，这个页面将看起来如何：

上述截图是桌面视图。

上述截图是中等尺寸设备的视图。这将是市场上大多数平板电脑的视图，输出如下：

你可以看到列数正在减少，正如我们的设计要求。上述图像显示了较小设备的布局。以下截图显示了超小设备的视图：

你可以看到，在超小设备中，布局已经变为单列设计。

在这个页面上，还有一些东西缺失，那就是添加新产品的链接。让我们将一个漂亮的“新产品”页面放置在页面标题的右侧。更新页面标题的标记如下：

<div class="page-header">
  <%= link_to 'New Product', new_product_path, :class=>"btn btn-success pull-right" %>
  <h3>All Products</h3>
</div>

现在的网页应该看起来像：

你一定在想我是如何将“新产品”按钮拉到页面右侧的。如果你正确地查看标记，我使用了额外的 Bootstrap 类名 pull-right。这些类在 Bootstrap 中被称为辅助类。Bootstrap 中有很多辅助类，随着我们继续阅读本书，我们将了解更多关于它们的信息。

摘要

在本章中，我们了解了 Bootstrap 的网格系统，并创建了两种不同类型的项目：一个静态的演示网页和一个在线购物 Rails 应用。我们看到了如何使用网格系统，并使我们的主页能够适应各种尺寸的设备。当前应用中仍有许多页面未进行样式设计：添加产品页面、编辑产品页面和单个产品页面。我们将在后续章节中使用 Bootstrap 对它们进行样式设计。

在下一章中，我们将了解 Bootstrap 提供的各种排版支持，玩转漂亮的 Bootstrap 按钮，并使用 Bootstrap 对图像进行更多操作。

第四章：在 Rails 应用程序中使用 Bootstrap 的排版、按钮和图片

设置网站的文本、图像和链接是任何网页设计的重要组成部分。在前一章中，我们看到了如何使用 Bootstrap 的网格系统定义网站的适当布局。在本章中，我们将更多地关注设置网站的内容样式，如文本、链接和图像。

Bootstrap 为各种 HTML 元素提供了许多默认样式。例如，它为锚点标签、标题标签、有序和无序列表等提供了默认样式。这些样式是通过 Bootstrap 定义的特定类来应用的。

Bootstrap 专注于快速网页开发。因此，当对网页设计知之甚少的开发者开始使用 Bootstrap 时，它不会让他们失望。Bootstrap 的这些较小的默认样式将帮助您摆脱许多 HTML 元素的浏览器默认样式。

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

设置样式
创建 Bootstrap 按钮
在 Bootstrap 中设置图像样式

设置

在本章中，我们将使用与第三章中创建的相同静态网站设置，Responsive_website_static，使用 Bootstrap 的网格系统为 Rails 应用程序提供动力。复制文件夹Responsive_website_static并将其重命名为Bootstrap_default_styles。打开index.html文件，从<body>标签中删除所有内容，除了 Bootstrap 的 JavaScript。将页面的标题更改为Bootstrap 默认样式。您的index.html文件现在应具有以下内容：

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap default styles</title>
      <!-- Bootstrap -->
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js"></script>
  </body>
</html>

如您在第三章，使用 Bootstrap 的网格系统为 Rails 应用程序提供动力中学习的那样，您应该在body标签内放置一个div容器来包裹所有网站内容并将它们正确地放置在屏幕中央。因此，让我们使用以下标记创建一个容器：

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

设置样式

当我们谈论排版时，我们指的是标题标签、段落标签、内联文本元素、适当的对齐、文本转换以及网页上的任何文本。

Bootstrap 为从<h1>到<h6>的所有标题标签提供了默认样式。如果您想在 HTML 页面中创建一个标题标签，可以直接放置标题标签而不需要任何类。让我们看看一个例子。将以下 HTML 元素插入之前创建的静态网站中：

<div class="container">
  <h1>Let's save the Earth.</h1>
  <h2>Let's save the Earth.</h2>
  <h3>Let's save the Earth.</h3>
  <h4>Let's save the Earth.</h4>
  <h5>Let's save the Earth.</h5>
  <h6>Let's save the Earth.</h6>
</div>

上述代码在浏览器中的输出将如下所示：

可能存在一些情况，你不需要使用标题标签，但可以使用其他 HTML 元素达到相同的默认样式。Bootstrap 将帮助你做到这一点。你可以使用类".h1"到".h6"来获取所需的排版样式。让我们删除前面示例中的所有标题标签，并使用段落标签代替。这次，我们将使用 Bootstrap 的标题类来获取相同的样式：

<div class="container">
  <p class="h1">Let's save the Earth.</p>
  <p class="h2">Let's save the Earth.</p>
  <p class="h3">Let's save the Earth.</p>
  <p class="h4">Let's save the Earth.</p>
  <p class="h5">Let's save the Earth.</p>
  <p class="h6">Let's save the Earth.</p>
</div>

在浏览器中，前面的标记将看起来像这样：

是时候给标题标签添加副标题了。副标题在你想为你的网站显示简短标语时非常有用。在 Bootstrap 中，我们将使用 HTML 标签"<small>"来添加任何所选标题标签内的副标题。小标签是一个内联标签，在原始 HTML 中用于相同的目的。以下代码为例：

<div class="container">
<h1>Save Earth <small>A PACKT Publishing Initiative.</small></h1>
</div>

输出将如下所示：

你可以看到小标签相对于标题标签内容显得更小，尽管它们位于相同的标签中。

让我们讨论如何对段落标签进行样式设计。Bootstrap 将默认的 14px 大小应用到所有段落标签。你不需要使用任何类来将 Bootstrap 的样式应用到段落标签。让我们看看一个示例。我在前面的标记中插入了两段虚拟段落。让我们应用以下代码：

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla dictum libero, vel placerat lorem elementum tristique.
</p>
<p>
  Pellentesque laoreet ipsum libero, eu commodo ligula semperin. Fusce vitae feugiat lorem. Morbi tempor, nunc in auctor blandit, nibh purus scelerisque sem,…..
</p>

在浏览器中的输出将如下所示：

你甚至可以通过使用.lead类来调整段落标签，使其在网页中其他段落标签中脱颖而出。让我们将这个类添加到前面标记中的第一个段落，并查看它产生的差异：

<p class="lead">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla dictum libero, vel placerat lorem elementum tristique.
</p>

输出将如下所示：

Bootstrap 甚至允许你使用<mark>标签在段落中突出显示文本。我在段落中添加了<mark>标签，它在前面的标记中被突出显示，并得到了以下结果：

其他排版功能如下：

你可以通过在 HTML <del>或<s>标签周围包裹文本来添加删除线。
使用 HTML <ins>和<u>标签包裹文本以加下划线
你还可以在段落标签内使用 HTML <small>标签来显示相对于段落周围文本的较小文本。
你可以使用 HTML <b>和<strong>标签将文本加粗
使用 HTML <em>和<i>标签使文本斜体

对齐文本

Bootstrap 提供了用于文本内容对齐的辅助类。这些类包括：

text-left
text-right
text-center
text-justify
text-nowrap

让我们将text-right应用到前面的段落文本中，并查看它如何重新对齐文本：

<p class="lead text-right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla dictum libero, vel placerat lorem elementum tristique.
</p>

输出将如下所示：

你可以看到文本现在相对于容器的位置已对齐到右侧。

text-nowrap 类移除了自动换行，并使段落显示为单行，如下面的截图所示：

尝试使用其他对齐类，并在浏览器中查看变化。

文本转换

将文本转换为大写、小写或首字母大写在某些网络应用中有时是非常必要的操作。Bootstrap 提供了执行这些转换的类：

text-lowercase
text-uppercase
text-capitalize

通过 CSS 或使用 Bootstrap 的类进行文本转换在设计网站时绝对不推荐。爬虫和搜索引擎在文本实际上写入网页时解析文本。CSS 只是在浏览器中改变其显示方式。

引用块

引用块是 Bootstrap 非常重要的组件。它们用于引用一些重要信息或流行格言。让我们看看如何在 Bootstrap 中创建引用块。

将以下标记放置在我们静态网站容器的内部。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

它将在浏览器中产生以下输出：

您可以看到在 blockquote 的左侧放置了一个垂直条。Bootstrap 中的引用块提供了许多自定义选项。例如，将 <footer> 元素放置在 blockquote 代码内部将如下所示：

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>by Syed Fazle Rahman</footer>
</blockquote>

上述代码的输出将如下所示：

您还可以通过应用类 blockquote-reverse 来改变引用块的排列。它会使引用块看起来如下所示：

样式化列表元素

列表元素，即 <ol> 有序列表元素和 <ul> 无序列表元素，在网页中扮演着非常重要的角色。它们用于创建项目列表，例如创建菜单、列出特性等。Bootstrap 为这些元素提供了一些默认样式。它重置了浏览器的默认样式，并添加了最小样式。让我们样式化列表元素：

<ul>
<li>Call Mommy</li>
<li>Go out for dinner tonight</li>
<li>Call Girlfriend(s) ;-)</li>
<li>Attend tomorrow's lecture</li>
</ul>

输出将如下所示：

现在，让我们看看有序列表：

<ol>
  <li>Call Mommy</li>
  <li>Go out for dinner tonight</li>
  <li>Call Girlfriend(s) ;-)</li>
  <li>Attend tomorrow's lecture</li>
</ol>

上述代码的输出将如下所示：

让我们通过 Bootstrap 添加一些辅助类来修改列表的外观。将类 list-inline 添加到前面的任何列表中，将使列表项显示为内联，即并排，如下面的截图所示：

将类 list-unstyled 添加到任何列表元素中，将移除列表项中的项目符号或数字。这些在下面的截图中显示：

让我们进行一些实验，并嵌套无序列表以检查 Bootstrap 是否仍然支持我们：

<ul>
  <li>Call Mommy</li>
  <li>Go out for dinner tonight</li>
  <li>
    Call Girlfriend(s) ;-)
    <ul>
    <li>Julie</li>
    <li>Marry</li>
    <li>Monalisa</li>
    <li>Others :-D</li>
    </ul>
  </li>
  <li>Attend tomorrow's lecture</li>
</ul>

上述代码的输出将如下所示：

噢，是的！Bootstrap 支持嵌套列表。尝试用另一个列表和一组辅助类进行实验。要更改项目符号的样式，您需要编写自己的样式。以下代码作为示例：

ul{
list-style-type: circle;
}

创建和样式化按钮

在前一章中，我们看到了 Bootstrap 中创建按钮的概览。任何锚点标签<a>或<button>标签都可以使用 Bootstrap 使其看起来像花哨的按钮。要创建按钮，您需要使用.btn类与许多其他辅助按钮类结合使用。Bootstrap 中有两种不同类型的按钮类：用于不同大小和用于不同颜色。

不同颜色的按钮类如下：

btn-primary：这个按钮类用于创建深蓝色的按钮
btn-info：这个类用于创建浅蓝色的按钮
btn-success：这个按钮类用于创建绿色的按钮
btn-warning：这个类用于创建浅黄色的按钮
btn-danger：这个类用于创建红色的按钮
btn-default：这个类用于创建白色的按钮
btn-link：这个类用于使按钮看起来像链接，同时保留按钮的行为

让我们看看按钮的实际效果。以下是创建单个按钮的标记：

<a href="http://www.packtpub.com/" class="btn btn-success">
  PACKT Pub
</a>

以下屏幕截图显示了所有按钮的状态：

Bootstrap 也有用于创建各种大小按钮的类。这些类必须与btn和颜色类结合使用。各种大小的类如下：

btn-lg：这个类用于创建大按钮
btn-sm：这个类用于创建小按钮
btn-xs：这个类用于创建极小的按钮
无类：这个类用于创建默认大小的按钮

以下示例展示了如何使用这些类：

<a href="http://www.packtpub.com/" class="btn btn-primary btn-lg">
  PACKT Pub
</a>

下面是一个显示所有按钮大小的屏幕截图：

Bootstrap 按钮还带有各种状态，如活动、禁用等。Bootstrap 按钮的属性如下：

active状态：当您点击 Bootstrap 按钮时，这个状态会自动添加到按钮上。如果您想让按钮始终看起来像活动按钮，那么请给它添加active类：
```
<a href="http://www.packtpub.com/" class="btn btn-info btn-lg active">
  PACKT Pub – Active
</a>
```
在这个屏幕截图中可以看到按钮的active状态：

如前一个放大图像所示，活动按钮会得到一个内嵌阴影效果。

disabled状态：要使按钮禁用，只需给它添加一个disabled属性：

<a href="http://www.packtpub.com/" class="btn btn-info btn-lg" disabled>
  PACKT Pub – Disabled
</a>

禁用按钮不可点击。

如果是<button>标签，您需要为disabled属性提供一个禁用值：

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">
  PACKT Pub – Disabled
</button>

哪些元素可以使用 Bootstrap 的按钮类？

这是需要记住的最重要的几点之一。你不能将按钮类应用于任何 HTML 元素。只有四种不同类型的元素可以用作 Bootstrap 的按钮：

HTML 锚点标签：<a>
HTML 按钮标签：<button>
HTML 带按钮类型的输入标签：<input type="button" />
HTML 带提交类型的输入标签：<input type="submit" />

Bootstrap 中的图像样式

图像对任何网络应用都是至关重要的。正确显示它们非常重要。Bootstrap 提供了许多不同的类，可以帮助你在你的网络应用中适当地显示图像。

当我们谈论响应式图像时，我们指的是一个图像，无论其自身大小如何，都能适应其容器的大小。在 Bootstrap 中创建响应式图像只是单个类的问题。这个特性在创建用户门户时特别有用，因为你不知道他们将要上传的图像大小。因此，在这种情况下添加 Bootstrap 的响应式类将非常有帮助。你还应该记住，Bootstrap 不会改变实际图像的大小。它只会使用 CSS 属性来调整大小。

用于创建响应式图像的类是 img-responsive。让我们使用 Bootstrap 的网格系统创建一个网格，然后添加一个响应式图像来查看它如何适应网格的大小。添加响应式图像的步骤如下：

<div class="container">
  <div class="row">
    <div class="col-xs-4" style="background: grey">
      <img src="img/packt_logo.png" class="img-responsive">
    </div>
  </div>
</div>

上述代码的输出将如下所示：

我使用了背景颜色来显示网格的范围。你可以看到图像适应了网格。

Bootstrap 还提供了一些用于即时装饰图像的辅助类。Bootstrap 的辅助类包括：

img-rounded：这会创建一个方形图像，但边缘略微圆滑。
img-circle：这会产生一个圆形图像。
img-thumbnail：这会给图像添加一个可点击的效果。这也在图像上添加了悬停效果。

以下截图显示了所有前面的类，分别如下：

在我们的 Online Packt 购物 应用程序中，我们使用了响应式图像类来在主页上显示产品列表。

摘要

希望你喜欢使用 Bootstrap 的各种样式类。你可以访问 Bootstrap 的在线文档（[http://getbootstrap.com/css/](http://getbootstrap.com/css/））了解更多的 CSS 类。在接下来的章节中，我们将非常频繁地使用这些 Bootstrap 类，我们将专注于完成我们的购物应用。

第五章在 Bootstrap 中重新设计表格和表单

表格和表单是 HTML 的古老功能。自从互联网诞生以来，它们一直在互联网上扮演着关键角色。通过 Bootstrap 和 Rails，我们将重新发明一种全新的方式来创建我们的 Web 应用程序中的表单和表格。

在本章中，我们将查看 Bootstrap 表格和表单的各种功能。在 Rails 应用程序中验证表单时，我们将使用 Bootstrap 的验证类。最后，我们将使用 Bootstrap 的表格来填充存储的数据。

我们将继续开发上一章中半设计的相同演示应用程序。现在，我们将看到如何通过使用 Bootstrap 的表格来修改单个产品页面。上一章中还有一些未设置样式的页面：新产品表单页面和编辑产品表单页面。我们也将使用 Bootstrap 表单来修改这些页面。

然而，在我们跳入应用程序之前，我们需要了解 Bootstrap 的表格和表单是如何创建的。因此，我们将像往常一样先创建一些虚拟产品，然后将其集成到我们的实际应用程序中。

创建 Bootstrap 表格

Bootstrap 表格是普通的 HTML 表格，附带 Bootstrap 提供的一些特殊类。这些类包含各种不同的 CSS 样式，可以应用于 HTML 表格。因此，Bootstrap 为你提供了多个类来创建不同类型的表格，以满足你的需求。

因此，让我们首先创建一个基本的 HTML 表格。为此，创建一个名为Bootstrap Tables的虚拟项目，并创建一个index.html文件。将以下 Bootstrap 推荐的 HTML 标记复制到该文件中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Tables</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js"></script>
  </body>
</html>

此文件已从 CDN 包含所有必要的 Bootstrap 文件。让我们继续使用 Bootstrap 容器并在文件中插入代码：

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

让我们在容器内创建一个 HTML 表格：

<div class="container">
  <table>
    <tr>
      <th>Item Name</th>
      <th>Price ($)</th>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>$114</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$234</td>
    </tr>
  </table>
</div>

如果你预览浏览器中的前一个标记，你会看到一个不那么出色的带有两列的表格，以下是截图：

是时候看看 Bootstrap 的魔法了。只需将table类添加到截图中的前一个表格中，你就会发现一个排列整齐且不错的表格：

<div class="container">
  <table class="table">
  </table>
</div>

在插入上述代码后，你会得到以下类似的截图：

这太棒了，不是吗？

让我们继续探索。现在，将.table-striped类添加到截图中的前一个表格中。同时保留表格标记中的.table类。在这里，.table-striped是一个辅助类，用于为表格添加额外的交替条纹样式：

<div class="container">
  <table class="table table-striped">
  </table>
</div>

你应该得到以下类似的截图：

还有更多。要得到一个带边框的表格，这次将.table-bordered类添加到table类中：

<div class="container">
  <table class="table table-bordered">
  </table>
</div>

输出结果如下：

一些其他辅助类包括：

.table-hover：将此类添加到表格中，当鼠标悬停在其上时，会突出显示一行。
.table-condensed：当你想要减少每个单元格的间距时添加此类。

你不应该将自己限制在将之前的类组合在一起的单个表格中。我将这个实验留给你。

Bootstrap 有五种不同的上下文类。这些类被添加到特定的行中，以特定的颜色突出显示。Bootstrap 中的五个上下文类是：

active：这是为了添加浅灰色背景颜色
success：这是为了添加浅绿色背景颜色
danger：这是为了添加红棕色背景颜色
info：这是为了添加浅蓝色背景颜色
warning：这是为了添加浅黄色背景颜色

以下截图显示了所有之前的上下文类在作用：

之前提到的上下文类也可以应用于特定的单元格。例如：

<tr>
  <td class="warning">Warning text here</td>
</tr>

这只会突出显示该单元格，而不是整行。

让我们谈谈 Bootstrap 表格的响应性。默认情况下，Bootstrap 表格具有响应性。它们根据浏览器窗口的大小改变整体宽度和列宽。可能会有时候你在你的表格中有数百列，你需要在一个移动屏幕上查看它。想象一下 100 列将表格宽度分成 100 个相等的部分。太乱了，不是吗？

好吧，这里是 Bootstrap 来帮忙！Bootstrap 提供了一个名为 .table-responsive 的类，当空间不足时，它会为表格添加一个水平滚动条。这也使得表格在移动屏幕上对基于触摸的滚动做出响应。

请注意，你不应该使用这些表格来构建网页结构。基于表格的布局已经过时，并且通常被认为从 SEO 角度来看是糟糕的。你应该只使用表格来显示表格数据。

创建 Bootstrap 表单

在 Bootstrap 中创建表单就像创建表格一样简单，正如我们在上一节中看到的。你所需要的是一些 HTML 标记和适当的 Bootstrap 表单类。在本节中，我们将再次创建一个名为 Bootstrap Forms 的虚拟项目，并添加一个 index.html 文件。还要在这个文件中填充之前章节中显示的基本 Bootstrap 推荐的 HTML，不要忘记在其中添加 Bootstrap 容器。

让我们在先前的容器中添加一个简单的 <form> 标签：

<div class="container">
  <form>            
  </form>
</div>

你不需要将任何类附加到表单标签上。这里的类是添加到表单元素上的。

让我们在表单中添加第一个表单元素。我们将放置一个文本字段和一个相关的标签元素。Bootstrap 允许你创建一个由标签和文本字段组成的表单组，这有助于 Bootstrap 正确地样式化表单元素。表单组是通过一个具有 .form-group 类的 div 元素创建的。让我们在先前的表单中添加一个表单组：

<div class="container">
  <form>
    <div class="form-group">
      <label for="emailField">Email address</label>
      <input type="text" class="form-control" id="emailField" placeholder="Enter email">
    </div>
  </form>
</div>

我们还向文本字段添加了.form-control类以应用 Bootstrap 的文本字段样式。您还可以将此类添加到其他基于文本的字段，如 <textarea>、<datetime>、<email> 等。

前面的表单现在应该看起来如下截图所示：

以类似的方式，我们将使用密码字段填充前面的表单：

<div class="form-group">
  <label for="passwordField">Password</label>
  <input type="password" class="form-control" id="passwordField" placeholder="Enter email">
</div>

这给我们展示了以下截图中的表单：

是时候向表单添加复选框和单选按钮了。Bootstrap 为复选框和单选按钮提供了一组不同的类，.form-control与它们不兼容。这次，我们将使用checkbox和radio类创建包装器。例如：

<div class="checkbox">
  <label>
    <input type="checkbox"> Remember me
  </label>
</div>

这将在您的表单中创建一个正确对齐的复选框。只需将checkbox替换为.radio并在其中创建一个单选按钮：

<div class="radio">
  <label>
    <input type="radio"> Male
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"> Female
  </label>
</div>

目前，我们将在表单中使用复选框元素，如下所示：

最后，让我们在表单中添加一个提交按钮。提交按钮的标记如下：

<button type="submit" class="btn btn-success">Sign in</button>

这是一个基本的 Bootstrap 按钮，具有 btn 和 .btn-success 类。第一个类给它提供了按钮的形状，而第二个类则应用了颜色。

我们最终的 Bootstrap 表单现在将看起来如下截图所示：

您还可以在 Bootstrap 中创建不同类型的表单。例如，如果您想在网站的顶部细导航栏中放置登录表单，那么前面的表单肯定不适合。

Bootstrap 允许您将所有表单元素放置在一行或并排，以便在类似情况下正确适配。要创建内联表单，您只需要一个类，就像往常一样，.form-inline。您需要将此类添加到前面的<form>标签中。

<form class="form-inline">
  ...
</form>

您应该得到以下输出：

我知道您在这里感到惊讶！当添加.form-inline类时，Bootstrap 为.form-group添加了一行 CSS 代码。以下是 Bootstrap CSS 中的代码快照：

.form-inline .form-group{
  display: inline-block;
}

另有一个非常实用的 HTML 表单元素叫做 <select>，用于创建下拉菜单。您可以为它添加.form-control类以移除默认浏览器样式并应用 Bootstrap 的样式。例如：

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

要在 Bootstrap 表单中禁用字段，只需将 HTML5 的 disabled 属性添加到任何文本字段。Bootstrap 将应用一个非激活的样式。这适用于基于文本的字段、复选框、单选按钮、表单按钮和 <select> 元素。

您还可以使用以下尺寸类控制 Bootstrap 中每个文本字段和选择元素的尺寸：

.input-lg：将.input-lg添加到文本字段会使它看起来比默认样式更大
.input-sm：将.input-sm添加到文本字段会使它看起来比默认样式更小

有时候，你可能需要在每个表单字段下方添加一个 help 文本。为此，你需要在 .form-group 元素内添加一个具有 .help-block 类的 span 元素。例如：

<div class="form-group">
  <label class="control-label" for="emailField">Email Address</label>
    <input type="text" class="form-control" id="emailField">
    <span class="help-block">Enter a valid email address.</span>
  </span>
</div>

Bootstrap 表单中的验证类

Bootstrap 与 HTML5 的默认表单验证功能配合良好。将一个名为 required 的属性添加到任何表单元素中，将阻止表单提交。Bootstrap 的 JavaScript 没有任何预定义的验证功能。它为你提供可以在运行时应用于表单元素的 CSS 类。这些类对于突出显示哪些表单元素需要用户注意非常重要。

让我们看看 Bootstrap 的一些表单验证类：

.has-error：此类用于突出显示红色
.has-warning：此类用于突出显示一种暗淡的黄色
.has-success：此类用于突出显示绿色

这些类应用于 .form-group 元素。例如，将 .has-error 类添加到任何 .form-group 元素上，将突出显示标签和表单元素为红色：

<div class="form-group has-error">
  <label for="emailField">Email address</label>
  <input type="text" class="form-control" id="emailField" placeholder="Enter email">
</div>

你应该得到以下类似的内容：

请注意，Bootstrap 不会自动添加验证类。你必须通过编程方式添加它们以突出显示错误。

你还可以在每个表单元素旁边显示花哨的验证图标。为此，你需要在 .form-group 元素上添加一个 .has-feedback 类。你还需要添加一个包含 Glyphicon 图标的 span 元素。例如：

<div class="form-group has-success has-feedback">
  <label class="control-label" for="textField">Input with success</label>
  <input type="text" class="form-control" id="textField">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

上述代码将给出以下输出：

将 Bootstrap 表格添加到我们的 Rails 应用程序中

在我们的应用程序 OnlinePacktShopping 中，我们有一个 产品详情 页面。我们将在这个页面上添加 Bootstrap 的表格并进行重新设计。

启动服务器并查看产品页面，它应该看起来像这样：

我们将使用 Bootstrap 重新设计页面，它应该看起来像这样：

产品页面是通过 products 文件夹中存在的 show.html.erb 视图显示的。要到达这个文件夹，导航到 app/views/products/。打开这个页面并删除其中的全部标记。

首先，我们需要将主页的页面标题样式带到这个屏幕上。因此，在文件中放置以下标记：

<div class="page-header">
  <h3></h3>
</div>

在主页上，我们曾经使用 <h3> 标签显示 所有产品。这次我们将用产品的名称来填充它。产品名称是通过 @product 模型使用 name 属性传递到这个视图的。因此，@product.name 应该给我们提供产品的名称：

<div class="page-header">
  <h3><%= @product.name %></h3>
</div>

接下来，我们想在页面标题上放置两个默认操作按钮，编辑和返回。我们必须将这两个按钮并排放置。因此，我们将在这里使用 Bootstrap 的list-inline组件。

<div class="page-header">
  <ul class="list-inline">
    <li><%= link_to 'Edit', edit_product_path(@product), :class=>"btn btn-warning" %></li>
    <li><%= link_to 'Back', products_path, :class=>"btn btn-default" %></li>
  </ul>
  <h3><%= @product.name %></h3>
</div>

如您在前面的截图中所见，我使用了link_to标签来动态创建链接。路径是通过edit_product_path()和products_path方法生成的。我还为按钮添加了.btn, .btn-warning和.btn-default类。这将生成一个如下所示的屏幕：

我使用.btn-warning只是为了得到橙色按钮。这与任何警告标志无关。

让我们使用 Bootstrap 的辅助类.pull-right将那些按钮拉到右侧，添加到<ul>标签中：

现在，我们的按钮已经放置好了。让我们创建一个 Bootstrap 表格来显示产品数据。

<table class="table table-bordered">
</table>

我在这里使用了一个带边框的表格。让我们继续创建行和列：

<table class="table table-bordered">
  <tr>
    <td>Name</td>
    <td><%= @product.name %></td>
  </tr>
  <tr>
    <td>Image</td>
    <td><img class="img-responsive" src=<%=asset_path @product.featImage %>/></td>
  </tr>
  <tr>
    <td>Description</td>
    <td><%= @product.description %></td>
  </tr>
  <tr class="success">
    <td>Price</td>
    <td><%= @product.price %></td>
  </tr>
</table>

如您在前面的代码中所见，我在每一行中显示了@product模型中存在的所有数据。我还使用.success类突出了最后一行。前面的标记将给我们一个如下所示的页面：

这很简单！不是吗？

我们仍然需要在从编辑页面和创建页面传递到产品页面时显示notice对象。由于此消息并不总是可见的，我们将使用条件if语句在此产品页面中显示它。

在表格上方添加以下标记：

<% if notice %>
  <div class="alert alert-info">
    <p id="notice"><%= notice %></p>
  </div>
<% end %>

我在这里使用 Bootstrap 的警报功能，使用alert和.alert-info类。第一个类用于间距和正确对齐文本，第二个类用于提供适当的背景颜色。我们将在接下来的章节中更详细地讨论警报。前面的标记将如下所示：

最后，我们完成了产品显示页面。我们现在将继续设计添加产品和编辑产品视图。

将 Bootstrap 表单添加到我们的 Rails 应用程序中

在这里，我们必须编辑两个模板文件：new.html.erb和edit.html.erb。打开并查看它们。您会发现这两个文件具有完全相同的结构。在edit.html.erb模板中只有一个额外的显示产品按钮。因此，我们只设计一个表单new.html.erb，然后在第二个模板中重用它。

首先，删除new.html.erb中所有内容。就像我们在所有页面中所做的那样，我们将在本页也创建一个page-header。为此，添加以下标记：

<div class="page-header">
  <h3>Add new product</h3>
</div>

让我们继续在前面page-header中添加一个取消按钮：

<div class="page-header">
  <%= link_to 'Cancel', products_path, :class=>"btn btn-default pull-right" %>
  <h3>Add new product</h3>
</div>

由于我们只有一个按钮，所以我们在这里不需要使用 Bootstrap 的list-inline功能，如下面的截图所示：

是时候创建一个用于创建新产品的表单了。我们将使用 Bootstrap 的网格系统创建一个 8 列的 Bootstrap 容器表单。这个标记的格式如下：

<div class="row">
  <div class="col-xs-8 col-xs-offset-2">
  </div>
</div>

我们使用了一个偏移类来使整个容器居中对齐。接下来，我们将添加标签以在先前的容器中渲染表单：

<div class="row">
  <div class="col-xs-8 col-xs-offset-2">
    <%= render 'form' %>
  </div>
</div>

上述代码将从_form.html.erb模板中获取旧的未样式表单。因此，让我们为这个模板中现有的表单添加样式。以下是修改后的标记：

<%= form_for(@product) do |f| %>
  <% if @product.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@product.errors.count, "error") %> prohibited this product from being saved:</h2>
    <ul>
  <% @product.errors.full_messages.each do |message| %>
  <li><%= message %></li>
  <% end %>
  </ul>
  </div>
  <% end %>
  <div class="form-group">
    <%= f.label :name, :for=>"nameField" %><br>
    <%= f.text_field :name, :class=>"form-control", :id=>"nameField" %>
    </div>
  <div class="form-group">
    <%= f.label :featImage, :for=>"imgField" %><br>
    <%= f.text_field :featImage, :class=>"form-control", :id=>"imgField" %>
  </div>
  <div class="form-group">
    <%= f.label :description,:for=>"descField" %><br>
    <%= f.text_area :description, :class=>"form-control", :id=>"descField" %>
  </div>
  <div class="form-group">
    <%= f.label :price, :for=>"priceField" %><br>
    <%= f.text_field :price, :class=>"form-control", :id=>"priceField" %>
  </div>
  <ul class="list-inline">
    <li><%= f.submit 'Create', :class=>"btn btn-success" %></li>
    <li><%= button_tag "Reset", type: :reset, :class=>"btn btn-default" %></li>
  </ul>
<% end %>

如果你仔细观察，你会看到我将所有的标签及其相应的表单元素都包裹在一个.form-group元素中。对于每个标签，我添加了一个for属性，其值为相应表单元素的 ID。对于每个文本字段，我添加了一个类.form-control和一个具有唯一 ID 值的 ID 属性。

最后，我使用了 Bootstrap 的list-inline功能来对齐两个操作按钮：提交和重置。我将btn-success类添加到提交按钮上，将btn-default类添加到重置按钮上。

是时候在浏览器中检查整个添加产品页面了。如果你正确实现了所有内容，你应该会看到一个如下所示的屏幕：

现在，我们将继续编辑edit.html.erb模板文件。我们只需要对new.html.erb文件的标记做一些修改，使其为edit.html.erb做好准备。复制new.html.erb文件的所有内容，并将其粘贴到edit.html.erb文件中。将页面标题中的文本更改为编辑产品。我们需要在这个部分添加一个额外的按钮，即显示产品按钮。因此，该文件中页面标题的最终标记如下：

<div class="page-header">
  <ul class="list-inline pull-right">
    <li><%= link_to 'Show Product', @product, :class=>"btn btn-success" %></li>
    <li><%= link_to 'Cancel', products_path, :class=>"btn btn-default" %></li>
  </ul>
  <h3>Add new product</h3>
</div>

摘要

在本章中，我们学习了如何创建虚拟的 Bootstrap 表单和表格。我们看到了许多不同类型的变体，这些变体可以通过简单地更改或替换 Bootstrap 类来实现。然后我们继续学习各种 Bootstrap 表单验证类。

我们看到了如何使用辅助类来使表单和表格更加引人入胜。最后，我们将 Bootstrap 的表单和表格整合到我们的应用程序OnlinePacktShopping中。我们还利用 Bootstrap 的特性完成了基本应用程序的整体设计。在下一章中，我们将学习 Bootstrap 导航栏。

第六章：创建导航栏

对于初学者网页设计师或没有网页设计经验的网页开发者来说，创建导航栏一直是其中最困难的任务之一。必须注意正确对齐链接、处理溢出、设置链接样式、使整个栏响应式等。

Bootstrap 为你提供了丰富的选择来创建和设计导航栏，而不必深入研究其 CSS。就像在 Bootstrap 中创建任何其他组件一样，创建导航栏也需要我们遵循适当的标记结构。在本篇文章中，我们将学习如何创建 Bootstrap 导航栏，以及如何修改它以满足我们的需求。我们还将查看在网站中表示导航栏的多种其他方式。我们还将把固定导航栏集成到我们当前的应用程序OnlinePacktShopping中。

使用导航栏入门

和往常一样，我们将首先创建一个虚拟项目来学习和创建一个静态导航栏。创建一个名为BootstrapNavigation的文件夹，并在其中创建一个index.html文件。我们将使用 Bootstrap 推荐的 HTML 标记来创建导航栏，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Navigation Bar</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js"></script>
  </body>
</html>

根据前面的代码，在某个时候，你应该在你的浏览器窗口中看到一个Hello World消息。让我们继续并移除这个消息。要创建导航栏，我们需要创建一个带有navbar属性的div类：

<div class="navbar">
</div>

然后，我们需要选择我们想要使用的导航栏颜色。Bootstrap 为你提供了两种不同的颜色变体：默认灰色和反转黑色。它们可以通过使用.navbar-default和.navbar-inverted类分别应用。在我们的应用程序中，我们将使用.navbar-default：

<div class="navbar navbar-default">
</div>

接下来，我们添加了一个容器来包裹导航栏的所有元素并设置适当的溢出。我们将使用.container-fluid来创建一个全宽度的容器而不是固定宽度的一个。这将允许我们在.navbar元素内部使用所有可用空间。代码如下：

<div class="navbar navbar-default">
  <div class="container-fluid">
  </div>
</div>

你可以使用.container类在导航栏内部创建一个固定宽度的容器。导航栏分为两个重要部分：

.navbar-header: 这用于插入网站的标志
.navbar-collapse: 这用于收集导航栏内部的所有链接和其他有用内容

因此，让我们逐步创建每一个。在我们的标记中插入.navbar-header：

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
    </div>
  </div>
</div>

我们现在将使用anchor标签放置网站的名称/品牌。请记住，为index.html添加.navbar-brand类以应用适当的样式。让我们尝试向其中添加更多元素：

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#">OnlinePacktShopping</a>
    </div>
  </div>
</div>

如果你现在查看index.html文件，你应该看到如下内容：

接下来，我们将看到导航栏最重要的元素之一，即折叠图标。当网站在小浏览器中打开时，这个图标是可见的，例如手机。当点击这个图标时，它将负责打开折叠菜单。让我们尝试添加.navbar-collapse元素：

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsibleMenu">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">OnlinePacktShopping</a>
</div>

如前述代码所示，这个按钮应该放置在.navbar-header类内部。它应该有一个.navbar-toggle collapsed类。这里的第一个类用于应用适当的样式并将其拉到导航栏的右侧。第二个类用于跟踪按钮的状态，从折叠到非折叠。你还应该向这个元素添加两个自定义数据属性：data-toggle和data-target。第一个属性用于在 Bootstrap 的 JavaScript 中启动折叠功能，第二个属性用于识别要添加折叠功能的菜单。data-target属性应包含将要折叠在较小浏览器上的菜单的 ID。我们很快就会创建这个菜单。

在这个按钮内部，应该有三个不同的 HTML span 元素。这些元素具有icon-bar类，负责绘制小的水平线。因此，当这三个元素一起放置时，我们得到一个堆叠式的图标。如果你将浏览器窗口调整到更小的尺寸，你会发现这个按钮放置在导航栏的右侧。让我们看看输出结果：

在这里我们已经完成了navbar-header。让我们继续到.navbar-collapse元素。这个元素将包裹所有的导航栏链接、搜索字段、下拉菜单等等。确保你将这个元素添加为.navbar-header的兄弟元素，而不是其内部。让我们将折叠元素添加进去：

<div class="collapse navbar-collapse" id="collapibleMenu">
</div>

这个元素应该包含与.navbar-toggle按钮的data-target属性中使用的相同 ID。当你点击切换按钮时，这个整个部分将会切换。接下来，我们将向我们的导航栏添加一些链接。我们将使用一个带有nav和.navbar-nav类的无序列表。这两个类都是用于样式目的。

<ul class="nav navbar-nav">
</ul>

使用<li>标签和<a>标签插入链接，如下所示：

<ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
  <li><a href="#">Support</a></li>
</ul>

这应该会给你一个带有一些链接的漂亮导航栏，如下面的截图所示：

如果你尝试缩小浏览器窗口并点击切换按钮，你应该会看到一个响应式菜单在起作用，如下面的截图所示：

将.navbar-left和.navbar-right类添加到.navbar-nav列表中，将链接分别对齐到导航栏的左侧和右侧，如下面的截图所示：

如前一章所学，你还可以创建一个 Bootstrap 表单并将其放置在导航栏中。你不需要添加form-inline来水平放置表单元素。Bootstrap 为你提供了一个特殊的导航栏表单类，.navbar-form。正确添加此类将根据导航栏的对齐方式对表单进行样式化。

<form class="navbar-form navbar-left">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

确保将表单添加到.navbar-collapse中，因为它是所有导航栏元素的包装器。这将为你提供一个如下截图所示的导航栏：

到目前为止，导航栏的最终标记如下：

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapibleMenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">OnlinePacktShopping</a>
    </div>
    <div class="collapse navbar-collapse" id="collapibleMenu">
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">Support</a></li>
     </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
        </div>
      <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

导航栏辅助类

对于导航栏元素，有许多辅助类可用。以下是一些例子：

.navbar-btn：当你想在导航栏中放置一个 Bootstrap 按钮时，使用此类来正确对齐它
.navbar-text：如果你想显示一些纯文本，使用此类使其正确可见
.navbar-link：如果你想添加一个链接，但不在.nav元素内，则使用此类
.navbar-fixed-top：如果你将此类添加到导航栏navbar的父元素中，它将在滚动时固定在浏览器窗口的顶部
.navbar-fixed-bottom：此类将导航栏固定在窗口屏幕的底部，并在滚动时保持在那里
.active：将此类添加到任何<li>元素上，将突出显示链接，与其他链接相比

将导航栏添加到 Rails 应用程序中

我们将把前面的导航栏添加到我们的应用程序中。我们将在其中放置我们商店的品牌标识，并添加一些指向我们公司页面的链接。我们还将在这里使用黑色导航栏，并使其固定在浏览器窗口的顶部。

前往App | Views | Layout，打开application.html.erb文件。我们将在这里放置导航栏，因为这将使整个网站全局可见。在这个文件中.container元素上方放置以下标记：

  <div class="navbar navbar-inverted navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapibleMenu">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">OnlinePacktShopping</a>
      </div>
      <div class="collapse navbar-collapse" id="collapibleMenu">
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">Support</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

网站现在应该看起来如下面的截图所示：

如你所见，这里有一些重叠。这是由于navbar-fixed-top类引起的。由于导航栏现在浮在窗口顶部，其余的身体部分也开始从窗口顶部出现。我们需要编写我们自己的小块 CSS 代码来解决这个问题。

我们需要在application.html.erb页面中的.container元素上添加一个额外的自定义类。让我们给它一个.bodyContent类：

<div class="container bodyContent">
  <%= yield %>
</div>

现在，通过导航到App | Assets | Stylesheets文件夹，打开application.css文件。向其中添加以下 CSS 代码：

.bodyContent {
  margin-top: 50px;
}

我们将给.bodyContent元素添加一个50px的边距，以将其向下推，因为导航栏与其重叠。现在页面看起来是正确的，如下面的截图所示：

摘要

在本章中，我们学习了如何创建一个简单的导航栏，以及如何使其响应式。我们还看到了如何通过使用.navbar-inverse类来改变导航栏的外观。最后，我们将这个导航栏集成到了我们的应用程序中。希望你在创建响应式的 Bootstrap 导航栏时玩得开心。

在下一章中，我们将学习更多关于 Bootstrap 组件的内容，例如面包屑、徽章和标签、警告等。我们还将在我们当前的应用程序中使用许多这些组件。

第七章.各种其他 Bootstrap 组件

到目前为止，我们已经使用了一些最受欢迎的 Bootstrap 组件，如表单、按钮、导航栏等。在本章中，我们将探索一些其他 Bootstrap 组件，这些组件可以直接使用。我们可能无法在我们的现有应用程序中使用所有这些组件，但我们将确保不遗漏任何重要的组件。

Bootstrap Breadcrumbs

如果你是一名网站管理员，那么你必须知道谷歌认为面包屑对于网站的适当 SEO 至关重要。面包屑对于显示当前页面相对于整个网站的位置也很重要。让我们假设你正在查看一个网站上的产品页面。那么，产品的位置可能是首页 | 服装 | 牛仔裤 | 紧身牛仔裤。这是一个面包屑的例子。谷歌和其他搜索引擎使用面包屑来正确理解网站的层次结构和子页面的组织。

你可以使用 Bootstrap 轻松地为你的网站创建时尚的面包屑。Bootstrap 使用传统的 HTML 有序列表元素来创建面包屑。以下是一个元素的例子：

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Apparels</a></li>
<li><a href="#">Jeans</a></li>
<li class="active">Bare Jeans</li>
</ol>

上述代码创建的元素如下截图所示：

你也可以使用与前面代码相同的 HTML 无序列表元素，这将产生相同的结果。

分页组件

你可能已经在任何博客类型网站的底部看到过分页。它将显示“上一页”和“下一页”，或者“页码”。分页有助于访客轻松导航并跳过你网站的一些内容。在创建带有大量评论的评论部分时，它也非常有用。

Bootstrap 分页也是使用 HTML 的无序列表元素创建的。这次你必须使用.pagination类：

<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="#" class="active">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

在前面的代码中，«和»用于显示双角符号。这在浏览器中产生以下效果：

此组件还附带许多辅助类，例如：

.disabled：这是为了使分页列表中的项目不可点击
.active：这是为了显示页面的当前位置
.pagination-lg：这是用于较大的分页按钮
.pagination-sm：这是用于较小的分页按钮

Bootstrap 标签和徽章

标签和徽章是 Bootstrap 中的非常基本组件。你可以将它们与任何文本类组件一起使用，以显示突出文本。以下是一个标签和徽章的例子：

<h3>Packt Publishing <span class="label label-default">New Books!</span></h3>

标签使用内联元素创建，例如<span>，它有一个.label类和许多颜色类，例如.label-default用于深灰色。

可用的标签颜色：

.label-primary：这是深蓝色
.label-info：这是浅蓝色
.label-success：这是绿色
.label-warning: 这用于黄色
.label-danger: 这用于红色

与此相反，徽章是具有自折叠特性的标签。这意味着当徽章内没有内容时，它将不会出现在 HTML 页面中。这为你提供了一个使用徽章创建通知图标的选择。它们主要用于显示数字。徽章也没有像标签那样的颜色变体。以下是一个徽章的示例：

Bootstrap 巨幕组件

Jumbotron 是 Bootstrap 中另一个有用的组件。它用于在网页上显示大而引人注目的标题。它特别用于创建着陆页。以下是一个jumbotron类的示例：

<div class="jumbotron">
  <h1>What an amazing life it is!</h1>
  <a href="#" class="btn btn-primary">Read more</a>
</div>

jumbotron类为标题标签和按钮提供了一套不同的样式。你将看到 jumbotron 组件内外文本字体大小的差异。前面的代码在浏览器中产生以下结果：

警报

警报对于与网站用户沟通消息至关重要。它们突出，明亮且与其他页面元素区分开来。你不应该将这些警报与浏览器中的警报窗口混淆。这些警报是设计成类似警报行为的 HTML 元素。

以下代码显示了简单的警报标记：

<div class="alert alert-success">Message sent!</div>

这在浏览器中产生以下结果：

警报有四种不同的颜色变体：

.alert-success: 这个变体用于绿色
.alert-info: 这用于浅蓝色
.alert-warning: 这用于暗橙色
.alert-danger: 这用于红色

前面的警报是不可关闭的。要在警报的右边缘显示一个叉号按钮并添加关闭选项，你需要遵循以下标记：

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" >
    <span> &times; </span> 
  </button>
  Message sent!
</div>

首先，你必须向警报元素添加一个.alert-dismissible类。接下来，你必须添加一个具有.close类的按钮元素。按钮还应有一个名为dismiss的自定义数据属性，其值为alert。这将让 Bootstrap 的 JavaScript 理解当按钮元素被点击时应该隐藏哪个组件。要在警报中显示一个叉号字符，你应该添加×HTML 代码。

要在一段时间后自动从 DOM 中删除一个元素，你可以使用以下 jQuery 代码片段：

setTimeout(function(){
  $('#alert-message').alert('close');
}, 3000);

在前面的代码中，我们使用了警报消息的 ID，在我们的例子中是#alert-message，并使用 Bootstrap 的alert()方法将其从 DOM 中删除。你需要将字符串close传递给alert()方法以删除警报消息。

当在警报内显示超链接时，你应该给锚元素一个.alert-link类。这将应用适当的 CSS 样式。

创建进度条

进度条对于向用户显示动作的进度至关重要。你可以使用 Bootstrap 的标记轻松创建吸引人的进度条。

这里是一个基本进度条的标记：

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

进度条应该被包裹在一个具有 .progress 类的 div 元素内部。这个 div 元素作为进度条的容器。实际的进度是通过一个具有 .progress-bar 类的子 div 元素来显示的。你可以编写 JavaScript 代码来改变这个元素的 CSS 宽度，以查看进度条的过渡效果。

在浏览器中，前面的进度条看起来如下：

要给进度条添加标签，你可以在 .progress-bar 元素内部添加文本。以下代码中的文本作为例子：

<div class="progress">
  <div class="progress-bar" style="width: 60%;">60%</div>
</div>

这会产生动作进度的百分比，如下截图所示：

你可以通过添加以下类来更改 .progress-bar 元素的颜色：

.progress-bar-success: 这用于绿色
.progress-bar-info: 这用于浅蓝色
.progress-bar-danger: 这用于红色
.progress-bar-warning: 这用于黄色

现在是有趣的部分！你可以通过给 .progress-bar 元素添加一个额外的类 .progress-bar-striped 来给进度条添加条纹。

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 60%;">60%</div>
</div>

这在浏览器中产生以下结果：

等等！还有更多。添加 .active 类，以及 .progress-bar-striped，你会看到一个有趣的动画效果。

面板

Bootstrap 面板是用于放置 HTML 组件的类似框的组件。你可能想要显示一个带有圆角和周围浅色边框的框。在这种情况下，你应该使用这个组件。

这里是一个示例面板：

<div class="panel panel-default">
  <div class="panel-body">
    I am inside a box!
  </div>
</div>

这在浏览器中产生以下结果：

当你给面板组件添加一个头部和底部时，它变得更加有趣。是的，你没看错。面板自带自定义设计的头部和底部，可以创建类似小工具的元素。如果你仔细观察，你会发现文本位于一个 .panel-body 元素内部。现在我们将为以下面板添加头部和底部：

<div class="panel panel-default">
  <div class="panel-heading">
    Widget 1
  </div>
  <div class="panel-body">
    I am inside a box!
  </div>
  <div class="panel-footer">
    by Syed Fazle Rahman
  </div>
</div>

这在浏览器中产生以下结果：

面板也有不同的颜色：

.panel-success: 这用于绿色
.panel-primary: 这用于深蓝色
.panel-info: 这用于浅蓝色
.panel-warning: 这用于黄色
.panel-danger : 这用于红色

以下截图显示了一个绿色面板：

摘要

通过本章，我们学习了如何使用 Bootstrap 的一些有趣且实用的组件。这些组件通常用于为应用程序的用户提供更好的用户体验。我们看到了如何使用面包屑、分页、标签和徽章以及巨幕。我们了解了警报是什么以及何时使用它们。然后我们继续创建了一个漂亮的进度条和面板小部件。

在下一章中，我们将根据需要将这些组件集成到我们现有的应用程序中。

第八章。使用 Bootstrap 模态框

每个开发者都在处理 Web 开发时使用过警告/提示窗口。它们通常用于显示重要消息、从用户那里获取信息、显示警告消息以及许多不同的目的。这些传统对话框的问题在于它们已经过时了，我们的访客可能不喜欢它们。从更好的用户体验角度来看，不再推荐使用对话框窗口。

为了解决这个问题，Web 开发者发现了一种更好的方法来替换弹出窗口。他们使用了同一网页内的一个隐藏 HTML 元素。每当需要时，这个隐藏元素会通过一些 JavaScript 代码和 CSS 样式来显示。Bootstrap 的模态框正是如此。它是一个具有最小所需功能的灵活对话框。它具有自己的 Bootstrap 样式和动画。

在本章中，我们将学习如何创建 Bootstrap 模态框及其各种类型和功能。我们还将在我们的 Rails 应用程序中集成模态框组件。

开始使用模态框

首先，我们将创建一个静态应用程序来创建和测试各种类型的 Bootstrap 模态框。一旦我们完成了模态框的基础知识，我们将将其集成到现有的Online Shopping Rails应用程序中。

在您的系统中创建一个名为Bootstrap Modals的新文件夹。现在，创建一个名为index.html的新文件，并将以下起始模板粘贴到其中：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Modals</title>
    <!-- Bootstrap -->
    <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js"></script>
  </body>
</html>

让我们从先前的模板中删除Hello World标签，并插入创建模态框所需的标记。要创建模态框，我们需要定义一个具有.modal类的<div>元素：

<div class="modal">
</div>

可选地，您还可以添加.fade类以将.fade-in动画应用于模态框：

<div class="modal fade">
</div>

.modal类为模态组件创建了一个包装器。它通过将 CSS overflow属性设置为hidden来隐藏 HTML 网页的滚动属性。它还在同一页面上所有 HTML 元素之上创建了一个具有fixed定位的 HTML 区域。

接下来，我们将添加用于在模态框内放置内容的标记。步骤如下：

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

类.modal-dialog和.modal-content共同负责在模态组件中正确居中一个白色内容区域。

让我们继续创建模态框的主体区域，以便在模态框内放置 HTML 内容：

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
    </div>
  </div>
</div>

您可以根据需要在此.modal-body div 中放置任何 HTML 元素。您可以使用它来显示长条款和条件文本、登录表单、警告文本等。

我们已经准备好了我们的第一个基本模态框。如果您在浏览器中加载这个 HTML 页面，您会发现一个空白页面。这是因为我们创建了一个模态框，但没有创建任何将触发此模态框的元素。模态框是 Bootstrap 中的隐藏组件。

让我们创建一个 Bootstrap 按钮，当点击时触发前面的模态框：

<button class="btn btn-primary" data-toggle="modal" data-target="#myFirstModal">
  Show Modal
</button>

此按钮应该有两个非常重要的自定义属性来触发模态框：data-toggle 和 data-target。第一个属性告诉 Bootstrap 的 JavaScript 它关注的是哪个组件，而第二个属性指定要打开哪个特定的模态框。第二个属性持有你想要打开的模态框的 ID。让我们也将此 ID 应用到我们前面的模态框上。因此，我们模态框的最终标记应如下所示：

<div class="modal fade" id="myFirstModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
    </div>
  </div>
</div>

你应该得到一个如下截图所示的模态框：

模态框组件除了 .modal-body 区域外，还有一个头部和底部区域。它们是通过 .modal-header 和 .modal-footer 类创建的。我们可以通过添加代码来应用头部和底部，如下所示：

<div class="modal fade" id="myFirstModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">This is a modal</h4>
      </div>
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
      <div class="modal-footer">
        <p>This is the footer.</p>
      </div>
    </div>
  </div>
</div>

建议你在 .modal-header 内使用带有 .modal-title 类的 <h4> 标签。模态框底部的所有默认元素都将根据 Bootstrap 的 CSS 居中对齐。你可以通过覆盖其 CSS 属性来修改它：

 .modal-footer{

text-align: left;
}

带有头部和底部的上述模态框应如下所示：

改变 Bootstrap 的模态框大小

Bootstrap 的模态框也有各种大小：大、正常和小。你需要使用以下类来更改模态框的大小：

.modal-lg: 这用于较大的模态框
没有类：这用于正常大小的模态框
.modal-sm: 这用于较小的模态框

你必须将上述类添加到模态框标记中的 .modal-dialog 元素。以下代码作为示例：

<div class="modal fade" id="myFirstModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">This is a modal</h4>
      </div>
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
      <div class="modal-footer">
        <p>This is the footer.</p>
      </div>
    </div>
  </div>
</div>

上述标记将创建一个较大的模态框，如下面的截图所示：

其他 Bootstrap 模态框功能

Bootstrap 为模态框组件提供了许多功能。这些功能通常在触发模态框组件时作为 JSON 属性提供，或者你可以通过在 .modal 元素中使用自定义 data-* 属性来使用这些功能。Bootstrap 的附加功能包括：

data-backdrop: 这个属性接受 static 或 true 值。当设置为 static 时，它禁用了点击模态框外部关闭模态框的功能。
data-keyboard: 这个属性接受布尔值，默认设置为 true。当设置为 true 时，data-keyboard 的功能会在按下 Esc 键时关闭模态框。
data-show: 这个属性接受布尔值，默认设置为 false。当设置为 true 时，data-show 在初始化时显示模态框。

从 Bootstrap 模态框获取远程内容

在这里，data-remote 是 Bootstrap 模态框组件中的一个特殊数据属性。当数据被触发时，它用于在模态框内加载远程网页。这个功能仅从 Bootstrap v 3.0 到 v 3.2.0 可用；我相信这真的非常实用！

让我们看看如何使用它的一个示例。

让我们在同一个 Bootstrap Model 项目文件夹内创建一个名为 page2.html 的新 HTML 页面。将以下基本 HTML 放入其中：

<!DOCTYPE html>
<html>
  <head>
    <title>Page 2</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello World from Page 2</h1>
    </div>
  </body>
</html>

在浏览器中，这个页面应该看起来如下：

现在，每当它被触发时，我们将在这个之前的模态中加载这个页面。修改之前创建的模态标记，如下所示：

<div class="modal fade" id="myFirstModal" data-remote="page2.html">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">This is a modal</h4>
      </div>
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
      <div class="modal-footer">
        <p>This is the footer.</p>
      </div>
    </div>
  </div>
</div>

注意这次我们添加了一个额外的属性 data-remote，并将其值设置为 page2.html 的路径。让我们刷新浏览器并触发模态。这次，你应该会在模态中看到加载的 page2.html 内容，而不是默认内容。截图如下：

注意

在使用跨域链接作为远程内容时，你应该非常小心。许多浏览器可能不允许这样做。

使用 Bootstrap 的模态在 Rails 应用中

在我们之前章节中创建的 Demo Shopping 应用程序中，我们将在每个产品的显示按钮旁边添加一个额外的按钮，命名为购买。当用户点击购买按钮时，浏览器将显示一个模态，确认他们要将特定产品添加到购物车中的操作。这个模态将有一个 添加到购物车 按钮，它将模拟正在添加到购物车中的产品的行为，然后关闭模态。在这本书中，我们不会创建真正的购物车。这取决于你决定使用哪种方法来创建购物车。

通过导航到 app | views | layouts 打开 layouts 文件夹中的 application.html.erb 文件。我们将在该文件中创建一个全局模态。当点击购买按钮时，这个模态将被触发。这个模态的标记如下：

<div class="modal fade" id="buyModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Are you sure you want to buy this?</p>
        <button class="btn btn-success">
          <i class="glyphicon glyphicon-plus"></i> Add to cart
        </button>
      </div>
    </div>
  </div>
</div>

确保将这个模态标记放置在之前创建的整个标记之外。Bootstrap 建议你始终将模态的标记放置在最顶层。

现在，我们已经放置了一个虚拟模态。让我们继续创建一个购买按钮。

通过导航到 app | views | products 打开 products 文件夹中的 index.html.erb 文件。搜索之前创建的显示按钮，其代码如下：

<%= link_to 'Show', product, :class=>"btn btn-primary" %>

我们将放置另一个没有 href 属性的按钮，并添加自定义数据属性来触发模态：

<%= link_to 'Buy', '#', :class=>"btn btn-success" %>

这将在每个显示按钮旁边创建一个新的购买按钮。

让我们添加自定义数据属性来触发模态组件。修改购买按钮，如下所示：

<%= link_to 'Buy', '#', :class=>"btn btn-success", :data=> { :toggle =>'modal', :target=>'#buyModal' } %>

在这里，data-target 属性将保留 #buyModal 的值，这也是我们模态的 ID。

现在，如果你点击购买按钮，它将显示模态，如下面的截图所示：

让我们添加一个功能，当我们在“加入购物车”按钮上点击时，将关闭模态框。为此，我们需要再次编辑application.html.erb文件。我们必须给“加入购物车”按钮添加一个额外的数据属性data-dismiss，其值为modal。让我们添加这个数据属性：

<button class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-plus"></i> Add to cart</button>

添加前面的数据属性将让 Bootstrap 的 JavaScript 知道要关闭哪个组件。

摘要

我希望你喜欢学习如何创建一个灵活的 Bootstrap 模态组件。通过本章，我们学习了如何在静态项目中创建一个基本的模态框。然后我们继续为其添加额外的功能。我们还看到了如何通过使用额外的类如.modal-lg和.modal-sm来创建不同大小的模态框。最后，我们将模态组件集成到我们的购物应用中。我们学习了如何通过模拟确认模态来模拟“加入购物车”的功能。现在，这个领域对你来说已经开放，你可以更多地实验模态框。

在下一章中，我们将了解 Bootstrap 中最有趣的一个组件，轮播图。我们将看到如何使用轮播图组件创建美丽的图片幻灯片。

第九章：使用 Bootstrap Carousel 创建图像幻灯片

术语Carousel灵感来源于现实世界中的旋转木马，这种旋转木马在许多娱乐公园中都可以找到。它反复旋转人们站立或就坐的圆形结构。基于网络的旋转木马行为类似。它是一组图像及其相应文本数据的幻灯片。

旋转木马是 Web 组件中最重要的一部分。它们对于购物网站以时尚的方式展示许多产品非常有用。许多博客网站也利用了这个组件。

如果您是一位新手网页设计师，那么为您的网站创建旋转木马可能有点复杂。另一方面，Bootstrap 3 提供了一个名为 carousel 的 JavaScript 插件，它已准备好使用。

您需要编写许多行 JavaScript 和 CSS 代码，才能使用 Bootstrap 创建一个漂亮的图像幻灯片。就像 Bootstrap 的先前组件一样，您必须放置正确的标记。

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

Bootstrap Carousel 入门
为幻灯片添加字幕
定制旋转木马

Bootstrap Carousel 入门

让我们从 Bootstrap Carousel 组件开始，创建一个基本的图像幻灯片。一如既往，我们将为此创建一个静态 HTML 页面，以了解其用法。步骤如下：

在您的系统中任何您喜欢的地方创建一个名为Bootstrap Carousel的新文件夹。我们将为index.html文件使用相同的静态标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Carousel</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="img/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="img/bootstrap.min.js"></script>
  </body>
</html>

让我们从上一个文件中删除Hello World标记，并开始构建我们的第一个旋转木马组件。
Bootstrap Carousel 分为三个主要部分：指示器、内部包装器和控件。每个部分都有其重要性。要创建 Bootstrap Carousel，我们需要创建一个具有.carousel类的div元素：
```
<div class="carousel">
</div>
```
Bootstrap 允许您创建带有或不带有滑动动画的幻灯片。如果您想要滑动项目有一个漂亮的滑动效果，请添加一个具有.carousel类的.slide类：
```
<div class="carousel slide">
</div>
```
可以添加一个可选的data-ride属性到前面的div元素中。它用于标记旋转木马为动画，在页面加载时开始。让我们设置这个属性：
```
<div class="carousel slide" data-ride="carousel">
</div>
```
我们还将为此div元素添加一个 ID 属性。此属性将在定义旋转木马子元素时多次使用：
```
<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
</div>
```
现在，我们将继续创建旋转木马组件的Inner-Wrapper。这个包装器将包含旋转木马的所有滑动项目：
```
<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <div class="carousel-inner">
  </div>
</div>
```

我们将开始将滑动元素插入到这个Inner-Wrapper中。每个滑动项目都应该附加一个.item类：

<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <div class="carousel-inner">
    <div class="item">
    </div>
  </div>
</div>

您可以向旋转组件中添加的项目数量没有限制。让我们继续并在这个项目中填充一个图像来代表该项目：

<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <div class="carousel-inner">
    <div class="item">
      <img src="img/image1.jpg" alt="Slide 1">
    </div>
    <div class="item">
      <img src="img/image2.jpg" alt="Slide 2">
    </div>
    <div class="item">
      <img src="img/image3.jpg" alt="Slide 3">
    </div>
    <div class="item">
      <img src="img/image4.jpg" alt="Slide 4">
    </div>
  </div>
</div>

现在，我们有四个滑动项目，每个都填充了独特的图像。是时候告诉 Bootstrap 哪个项目应该作为幻灯片的第一个项目了。

这可以通过向任何 .item 元素添加一个 .active 类来实现。在我们的例子中，我们将向第一个 .item 元素添加 .active 类：

<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/image1.jpg" alt="Slide 1">
    </div>
    <div class="item">
      <img src="img/image2.jpg" alt="Slide 2">
    </div>
  </div>
</div>

我们现在已经完成了一个包含四个滑动项目的轮播图的基本版本。让我们在浏览器中查看它：
我们从这个幻灯片放映中缺少两个重要元素：指示器和控件。指示器非常有用，可以直接跳转到特定的幻灯片。控件让我们可以逐个方向导航幻灯片。

让我们继续添加它们。指示器是通过带有 .carousel-indicators 类的有序列表创建的：
```
<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <!-- Indicators →
  <ol class="carousel-indicators">
  </ol>
  <div class="carousel-inner">
  </div>
</div>
```
指示器中的每个 <li> 项目是轮播图中特定幻灯片的处理程序。它们应该有两个不同的数据属性：data-target 和 data-slide-to。data-target 属性用于指示网页中我们正在讨论哪个轮播图。它应包含轮播图元素的 ID，即 #my-first-carousel。data-slide-to 用于指示内容/图像展示的幻灯片编号。例如，如果您有四个幻灯片，幻灯片编号从 0 到 3：
```
<div class="carousel slide" data-ride="carousel" id="my-first-carousel">
  <!-- Indicators →
  <ol class="carousel-indicators">
    <li data-target="#my-first-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#my-first-carousel" data-slide-to="1"></li>
    <li data-target="#my-first-carousel" data-slide-to="2"></li>
    <li data-target="#my-first-carousel" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
  </div>
</div>
```
如果您在浏览器中检查页面，您可以看到指示器出现在轮播图的底部：

让我们向轮播图添加 controls。控件是一对具有一组属性的 HTML 锚点元素 <a>，如下所示：
```
<a class="left carousel-control" href="#my-first-carousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-first-carousel"   data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>
```
每个锚点元素都有一个 .carousel-control 类。此外，您必须分别向 .carousel-control 元素的每个元素添加方向类 .left 和 .right。这些方向类帮助它们在轮播图中占据相应的位置。每个锚点元素的 href 属性必须指向父轮播图元素，使用 ID。我们还有一个 data-slide 属性，它告诉 Bootstrap 从当前幻灯片导航到哪个幻灯片。

最后，完整的轮播图的标记如下所示：

<div id="my-first-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#my-first-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#my-first-carousel" data-slide-to="1"></li>
    <li data-target="#my-first-carousel" data-slide-to="2"></li>
    <li data-target="#my-first-carousel" data-slide-to="3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/book1.jpg" alt="Book 1">
    </div>
    <div class="item">
      <img src="img/book2.jpg" alt="Book 2">
    </div>
    <div class="item">
      <img src="img/book3.jpg" alt="Book 3">
    </div>
    <div class="item">
      <img src="img/book4.jpg" alt="Book 4">
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#my-first-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#my-first-carousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

您还可以在以下屏幕截图中看到控件出现在轮播图中。要使用键盘控制幻灯片放映，您需要向 .carousel 元素添加 data-keyboard 属性，并将其值设置为 true：

为幻灯片添加标题

可以通过插入一个带有 .carousel-caption 类的 div 元素轻松地为每个幻灯片项目添加标题。此元素将包含两个不同的元素：一个 heading 元素和一个 paragraph 元素。您可以选择使用其中一个或两个。以下代码作为示例：

<div class="item">
  <img src="img/book1.jpg" alt="Book 1">
    <div class="carousel-caption">
    <h3>This is the first slideshow</h3>
    <p>Lorem ipsum donor.</p>
  </div>
</div>

自定义轮播图

您还可以向 .carousel 添加各种不同的 data-* 属性来更改其默认行为。Bootstrap 提供了三个不同的属性：

data-interval: 此属性用于更改每张幻灯片的持续时间。它接受以毫秒为单位的整数值。例如，data-interval="5000"。

data-pause: 此属性仅接受一个值，即 hover。当此属性被设置时，当鼠标悬停在其上时，幻灯片会暂停。

data-wrap: 此属性接受布尔值。当设置为 true 时，幻灯片将自动从第一张幻灯片重新开始。

摘要

在本章中，我们看到了如何创建一个基本的轮播图。我们向其中添加了各种元素，如指示器、控件和标题。我们还看到了 Bootstrap 中可用的各种自定义选项。

在下一章中，我们将实现我们在 Bootstrap 中所学的所有内容。

第十章：使用 Bootstrap 模态框创建购物车

本章主要讲解如何将我们迄今为止在 Bootstrap 中学到的知识付诸实践。在这里，我们不会学习任何新的内容，但这一章将肯定有助于澄清一些核心概念，例如使用 Bootstrap 模态框、排版、按钮和响应式表格。

在本章中，我们将创建一个 JavaScript 模态框，它将作为我们的购物应用程序中的购物车使用。这个购物车将具备任何购物网站所需的所有功能。为了演示目的，我们将在购物车中只显示静态数据。

简而言之，我们将涵盖以下主题：

添加购物车符号
使用模态框创建购物车

添加购物车符号

在创建我们的应用程序中的购物车之前，我们需要一个处理程序，当点击时，将显示购物车。对于我们的应用程序，我将在当前导航栏中添加一个 Glyphicon 字体图标来显示一个图标。所以，让我们继续并做出这个调整。

导航到 app | views | layouts 并编辑 application.html.erb 文件。在 Home 的 <li> 元素之前，添加另一个带有 Glyphicon 购物车图标的 <li> 元素，如下所示：

<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>

小贴士

记住，Glyphicons 是 Bootstrap 默认在其仓库中提供的字体图像。

打开浏览器并检查导航栏中的购物车符号。它应该看起来像以下截图所示：

我们将在购物车图标旁边添加一个数字，以指示添加到购物车中的产品数量。我们将使用 Bootstrap 的徽章来实现这一点。添加一个具有 .badge 类的 <span> 元素将创建一个漂亮的数字指示器：

<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge">4</span></a></li>

你应该在导航栏中有一个数字指示器，如下面的截图所示：

让我们再添加一些自定义数据属性，以触发这个购物车链接中的模态框。如前一章所述，我们需要两个自定义属性来创建模态框处理程序：data-target 和 data-toggle。所以，让我们将这些属性添加到我们的购物车链接中：

<li><a href="#" data-target="#shoppingCart" data-toggle="modal"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge">4</span></a></li>

在这里，提供给 data-target 的值是 #shoppingCart。因此，我们将使用 shoppingCart 作为下一节中我们将创建的模态框的 ID。

现在，我们已经准备好了一个购物车图标，当点击时将触发购物车模态框。这个图标也代表了购物车内部物品的数量。令人印象深刻！不是吗？

使用模态框创建购物车

如本书前面所述，要创建一个 Bootstrap 模态框，我们需要一个具有 .modal 类的 <div> 元素。我们还将添加 .fade 类以应用淡入淡出过渡效果。这是 Bootstrap 提供的唯一过渡动画。

在 application.html.erb 文件的末尾，添加模态框的标记，如下所示：
```
<div class="modal fade">
</div>
```
在这里需要注意的最重要的事情之一是，我们在这个页面上有两个模态框。为了唯一标识它们中的每一个，我们应该给它们不同的 ID。在这种情况下，我们已经有了一个 ID，即shoppingCart。所以，让我们将其添加到我们的标记中：
```
<div class="modal fade" id="shoppingCart">
</div>
```
接下来，我们需要放置一个模态对话框和模态内容的标记：
```
<div class="modal fade" id="shoppingCart">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    </div>
  </div>
</div>
```
与前面章节中创建的模态框相比，我们在这里使用了一个更大的模态框，这是通过.modal-lg类实现的。

现在，我们将为我们的模态框添加一个标题。这个标题将包含您的购物车的标题，以及另一个指示购物车中物品数量的文本：

<div class="modal-header">
<p class="pull-right text-primary"><b>4 items</b></p>
<h4 class="modal-title text-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Your Cart </h4>
</div>

将前面的内容放置在.modal-content元素内。使用.pull-right类将<p>元素浮动到右边，并使用.text-primary实用类将其染成深蓝色。它用于表示购物车中物品的数量。您的购物车标题使用带有.modal-title和.text-primary类的<h4>元素编写（以给文本添加蓝色），我们还在标题中包含了一个购物车的图标，该图标是使用 Glyphicon 图标创建的。如果您通过点击购物车图标触发此模态，您将看到如下内容：

让我们开始创建模态框的主体部分。按照以下步骤创建模态框的主体：

将.modal-header;添加到以下标记中，作为其兄弟元素。
```
<div class="modal-body">
</div>
```

我们将插入一个 Bootstrap 表格，该表格将包含实际的项目详情：

<div class="modal-body">:
  <table class="table table-bordered">
  </table>
</div>

让我们在表格内创建多个列：

<div class="modal-body">
  <table class="table table-bordered">
    <tr>
      <th>Sl no</th>
      <th>Item Name</th>
      <th>Unit Price (USD)</th>
      <th>Quantity</th>
      <th>Price</th>
      <th></th>
    </tr>
  </table>
</div>

我们有序列号、项目名称、单价、订购数量和项目价格的列。我们还有一个没有标题的额外列，其中将包含一个链接，用于从表中删除特定的项目行。

让我们填写第一行：

<div class="modal-body">
  <table class="table table-bordered">
    <tr>
      <th>Sl no</th>
      <th>Item Name</th>
      <th>Unit Price (USD)</th>
      <th>Quantity</th>
      <th>Price</th>
      <th></th>
    </tr>
    <tr>
      <td>1</td>
      <td>Apple iPhone 6</td>
      <td>$399</td>
      <td>
      <input type="text" class="form-control" value="1" placeholder="Enter Quantity" style="width: 50px;" />
      </td>
      <td>$399</td>
      <td><a href="#" class="btn btn-danger btn-sm">remove</a></td>
    </tr>
  </table>
</div>

对于数量字段，我使用了一个带有.form-control类的输入字段，以给它一个 Bootstrap 的外观和感觉。我还给它应用了一个 CSS 宽度为50px。在最后一列中，我添加了一个名为删除的文本链接，带有.btn、.btn-danger和.btn-sm类。.btn-danger类使按钮变红，而.btn-sm类用于减小正常 Bootstrap 按钮的大小。尝试在表格中填写更多项目。最后，您将得到一个如下截图所示的模态框：
现在，我们只剩下最后一行，将显示物品的总计。让我们继续并添加它：
```
<tr class="active lead">
  <td colspan="4">Total</td>
    <td>$1,096</td>
    <td><a href="#" class="btn btn-danger btn-sm">clear all</a>
  </td>
</tr>
```
我没有添加所有列，而是通过在这里使用 colspan 属性合并了前四列。在最后一列，我将按钮的文本更改为清除所有。这里最重要的变化之一是添加到行的 .active 和 .lead 类。.active 类使用灰色背景突出显示行，而 .lead 类增加了文本的字体大小。现在模态框应该看起来像以下这样：
现在我们将在模态框的末尾添加两个不同的按钮：继续购物和结账：
```
<a href="#" class="btn btn-success pull-right">Checkout <span class="glyphicon glyphicon-chevron-right">
  </span>
</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Continue Shopping
</a>
```
第一个按钮是通过使用 .pull-right 工具类向右拉动的。继续购物按钮使用 data-dismiss 属性来关闭模态框，并允许用户继续使用网站。
最后，我们的购物车设计完成了。现在它应该看起来像下面截图所示：

摘要

希望你喜欢阅读这一章。通过这一章，我们尝试使用 Bootstrap 和其组件设计一个模拟购物车。我们看到了如何在 Bootstrap 模态框中使用 Bootstrap 表格，以及如何利用 Bootstrap 的工具类。我们还看到了如何使用免费字体图标，Glyphicons，在导航栏中创建购物车图标。

在下一章，我们将学习一个非常重要的主题，自定义 Bootstrap。做好准备，很快我会和你一起学习。

附录 A. 向 Rails 应用程序添加自定义样式

最后，我们到达了这本书的最后一章，我们将讨论如何向由 Bootstrap 框架支持的 Rails 应用程序添加自定义样式。在整个书中，我们探讨了各种 Bootstrap CSS 和 JavaScript 组件，它们可以直接使用。

在这一章中，我们将看到如何扩展 Bootstrap 框架并添加我们自己的样式。Bootstrap 框架中仍然缺少许多重要组件。我们将检查一些免费提供的流行 Bootstrap 插件。

我们将要涵盖的主题包括：

将 Bootstrap-sass 添加到 Rails 应用程序
通过变量自定义 Bootstrap

将 Bootstrap-sass 添加到 Rails 应用程序

在第二章的在 Rails 项目中安装 Bootstrap部分中，介绍 Bootstrap 3，我们看到了如何通过三种不同的方式将 Bootstrap 包含到我们的 Rails 应用程序中：

CDN 方法
Bootstrap-sass gem
通过下载 Bootstrap 文件

为了加快速度，我们选择了 CDN 方法。嗯，在这一章中，我们将通过 Bootstrap-sass gem 使用 Bootstrap。这将使我们能够完全自定义 Bootstrap 的默认样式。所以，让我们继续，并在我们的应用程序中安装Bootstrap-sass gem：

前往application文件夹，并使用文本编辑器编辑Gemfile文件。将以下两行代码添加到文件末尾：
```
gem 'bootstrap-sass', '~> 3.3.1'
gem 'autoprefixer-rails'
```
上述两行将安装bootstrap-sass和autoprefixer-rails gems到您的应用程序中。autoprefixer-rails是自动在 CSS stylesheets中添加浏览器供应商前缀所必需的。
让我们捆绑应用程序，以便上述 gem 实际上被下载并安装到我们的应用程序中。
```
bundle install
```
一旦上述命令执行完成，导航到app | assets | stylesheets文件夹。将application.css文件重命名为application.css.scss文件。接下来，从文件中移除我们之前包含的 CDN 链接。
现在，我们需要在application.css.scss文件中包含通过 gem 下载的 Bootstrap 文件。为此，包含以下 2 行：
```
@import "bootstrap-sprockets";
@import "bootstrap";
```
bootstrap-sprockets值是正确链接字体文件与 Bootstrap 的 CSS 文件所必需的。

是时候使用最近安装的 gem 链接 Bootstrap 的 JavaScript 文件了：

首先，我们需要从application.html.erb文件中移除硬编码的 Bootstrap 的 JavaScript CDN 链接，该文件位于layouts文件夹中，通过导航到app | views | layouts文件夹。从该文件中移除以下行：
```
<script src="img/bootstrap.min.js"></script>
```
接下来，通过导航到app | assets | javascript文件夹，前往 JavaScript 文件夹并编辑application.js文件。在 jQuery 行后立即添加以下行：
```
//= require bootstrap-sprockets
```
最后，我们完成了。如果您在浏览器中重新打开应用程序，您会看到一切正常，就像之前一样。

通过变量定制 Bootstrap

大多数可见的 Bootstrap 样式都可以通过使用预定义的 Bootstrap 变量简单地覆盖。在继续之前，你应该了解 Bootstrap 最初只与 LESS 兼容。他们后来将其移植到了 Sass 版本。

注意

LESS 和 Sass 是帮助我们组织和编写可扩展 CSS 样式的 CSS 预处理器。在语法上，它们非常相似，只是在附加功能上有所不同，一个有而另一个没有。

因此，LESS 版本中存在的所有变量在 Sass 版本中也保持不变。虽然 Bootstrap 没有提供专门列出 Sass 中变量列表的页面，但你可以在他们的官方网站上找到 LESS 版本中变量的列表（getbootstrap.com/customize/#less-variables）。让我们继续并更改一些默认的 Bootstrap 样式。

在我们的应用中，我们在多个地方使用了 .btn-success。因此，让我们更改其中的一些 CSS 样式。重新打开 application.css.scss 文件，在 Bootstrap 的导入行之前添加以下行：

$btn-success-color: #333;
$btn-success-bg: #AEDBAE;
$btn-success-border: darken($btn-success-bg, 5%);

我们可以通过 $btn-success-color、$btn-success-bg 和 $btn-success-border 这些 Bootstrap Sass 变量完全更改 .btn-success 类的样式。在上面的代码中，我已经将按钮的文本颜色更改为 #333。我还将背景颜色变亮为新的十六进制颜色，并最终使用 Sass 中的深色颜色函数更改了边框颜色。

你可以通过查看所有可用的变量并根据需要进行定制。你还可以通过在 application.css.scss 文件中添加以下行来包含可用的 Bootstrap 主题：

@import "bootstrap/theme";

bootstrap/theme 是从 Bootstrap 主题定制而来的官方 Bootstrap 默认样式。它包含了一些酷炫的样式，你应该尝试使用它。

摘要

Bootstrap 定制化可以帮助你创建外观不同的网站。如果你是 Rails 应用开发团队中的设计师，这是你必须掌握的领域。在本章中，我们看到了如何在 Rails 应用中包含 Bootstrap-sass 钩子。我们还了解了通过预定义变量覆盖默认 Bootstrap 样式的步骤。希望这对你有所帮助。

最后，如果你在使用 Bootstrap 的 Rails 应用中还有相关问题，请给我发条推文 @fazlerocks，我会很乐意帮助你！

posted @ 2025-10-24 09:55 绝不原创的飞龙阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

Rails-的-Bootstrap-指南-全-

Rails 的 Bootstrap 指南（全）

前言

本书涵盖的内容

你需要这本书的内容

这本书适合谁阅读

惯例

注意

小贴士

读者反馈

客户支持

下载示例代码

勘误

盗版

问题

第一章. 介绍 Rails 中的 Web 应用程序开发

为什么选择 Bootstrap 与 Rails 结合使用？

注意

在 Rails 中设置待办事项应用

注意

分析 Rails 应用程序的文件夹结构

创建视图

使用 CSS 样式视图

重新设计 Todo 应用程序

小贴士

传统上在 Rails 应用程序中样式的挑战

摘要

第二章：介绍 Bootstrap 3

什么是 Bootstrap？

在 Rails 项目中安装 Bootstrap

在 Rails 项目中放置 Bootstrap 文件

Bootstrap – Sass 方式

通过 CDN 使用 Bootstrap

摘要

第三章. 使用 Bootstrap 的网格系统为 Rails 应用供电

Bootstrap 的网格系统是什么？

嵌套列

在 Rails 应用程序中实现 Bootstrap 的网格系统

摘要

第四章：在 Rails 应用程序中使用 Bootstrap 的排版、按钮和图片

设置

设置样式

对齐文本

文本转换

引用块

样式化列表元素

创建和样式化按钮

哪些元素可以使用 Bootstrap 的按钮类？

Bootstrap 中的图像样式

摘要

第五章 在 Bootstrap 中重新设计表格和表单

创建 Bootstrap 表格

创建 Bootstrap 表单

Bootstrap 表单中的验证类

将 Bootstrap 表格添加到我们的 Rails 应用程序中

将 Bootstrap 表单添加到我们的 Rails 应用程序中

摘要

第六章：创建导航栏

使用导航栏入门

导航栏辅助类

将导航栏添加到 Rails 应用程序中

摘要

第七章.各种其他 Bootstrap 组件

Bootstrap Breadcrumbs

分页组件

Bootstrap 标签和徽章

Bootstrap 巨幕组件

警报

创建进度条

面板

摘要

第八章。使用 Bootstrap 模态框

开始使用模态框

改变 Bootstrap 的模态框大小

其他 Bootstrap 模态框功能

从 Bootstrap 模态框获取远程内容

注意

使用 Bootstrap 的模态在 Rails 应用中

第五章在 Bootstrap 中重新设计表格和表单