Bootstrap-大全-全-

Bootstrap 大全（全）

原文：zh.annas-archive.org/md5/080abb4ca1aa98c9713459825cb932bb

译者：飞龙

协议：CC BY-NC-SA 4.0

第一章. 设置我们的第一个博客项目

Bootstrap 是现代网络开发世界中最受欢迎的 HTML、CSS 和 JavaScript 框架。无论你是网络开发的新手还是经验丰富的专业人士，Bootstrap 都是构建任何类型网络应用的强大工具。随着版本 4 的发布，Bootstrap 比以往任何时候都更加相关，并带来了一套易于学习和使用的完整组件。在本课中，我将向你展示如何使用所有必要的文件设置我们的第一个博客项目。

实现框架文件

在我们开始构建 Bootstrap 项目的基本模板之前，我们应该回顾我们需要包含的文件，以确保框架能够正常运行。为此的最小要求：一个 CSS 文件和两个 JavaScript 文件。这些文件可以从 Bootstrap 内容分发网络（CDN）提供，或者下载并直接包含在我们的项目中。当使用 CDN 时，只需在文件头部包含以下代码行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

注意

CDNs 有助于在多个服务器之间分配带宽，并允许用户从更近的源下载静态内容。

Bootstrap 可以从www.bootstrapcdn.com/加载。BootstrapCDN 由 MaxCDN 提供支持，可在www.maxcdn.com/找到。

插入 JavaScript 文件

如我之前提到的，我们需要包含两个 JavaScript 文件以正确实现框架。这些文件是jQuery和Bootstrap JavaScript框架文件。与 CSS 文件一样，你可以通过使用 CDN 或下载并手动插入文件来完成此操作。JavaScript 文件应插入到页面底部，紧接在</body>标签之前。如果你选择使用 CDN，请插入以下代码行：

<script src="img/jquery.min.js"></script> 
<script src="img/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

如果你喜欢自己插入文件，请回到你之前下载的 Bootstrap 包，并定位到/js目录。这里会有一些文件，但你想要的是bootstrap.min.js。你还需要前往jquery.com下载 jQuery 框架文件。一旦完成，将这两个文件放入你自己的项目的/js目录中。接下来，在你的页面模板底部输入以下代码行。确保在bootstrap.min.js之前加载 jQuery。这是至关重要的；如果你以相反的顺序加载它们，框架将无法正常工作：

<script src="img/jquery.min.js"></script> 
<script src="img/bootstrap.min.js"></script>

这就完成了对所需关键 Bootstrap 框架文件的解释。下一步将是设置基本启动模板，以便你可以开始编码你的项目。

启动模板

基本启动模板是你使用 Bootstrap 开始页面所需的基本框架。让我们首先回顾整个模板的代码，然后我会逐个解析每个关键部分：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
  </head> 
  <body> 
    <h1>Hello, world!</h1> 

    <!-- jQuery first, then Bootstrap JS. --> 
    <script src="img/jquery.min.js"></script> 
    <script src="img/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
  </body> 
</html>

HTML5 文档类型

和现在的大多数项目一样，Bootstrap 使用 HTML5 DOCTYPE 作为其模板。这由以下代码行表示：

<!DOCTYPE html>

避免使用其他 DOCTYPE，如 XHTML 严格或过渡型，否则你的组件和布局可能会出现意外问题。

结构化响应式 meta 标签

Bootstrap 是一个以移动端优先的框架，因此需要包含以下 meta 标签以允许响应式网页设计。为了确保你的项目能够在所有类型的设备上正确渲染，你必须将此 meta 标签包含在项目的 <head> 中：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

如果你想要了解更多关于如何在 Bootstrap 中实现响应式网页设计的细节，你应该查看以下文档：v4-alpha.getbootstrap.com/layout/responsive-utilities/。

这就结束了模板中你需要了解的最重要部分。起始模板中的其余代码应该是简单易懂的。

正规化和重启

如我之前提到的，Bootstrap 使用 normalize.css 作为其基础 CSS 重置。随着 Reboot 重置的添加，Bootstrap 扩展了 Normalize，并允许仅使用 CSS 类进行样式化。这是一个更安全的模式，因为它在你不使用 CSS ID 进行样式化时，处理 CSS 特异性要容易得多。CSS 重置代码直接嵌入到 bootstrap.min.css 中，因此不需要包含任何额外的 CSS 文件进行重置。

将起始模板进一步发展

虽然我们已经设置了模板，但静态网站的一个主要问题是当内容发生变化时。如果你的项目增长到 50、100 或 500 页，并且你想要更新到 Bootstrap 的新版本，你可能需要更新所有这些文件。这可以说是非常痛苦。现在我们进入静态站点生成器。

使用静态站点生成器

目前在网页开发中最热门的趋势之一是使用静态站点生成器。这究竟意味着什么呢？不是拥有多个静态文件，每次全局有变化时都需要更新，你可以使用一系列基础模板，然后将你的主体内容加载到它们中。这有时被称为包含或部分。这样，你只需要一个或两个包含头部和尾部代码的布局文件。

然后，当有变化发生时，你只需要更新几个文件，而不是 500 个。一旦你的网站完成，然后生成一个纯 HTML、CSS 和 JavaScript 版本，并将其部署到服务器上。这就是我所说的创建你自己的前端网页开发环境。这也是现在大多数人处理大型项目以保持其可管理性的方式。

将基础模板转换为生成器

我们为什么不将基本模板集成到生成器中，这样我就可以向你展示我在说什么？我选择的生成器是 Harp.js，你可以通过遵循代码文件夹中提供的步骤来安装它（安装手册）。

使用静态站点生成器，如 Harp.js，有许多很好的理由：更干净的代码、现代最佳实践和更多。然而，最好的理由是它将使你的生活变得简单。你不必更新网站所有 50 页的标题，你只需部分更新标题，然后将其编译到所有模板中。你还可以利用变量来插入内容和配置。

将基本模板转换为生成器

设置博客项目

让我们从创建一个新的目录开始，并将其命名为类似 Bootstrap Blog 的东西。打开该文件夹，并在其中创建以下子目录：

  • css

  • fonts

  • img

  • js

  • partial

css

css 目录将包含 Bootstrap 框架的 CSS 文件和我们将稍后构建的自定义主题文件。转到 Bootstrap 源文件目录，找到 dist/css 文件夹。从那里，将 bootstrap.min.css 复制到我们的新博客项目的 css 目录中。

fonts

fonts 目录将包含字体图标库，例如 Glyphicon 或 Font Awesome。以前，Bootstrap 随带 Glyphicon，但在版本 4 中已经不再包含它。如果你希望使用它，你需要下载图标字体集，然后将文件放入这个目录中。你还可以在这个目录中包含你可能在项目中使用的网络字体。如果你正在寻找网络字体，一个好的起点是 Google Web Fonts。

img

img 目录将包含博客中使用的任何图像。

js

js 或 JavaScript 目录将包含 Bootstrap 框架的 JavaScript 文件。如果你添加了任何其他第三方库，它们也应该包含在这个目录中。最后一次回到 Bootstrap 源文件，找到 dist/js 文件夹。从那里，将 bootstrap.min.js 复制到博客项目的 js 目录中。

partial

partial 目录将包含我们希望在模板或网页的多个位置重复使用的代码片段，例如，我们项目的页眉和页脚。重要的是要注意，你可以有尽可能多的部分文件，或者根本不使用任何文件。

在这个文件夹中，创建两个新的文件，并将它们命名为 _header.ejs 和 footer.ejs。目前，你可以将它们留空。

EJS 文件

EJS 代表 可嵌入的 JavaScript。这是一种模板文件类型，允许我们在模板中使用诸如部分和变量等功能。Harp 也支持 Jade，如果你更喜欢那种语言。然而，我更喜欢使用 EJS，因为它非常类似于 HTML，因此非常容易学习。如果你曾经使用过 WordPress，它非常类似于使用模板标签将内容或组件插入到设计中。

设置 JSON 文件

每个 Harp 项目至少有两个 JSON 文件，用于配置项目。JSON 代表 JavaScript 对象表示法，是一种轻量级的数据交换格式。如果这听起来很复杂，请不要担心。实际上，JSON 文件的编码非常简单，我将现在向您展示。

第一个文件名为 _harp.json，用于配置整个博客中使用的全局设置和变量。在这种情况下，我们将设置一个全局变量来存储我们项目的名称，该名称将被插入到每个页面模板中。首先，在博客项目的根目录中创建一个新文件，并将其命名为 _harp.json。在文件中，插入以下代码：

{ 
   "globals": { 
      "siteTitle": "Learning Bootstrap 4" 
   } 
}

下面是这段代码中发生的事情：

  • 我们使用 globals 关键字，因此在此之下任何变量都将可在所有模板中使用

  • 我创建了一个名为 siteTitle 的新变量，它将是项目的标题

  • 我已将书籍名称 Learning Bootstrap 4 作为项目的标题插入

这就完成了全局 _harp.json 文件的设置。稍后，我将向您展示如何将我们设置的变量添加到主布局文件中。

创建数据 JSON 文件

我们接下来需要做的是设置 _data.json 文件，它可以存储模板特定的变量和设置。对于我们的项目，我们将为每个页面模板设置一个变量，它将包含页面的名称。在博客项目的根目录中创建另一个文件，并将其命名为 _data.json。在该文件中，插入以下代码：

{ 
   "index": { 
      "pageTitle": "Home" 
   } 
}

让我为您分解这段代码：

  • index 指的是一个文件名。在这种情况下，它将是我们的主页。我们尚未实际创建此文件，但这没关系，我们将在下一步中创建它。

  • 我创建了一个名为 pageTitle 的变量，它将引用我们项目中每个页面模板的标题

  • 由于这是 index 模板，我已将其值或名称指定为 Home

这就完成了 _data.json 文件的设置。稍后，当我们添加更多页面模板时，我们需要更新此文件。现在，这将为我们启动项目提供所需的最小资源。

设置布局

让我们继续设置我们项目的布局文件。布局是一个独立的文件，它将作为我们所有页面内容的包装器。它包含诸如我们页面 <head>、页眉部分和页脚部分等内容。这是使用静态站点生成器的一个优点。我们不需要在每一页上定义这些内容，所以如果我们想更改页眉中的某些内容，我们只需在布局中更改它。在下次编译时，所有页面模板的页眉都将使用新代码进行更新。

在博客项目的根目录中创建一个新文件，命名为 _layout.ejs。由于这实际上是布局文件的一种类型，我们将将其创建为 EJS 模板文件。一旦创建文件，请将以下代码插入其中：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <title><%- pageTitle %> | <%- siteTitle %></title> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
  </head> 
  <body> 

    <%- partial("partial/_header") %> 

    <%- yield %> 

    <%- partial("partial/_footer") %> 

    <!-- jQuery first, then Bootstrap JS. --> 
    <script src="img/jquery.min.js"></script> 
    <script src="img/bootstrap.min.js"></script> 
  </body> 
</html> 

The second section in the <body> is the <%- yield %> tag. This is a Harp template tag and here is where the contents of our page template files will load. In the case of our index page, any code that we enter into index.ejs (that we need to create still) will be loaded in at this place in the layout.The final line of code is a partial for the footer and works exactly the same as the header. At a minimum, you should have a header and footer partial in your projects. However, you are free to add as many partials as you like to make your project more modular.

这就完成了布局的设置。接下来，让我们继续编写页眉和页脚部分。

设置页眉

让我们通过编写页眉来设置我们的第一个部分。在这里，我们将使用 Bootstrap 的navbar组件为博客的全局导航。在部分目录中，打开你稍早前创建的_header.ejs文件，并插入以下代码：

<nav class="navbar navbar-light bg-faded"> 
  <a class="navbar-brand" href="#">Learning Bootstrap 4</a> 
  <ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
      <a class="nav-link" href="index.html">Home</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="about.html">About</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="contact.html">Contact</a> 
    </li> 
  </ul> 
  <form class="form-inline pull-xs-right"> 
    <input class="form-control" type="text" placeholder="Search"> 
    <button class="btn btn-primary" type="submit">Search</button> 
  </form> 
</nav>

如果你使用的是 Bootstrap 3，你可能会注意到在版本 4 中渲染navbar的代码要干净得多。这将使navbar的使用和解释更加容易。让我为你分解一下代码：

  • 在<nav>标签上，我们需要包含几个类。.navbar是这个组件的标准类。.navbar-light将为我们渲染一个浅色导航栏。你可以在 Bootstrap 文档中查看一些其他颜色选项。最后，.bg-faded类是可选的，但我喜欢包含它，因为它使navbar的背景更加微妙。

  • .navbar-brand类与 Bootstrap 3 保持不变，我为这个标签插入了书的名称。你可以随意命名它。

  • 接下来，我们有我们的导航链接列表。<ul>标签需要在这里包含两个必需的类：.nav和.navbar-nav。

  • 在列表中，你会注意到三个页面：首页、关于和联系。这些页面将在后续章节中构建，所以请现在就填写它们。

    小贴士

    注意索引页面链接上的.active类。这是可选的，你可能不希望以这种方式包含它，因为这是一个全局导航。

  • 最后，我包含了一个搜索表单，并使用.pull-xs-right将其对齐到navbar的右侧。如果你熟悉 Bootstrap 3，这个类曾经简单地被称为.pull-right。在 Bootstrap 4 中，你可以根据设备的视口大小有更多控制对齐方式。如果你总是想让搜索栏对齐到右侧，那么在类中使用-xs值。

保存文件，这将完成页眉部分的设置。让我们继续设置页脚。

设置页脚

页脚部分的工作方式与页眉完全相同。打开我们在之前创建的部分目录中的_footer.ejs文件，并粘贴以下代码：

<!-- footer //--> 
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12"> 
         Learning Bootstrap 4 2016 
      </div> 
   </div> 
</div>

对于我们的博客，页脚内容将会非常基础。以下是代码的分解：

  • 我使用 .container 类将整个 footer 包裹起来，这将设置布局的最大宽度为 1140 像素。navbar 没有放入容器中，所以它会扩展到页面的全宽。.container 类还将为块设置左右填充为 .9375rem。需要注意的是，Bootstrap 4 使用 REM 作为主要度量单位。EM 单位在从版本 3 升级后已被弃用。如果你对 REM 感兴趣，应该阅读这篇博客文章：snook.ca/archives/html_and_css/font-size-with-rem。

  • 还需要注意的是，从 Bootstrap 3 到 4，列类并没有发生变化。如果你正在迁移项目，这实际上是一件好事，因为它将使迁移过程变得更加容易。我通过使用 .col-lg-12 类将页脚的宽度设置为容器全宽。

  • 最后，我在页脚中输入了一些简单的内容，即书名和写作年份。你可以随意更改成你想要的任何内容。

  • 保存文件，页脚设置将完成。

我们越来越接近设置我们的 Harp 开发环境。我们最后需要做的是设置我们的索引页面模板，然后我们就可以编译并查看我们的项目了。

创建我们的第一个页面模板

对于我们的第一个页面模板，我们将创建我们的 Home 或 index 页面。在博客项目的根目录下，创建一个名为 index.ejs 的新文件。注意，这个文件不像之前的文件那样以下划线开头。在 Harp 中，任何带有下划线的文件都会被编译成另一个文件，并且在文件复制到生产目录时会被忽略。例如，你不想编译器输出 layout.html，因为它与 Home 页面的内容相当无用。你只想得到 index.html，你可以将其部署到你的 web 服务器上。你需要记住的基本事情是不要在页面模板文件的开始处包含下划线。一旦创建了文件，插入以下代码：

<div class="container"> 
  <div class="row"> 
    <div class="col-lg-12"> 
      <h1>hello world!</h1> 
    </div> 
  </div> 
</div>

为了让我们开始，我会让它非常简单。以下是对正在发生的事情的快速概述：

  • 我又创建了一个 .container，它将包含 Home 页面的内容

  • 在容器内，有一个全宽的列。在那个列中，我插入了一个 <h1> 标题，内容为 hello world!。

到此为止。稍后，我们将进一步构建这个页面。保存文件并关闭它。我们现在已经完成了设置 Harp 开发环境所有基本文件的设置。最后一步是编译项目并测试它。

编译你的项目

当我们在 Harp 中编译一个项目时，它会找到所有不同的部分、布局和模板文件，并将它们组合成常规的 HTML、CSS 和 JavaScript 文件。我们还没有使用 Sass，但就像模板文件一样，你可以有多个 Sass 文件，这些文件可以编译成一个可以在生产 Web 服务器上使用的单个 CSS 文件。要编译你的项目，在终端中导航到博客项目的根目录。一旦你到了那里，运行以下命令：

$ harp compile

如果一切正常，终端中会出现一个新空白行。这是好的！如果编译器抛出错误，阅读它需要表达的内容，并对您的模板文件进行适当的修改。你可能遇到的一些常见错误如下：

  • _harp.json 或 _data.json 中的语法错误

  • 在 _layout.ejs 中变量或部分名称的语法错误

  • 如果你已经在项目的根目录中创建了额外的页面模板，并且没有在 _data.json 中包含它们，编译将失败

一旦编译成功，回到博客项目的根目录，你会注意到有一个新的 www 目录。这个目录包含了你的项目的所有编译后的 HTML、CSS 和 JavaScript 文件。当你准备好将项目部署到生产 Web 服务器时，你会使用 FTP 或其他文件传输方式将这些文件上传。每次你在项目中运行 harp 编译命令时，这些文件都会根据任何新的或编辑的代码进行更新。

运行你的项目

Harp 内置了一个由 Node.js 支持的 Web 服务器。这意味着你不需要网络托管账户或 Web 服务器来实际测试你的项目。通过一个简单的命令，你可以启动内置服务器并在本地查看你的项目。如果你在一个没有互联网连接的地方工作，这也会非常棒。它将允许你在没有互联网的情况下继续构建你的项目。要运行服务器，回到终端并确保你仍然位于博客项目的根目录中。然后，输入以下命令：

$ harp server

在终端中，你应该看到一条消息表明服务器正在运行。你现在可以自由地在浏览器中访问项目。

查看你的项目

现在项目已经在 Web 服务器上运行，只需导航到以下 URL 来查看它：http://localhost:9000。

默认情况下，Harp 在端口 9000 上运行，但你可以通过修改最后一个命令来指定不同的端口。回到终端，通过按 Ctrl + C 来关闭服务器。现在输入以下命令：

$ harp server  --port 9001

使用这个命令，你可以调用你想要的任何端口。再次回到网页浏览器，稍微更改 URL，使其读取 http://localhost:9001。

你的项目应该为你加载，看起来像这样：

查看你的项目

现在看起来可能不是很多，但它确实可以工作！您的项目已成功设置并运行。在未来的章节中，我们将添加到这个页面，并使用额外的 Bootstrap 4 组件构建更多内容。

查看您的项目

关于 Sass 的注意事项

当使用 Bootstrap 4 构建项目时，您有两种方式可以与 Sass 一起工作。第一种是通过编辑实际的 Bootstrap 框架文件，然后使用 Grunt 重新编译它们。如果您想使用 Flexbox 来实现网格布局，这将非常有用。我将在下一课中更深入地讨论这个问题。另一种您可能想要使用 Sass 的方式是创建一个独特的主题，将自定义的外观和感觉应用到 Bootstrap 上。这是在实际的 Harp 项目中完成的。在 css 目录中，您可以包含 Sass 文件；当您编译 Harp 项目时，它们将被转换为常规 CSS，因为 Harp 内置了 Sass 编译器。然后，只需简单地将这些额外的文件包含到您的布局模板中即可。我将在课程稍后也涉及到这一点，但现在我想指出这些差异。

浏览器支持

Bootstrap 4 不支持 Internet Explorer 8 及更早版本。Bootstrap 4 还提供了可选的 Flexbox 支持。只有 Internet Explorer 11 及更高版本支持 CSS3 弹性盒布局模块。除了 Internet Explorer 8 及更早版本外，Bootstrap 支持所有主流浏览器，包括许多移动浏览器。

供应商前缀

CSS3 引入了 供应商特定的 规则，这为您提供了编写一些仅适用于单一浏览器的额外 CSS 的可能性。乍一看，这似乎与我们想要的正好相反。我们想要的是一套标准和实用性，在所有浏览器中都能正常工作，以及一套标准的 HTML 和 CSS，在所有浏览器中具有相同的效果和解释。这些供应商特定的规则旨在帮助我们实现这个乌托邦。供应商特定的规则还为我们提供了标准属性和替代语法的早期实现。最后但同样重要的是，这些规则允许浏览器实现那些否则没有工作标准的专有 CSS 属性（并且可能永远不会成为标准）。

由于这些原因，供应商特定的规则在 CSS3 的许多新特性中扮演着重要的角色。例如，动画属性、border-radius 和 box-shadow：在过去几年中，所有这些属性都依赖于供应商特定的规则。您可以很容易地看出，某些属性可能会从供应商前缀演变为标准，因为目前，大多数浏览器都支持带有任何前缀的 border-radius 和 box-shadow 属性。

供应商使用以下前缀：

  • WebKit：-webkit

  • Firefox：-moz

  • Opera：-o

  • Internet Explorer：-ms

考虑以下 CSS 代码：

transition: all .2s ease-in-out;

为了实现全浏览器支持，或者至少支持 Bootstrap 所支持的浏览器，我们不得不编写：

  -webkit-transition: all .2s ease-in-out; 
  -o-transition: all .2s ease-in-out; 
  transition: all .2s ease-in-out;

关于过渡属性和浏览器支持的更多信息也可以在以下 URL 中找到：caniuse.com/#feat=css-transitions。

由于不同的浏览器及其不同版本，浏览器可能会使用不同的供应商前缀来支持在编写跨浏览器 CSS 代码时相同的属性，这可能会变得非常复杂。

Bootstrap 的 Sass 代码，编译成 CSS 代码不包含任何前缀。而不是使用前缀，PostCSS autoprefixer 已集成到 Bootstrap 的构建过程中。当你创建自己的构建过程时，你也应该使用 PostCSS autoprefixer。

故障排除

https://jsfiddle.net/ or https://codepen.io/, and share it with the good folks at http://stackoverflow.com/ for help.

当我们有这么多要处理的动态部分时，事情肯定会发生，这些是一些我们最好的生存方法！

Bootply 是 Bootstrap、CSS、JavaScript 和 jQuery 的游乐场；你可以用它来测试你的 HTML 代码。你还可以添加你的编译后的 CSS 代码，但 Bootply 不能编译你的 CSS 代码。

注意

Bootply 可以在 www.bootply.com/ 上找到。

我们网站模板几乎完成了。在继续之前，让我们暂停一下，总结一下。

摘要

这就结束了第一课。在本课中，我们已经设置了我们的第一个博客项目，并包含了所有必要的文件。

现在我们已经设置好环境并准备就绪，我们将在下一课中开始编写博客。为了让我们开始，我们将直接学习如何在 Bootstrap 中使用 Flexbox 布局。

评估

  1. 以下哪个不使用 Bootstrap 框架？

    1. JavaScript

    2. HTML

    3. PHP

    4. CSS

  2. CDN 的全称是什么？

    1. 云部署网络

    2. 内容分发网络

    3. 内容交付网络

    4. 内容交付网络

  3. Bootstrap 作为基础 CSS 重置使用的是什么？

    1. normalize.css

    2. reboot.css

    3. bootstrap.css

    4. bootstrap.min.css

  4. 用于了解系统中安装的 Node.js 版本号的命令是什么？

    1. $ node –ver

    2. $ node -vs

    3. $ node –v

    4. $ node –vr

  5. 在 Mac 上安装 Harp 的命令是什么？

    1. $ sudo npm install -g harp

    2. $ npm install -g harp

    3. $ node install hard

    4. $ harp install

  6. Bootstrap 用于 CSS 和 JavaScript 构建系统的工具是什么？

    1. Selenium

    2. Drone

    3. Grunt

    4. Ruby

  7. 以下哪个用于设置导航栏的基本样式？

    1. <navbar class="navbar navbar-light bg-faded" role="navigation"></navbar>

    2. <nav classnav="navbar navbar-light bg-faded" rolenav="navigation"></nav>

    3. <nav class="navbar navbar-light bg-faded" role="navigation"></nav>

    4. <nav navclass="navbar navbar-light bg-faded" navrole="navigation"></nav>

  8. 以下哪个不是 Bootstrap 中使用的构建工具？

    1. Node.js

    2. Grunt.js

    3. Surge.js

    4. Harp.js

  9. 为了安装 Grunt，你会运行以下哪个命令？

    1. npm install -g grunt-cli

    2. npm install grunt-cli

    3. npm install -g grunt-cli

    4. npm install grunt-cli

  10. 用于运行文档网站并将核心 Sass 文件编译成常规 CSS 的工具是什么？

    1. Grunt

    2. Ruby

    3. Perl

    4. Bundlenr

  11. 以下哪个目录将包含您想在模板或网页的多个位置重复使用的代码片段？

    1. js

    2. 部分内容

    3. JSON

    4. CSS

第二章：Flexbox 入门

好的，现在我们已经完成了所有 Bootstrap 构建工具的设置，让我们跳入 Bootstrap 4 的一个真正的新特性。框架的最新版本包含了 CSS Flexbox 支持。Flexbox 布局模块的目标是创建一种更有效的设计网站或网页应用布局的方法。盒子网格以这种方式对齐，即使在它们的大小未知的情况下，也会将它们分布在其容器中。这就是 Flexbox 中的“Flex”一词的由来。

弹性盒子的动机源于为移动设备设计的网页。在构建响应式网页应用或网站时，需要一种让某个部分能够根据可用空间增长或收缩以最佳填充空间的方法。Flexbox 与垂直或水平驱动的块布局相反。需要注意的是，Flexbox 通常最适合用于设计网页应用。传统的网格方法对于大型网站仍然是最有效的。

在我们的博客项目中，我们将使用 Flexbox 来创建主页。将有几行块，每行都是一个帖子。我会向你展示几种布局块的方法以及你可以自定义每个块内容的不同方式，所有这些都将使用 Bootstrap 中的新 Flexbox 布局。

Flexbox 基础知识和术语

在我们走得太远之前，我们应该定义一些 Flexbox 基础知识和我在本章中会使用的术语。每个 Flexbox 布局都依赖于一个外部容器。随着我们进入本章，我会将这个容器称为 父容器。在父容器内，将始终有一组盒子或块。我将把这些盒子称为 子盒子 或 子元素。那么，我们为什么不先谈谈为什么你想使用 Flexbox 呢？Flexbox 的主要目的是允许在父容器内动态调整子盒子的尺寸。

这适用于动态调整宽度和高度属性。许多设计师和开发者更喜欢这种技术，因为它允许用更少的代码实现更简单的布局：

Flexbox 基础知识和术语

Flexbox 的排序

Flexbox 是一个非常强大的模块，因为它包含了许多你可以自定义的属性。在我们完全深入使用 Bootstrap 中的 Flexbox 之前，让我们快速回顾一些基础知识。首先，我们来谈谈子盒子的顺序。默认情况下，它们将以你在 HTML 文件中插入它们的顺序出现。考虑以下代码：

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
</div>

适当的 CSS 将产生如下布局：

Flexbox 排序

如果你在家跟随，以下是产生此布局的 CSS 代码：

.parent { 
  display: flex; 
  background: #ccc; 
  padding: 10px; 
  font-family: helvetica; 
} 

.child { 
  padding: 10px; 
  margin: 10px; 
  background: #fff; 
  flex-grow: 1; 
  text-align:center; 
  height: 100px; 
  line-height: 100px; 
}

现在我们可以使用order属性通过一些 CSS 重新排序子元素。让我们将第三个盒子放在开始位置。如果你正在重新排序一些块，你需要为每个块定义位置；你不能简单地为一个单独的块输入值。将以下 CSS 添加到你的样式表中：

.child:nth-of-type(1) { 
  order: 2; 
} 
.child:nth-of-type(2) { 
  order: 3; 
} 
.child:nth-of-type(3) { 
  order: 1; 
}

我正在使用nth-of-type伪选择器来针对每个三个盒子。然后我使用了order属性将第三个盒子设置为第一个位置。我还调整了其他两个盒子，将它们移动一个空间。保存文件，你的盒子现在应该看起来像这样：

排序你的 Flexbox

如你所见，第三个盒子已经移动到了第一个位置。重新排列页面上的块就这么简单。我认为你可能会看到这如何有助于编写一个网络应用程序仪表板。

将子部分拉伸以适应父容器

另一个重要的 Flexbox 特性是能够拉伸子盒子的宽度以适应包含父容器的全宽。如果你查看前面的 CSS，你会注意到.child类上的flex-grow属性。该属性设置为 1，这意味着子盒子将拉伸以均匀填充其父容器。你也可以通过使用nth-of-type选择器为其中一个盒子设置不同的值，然后它将比其他盒子更宽。以下是如何创建等宽列的代码，因为你很可能会在大多数情况下这样做：

.child { 
   flex-grow: 1; 
}

改变盒子的方向

在 Flexbox 中默认情况下，子盒子将按从左到右的行排列。如果你愿意，你可以使用flex-direction属性来改变方向。让我们尝试几种不同的方向。首先，让我们再次回顾我们的基础 HTML 代码：

<div class="parent"> 
   <div class="child"> 
     1 
   </div> 
   <div class="child"> 
     2 
   </div> 
   <div class="child"> 
     3 
   </div> 
</div>

这是我们在稍早之前编写的基 CSS。然而，这次我们将向.parent类添加flex-direction属性（值为row-reverse），这将反转盒子的顺序：

.parent { 
  display: flex; 
  flex-direction: row-reverse; 
  background: #ccc; 
  padding: 10px; 
} 

.child { 
  padding: 10px; 
  margin: 10px; 
  background: #fff; 
  flex-grow: 1; 
  text-align:center; 
  height: 100px; 
  line-height: 100px; 
}

如果你保存文件并在浏览器中查看，它现在应该看起来像这样：

改变盒子的方向

如果我们想要垂直排列这些盒子，使它们按降序堆叠在彼此之上，我们可以通过将flex-direction属性更改为column来实现：

.parent { 
   ... 
   flex-direction: column; 
}

这种配置将产生一个看起来像这样的网格：

改变盒子的方向

最后，我们还可以尝试另一个方向。让我们做同样的垂直堆叠网格，但这次我们将它反转。我们通过将flex-direction属性切换到column-reverse来实现这一点：

.parent { 
   ... 
   flex-direction: column-reverse; 
}

这将产生一个看起来像这样的网格：

改变盒子的方向

包装你的 Flexbox

默认情况下，所有的子盒子都会尝试适应一行。如果你有一个包含多个盒子的布局，这可能不是你想要的外观。如果是这种情况，你可以使用flex-wrap属性根据需要包装子盒子。让我们用以下 HTML 添加更多盒子到我们的原始代码中：

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
   <div class="child"> 
   4 
   </div> 
   <div class="child"> 
   5 
   </div> 
   <div class="child"> 
   6 
   </div> 
   <div class="child"> 
   7 
   </div> 
   <div class="child"> 
   8 
   </div> 
   <div class="child"> 
   9 
   </div> 
</div>

现在我们父容器中有九个盒子。这应该足够我们创建一个很好的包裹效果。在我们看到这个效果之前，我们需要添加更多的 CSS。将以下属性添加到你的 CSS 文件中：

.parent { 
   ... 
   flex-wrap: wrap; 
} 

.child { 
   ... 
   min-width: 100px; 
}

我添加了两个新属性来实现我们想要的布局。让我来分解一下发生了什么：

  • 我在 .parent 类中添加了 flex-wrap 属性，并将其值设置为 wrap。这将根据需要包裹盒子。

  • 在 .child 类中，我添加了 min-width 为 100px。我这样做是为了能够控制子盒子何时会断行。如果我们不添加这个属性，列的宽度可能会变得太窄。

一旦你将那些属性添加到现有代码中，保存文件并测试它。你的布局现在应该看起来像这样：

包裹你的 Flexbox

如你所见，我们现在有一个两行布局，上面有六个盒子，下面有三个。记住我们之前添加了 flex-grow 属性，所以第二行正在拉伸或增长以适应。如果你想让你的盒子始终相等，你应该使用偶数，在这种情况下是 12。你也可以移除 flex-grow 属性；那么所有盒子都会有相同的宽度，但它们不会以相同的方式填充布局。

创建等高列

Flexbox 最好的特性之一是能够轻松创建等高列。在常规的水平布局中，如果你的内容长度不完全相同，每一列的高度都会不同。这对于网页应用布局来说可能是个问题，因为你通常希望你的盒子更加统一。让我们检查一下常规布局的代码，以及它在浏览器中的样子：

<div class="parent"> 
   <div class="child"> 
   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 class="child"> 
   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. 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 class="child"> 
   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. 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. 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. 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. 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>

我创建了三个列，每个列中的文本量不同。让我们给这些列添加一些基本的样式：

.parent { 
  width: 100%; 
  background: #ccc; 
  font-family: helvetica; 
  padding: 5%; 
  float: left; 
} 

.child { 
  padding: 2%; 
  background: white; 
  width: 25%; 
  display: inline-block; 
  float: left; 
}

我为这个常规布局创建了一个类似于 Flexbox 的外观和感觉。让我们看看在浏览器中看起来是什么样子：

创建等高列

这看起来不太好，不是吗？更好的做法是让两个较短的列垂直拉伸以匹配最长列的高度。好消息是这用 Flexbox 来做非常容易。保持 HTML 不变，但让我们去改变我们的 CSS 以使用 Flexbox 方法：

.parent { 
  display: flex; 
  background: #ccc; 
  font-family: helvetica; 
  padding: 5%; 
} 

.child { 
  padding: 2%; 
  background: white; 
  flex-grow: 1; 
  min-width: 200px; 
}

上述代码实际上与第一个例子非常相似。因此，等高列在 Flexbox 中是标准配置。我为每个列添加了 min-width 为 200px，以便文本可读。有了前面的 CSS，我们的布局现在将看起来像这样：

创建等高列

完美！现在每个列的白色背景已经垂直扩展，以匹配最高子元素的高度。这样看起来更好，如果你添加额外的内容行，将允许更佳的水平对齐。这里发生的事情是，align-items 属性默认为 stretch 值。这个值就是拉伸列的高度以适应。还有一些其他的对齐值你也可以尝试。为了继续，让我们尝试 flex-start 值。向 .parent 类添加以下 CSS：

.parent { 
   ... 
   align-items: flex-start; 
}

这种配置实际上会取消等高列，看起来像是一个常规网格。以下是刷新你记忆的图片：

创建等高列

一个更有用的值是 flex-end 选项，它将框对齐到浏览器窗口的底部。更改你的 CSS 为：

.parent { 
   ... 
   align-items: flex-end; 
}

这种设置将产生如下网格：

创建等高列

如果你想在布局中垂直居中列，你可以使用 center 值：

.parent { 
   ... 
   align-items: center; 
}

如果你选择这种设置，你的网格将看起来像这样：

创建等高列

这只是你可以用来自定义 Flexbox 网格的一些属性的一个例子。正如我之前提到的，我只是想快速介绍如何使用 Flexbox 以及一些必要的术语。让我们利用所学知识，通过在 Bootstrap 中构建 Flexbox 网格来进一步学习。

设置 Bootstrap 弹性盒布局网格

无论你是否使用 Flexbox，网格都是基于 Bootstrap 的常规行和列类。如果你熟悉 Bootstrap 网格，这将按预期工作。在你开始任何 Bootstrap 项目之前，你需要决定是否想使用 Flexbox 或常规网格。不幸的是，你无法在 Bootstrap 项目中同时使用两者。由于本章的重点是 Flexbox，我们将使用适当的网格配置。默认情况下，Bootstrap 设置为使用常规网格。因此，我们需要编辑源文件以激活 Flexbox 网格。让我们先从 v4-alpha.getbootstrap.com/ 重新下载源文件开始。

下载 ZIP 文件后，展开它并重命名，以免混淆。可以将其命名为 Flexbox Bootstrap。接下来，我们需要编辑一个文件并重新编译源文件以应用更改。

更新 Sass 变量

要使用 Flexbox 网格，我们需要在 _variables.scss 文件中编辑一个 Sass 变量。Sass 变量的工作方式是在 _variables.scss 文件中设置一个单一值。当你运行内置编译器时，这个值会被写入到 Bootstrap 框架中需要它的每个组件。然后你可以获取编译后的 bootstrap.min.css 文件，它将包含你使用 Flexbox 网格所需的所有代码：

  1. 在你的新源文件目录中，使用终端，导航到：

     $ scss/_variables.scss

  2. 在文本编辑器（如 Sublime Text 2 或记事本）中打开文件，并找到以下代码行：

     $enable-flex: false !default;

  3. 将 false 值更改为 true。代码行现在应该读取：

     $enable-flex: true !default;

  4. 保存文件并关闭它。在应用此更改之前，我们需要重新编译源文件。由于我们下载了新的源文件版本，我们需要重新安装项目依赖项。在终端中导航到新 Flexbox 源文件根目录，并运行以下命令：

     $ npm install

  5. 这可能需要几分钟，你可以在终端中跟踪进度。一旦完成，我们需要编译项目。为此，我们使用 Grunt。要运行编译器，只需在终端中输入以下命令：

     $ grunt

这可能需要一两分钟，你可以在终端中跟踪进度。一旦完成，源文件将被编译到 /dist 目录。如果还不清楚，你将在实际项目中使用的生产文件将被编译到 /dist 目录。

在我们开始我们的项目之前，确认一切正常是个好主意。回到你的文本编辑器，并打开源文件根目录中的 dist/css/bootstrap.css 文件。

这是编译后的 Bootstrap CSS 框架文件的未压缩版本。一旦打开，快速查找（Mac 上为 cmd + f，Windows 上为 Ctrl + f）并搜索 flex。如果一切正常，它应该会快速找到文件中的一个 flex 实例。这证实了你的编译是成功的。

设置 Flexbox 项目

Flexbox 项目结构与常规项目完全相同。你只需确保将 /css 目录中的 bootstrap.min.css 文件替换为新的 Flexbox 版本。复制我们在上一章中创建的项目，并将其粘贴到你的电脑上的任何位置。将项目重命名为类似 Flexbox project 的名称。现在打开该项目，导航到 /css 目录。在新的窗口中，打开 Flexbox 源文件目录，并导航到 /dist/css/ 目录。将 /dist/css 中的 bootstrap.min.css 文件复制到你的新 Flexbox project 的 /css 目录中。你将收到覆盖文件的提示，你应该选择 是。就这样，你的新 Flexbox 项目就准备好了。

将 Flexbox 源文件保存在你的电脑上的某个位置是个好主意。在未来的项目中，你可以简单地复制编译后的 Flexbox 版本的 Bootstrap CSS，这样每次你想使用 Flexbox 布局时就不必重新编译源文件。

添加自定义主题

在我们编写第一个 Flexbox 网格之前，我们需要给我们的项目添加一个自定义 CSS 主题。我们将这样做是为了在 Bootstrap 之上添加任何自定义的外观和感觉样式。在 Bootstrap 中，你永远不想编辑实际的框架 CSS。你应该使用 CSS 的级联功能来插入一个主题，用于额外的自定义 CSS 或覆盖现有的 Bootstrap 样式。在后面的章节中，我会更深入地介绍自定义主题，但现在让我们设置一个基本的主题，我们可以用它来构建我们的 Flexbox 网格。首先，让我们在我们的项目 /css 目录中创建一个新文件，命名为 theme.css。现在，文件可以是空的；只需确保你创建了它并保存了。

接下来，我们需要更新我们的 _layout.ejs 文件，以便在页面中包含主题文件。在文本编辑器中打开 _layout.ejs，确保它与以下代码匹配：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <title><%- pageTitle %> | <%- siteTitle %></title> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/theme.css"> 
  </head> 
  <body> 

    <%- partial("partial/_header") %> 

    <%- yield %> 

    <%- partial("partial/_footer") %> 

    <!-- jQuery first, then Bootstrap JS. --> 
    <script src="img/jquery.min.js"></script> 
    <script src="img/bootstrap.min.js"></script> 
  </body> 
</html>

我在模板中添加了一行代码来加载 theme.css：

<link rel="stylesheet" href="css/theme.css">

注意

注意这一行代码在 bootstrap.min.css 之后。这很重要，因为我们的主题需要最后加载，这样我们就可以覆盖 Bootstrap 默认样式，如果我们想的话。我们的模板现在是最新的，我们准备好开始我们的第一个网格。请随意保持 theme.css 打开，因为我们将在下一步中添加一些样式。

创建一个基本的三个列网格

现在我们已经设置了我们的项目，让我们开始做一些 Bootstrap 编码。好消息是，与 Flexbox 网格一起使用的 Bootstrap 列类与常规网格中使用的完全相同。没有必要学习任何新的类名。在你的项目文件夹中，创建一个新文件，并将其命名为 flexbox.ejs。

在你继续之前，你需要为这个页面在 _data.json 中添加一个实例。否则，你的 harp compile 命令将失败。打开 _data.json 并添加以下代码：

{ 
   "index": { 
      "pageTitle": "Home" 
   }, 
   "flexbox": { 
      "pageTitle": "Flexbox" 
   } 
}

我为 flexbox.ejs 添加了第二个条目，并给它这个页面标题：Flexbox。现在我们可以安全地开始对 flexbox.ejs 进行工作，编译将正常进行。让我们从一个简单的三列网格开始。将以下 HTML 代码输入到 flexbox.ejs 中：

<div class="container"> 
  <div class="row"> 
    <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</div> 
    <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est.</div> 
    <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus.</div> 
  </div> 
</div>

让我分解一下这里发生的事情：

  • 就像在先前的例子中一样，我创建了三个相等的列。每个列中都有不同数量的文本。

  • 我使用 col-md-4 列类，因为我希望三列水平布局适用于中等尺寸的设备及以上。较小的设备将默认为单列宽度布局。

  • 我还为每个列 <div> 添加了一个 .child 类，这样我就可以对它们进行样式化。

现在我们给 theme.css 添加一点 CSS，这样我们就可以更容易地看到发生了什么：

.child { 
   background: #ccc; 
   padding: 20px; 
}

下面是 .child 类发生的情况：

  • 我添加了一个浅灰色背景色，这样我们就可以轻松地看到子框。

  • 我添加了一些填充。请注意，你可以在 Flexbox 网格中添加填充而不用担心破坏网格。在常规布局中，这将破坏你的盒模型并给布局添加额外的宽度。

完成后的布局应该看起来像这样：

创建基本的三个列网格

如您所见，浅灰色背景已经拉伸以适应最高列的高度。几乎不需要努力就能实现等高列真是太棒了！您还会注意到每个列都有一些填充，但我们的布局并没有被破坏。

您可能已经注意到，我使用了常规的.container类来包裹整个页面布局。如果我们想让布局扩展到浏览器整个宽度怎么办？

创建全宽布局

创建一个没有水平填充的全宽布局实际上非常简单。只需移除容器类。这种布局的 HTML 代码如下所示：

<div class="row"> 
  <div class="col-md-4 child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</div> 
  <div class="col-md-4 child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est.</div> 
  <div class="col-md-4 child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus.</div> 
</div>

如您所见，我只是简单地移除了带有.container类的<div>。让我们看看现在的布局看起来像什么：

创建全宽布局

现在列已经拉伸到了浏览器的边缘。我们轻松地创建了一个具有等高列的全宽布局。让我们通过将每个列实际变成一篇博客文章并添加更多行来改进这个设计。

设计单个博客文章

让我们从设计单个博客文章的布局和内容开始。至少，一篇文章应该有：标题、文章元数据、描述和“阅读更多”链接。打开flexbox.ejs文件，将第一列的代码替换为以下新代码：

<div class="col-md-4 child"> 
  <h3><a href="#">Blog Post Title</a></h3> 
  <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
  <p><a href="#">Read More</a></p> 
</div>

让我分析一下这里发生了什么：

  • 我添加了一个带有链接的<h3>标签作为文章标题

  • 我添加了一些文章元数据，并用<small>标签包裹起来，使其不那么显眼

  • 我保留了我们的描述并在底部添加了一个“阅读更多”链接

现在请将此代码复制并粘贴到其他两列中。如果您想调整描述文本的长度，请随意。在这个例子中，我将保持不变。完成之后，整个页面的代码应该看起来像这样。注意，我重新添加了容器<div>：

<div class="container"> 
  <div class="row"> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
    <div class="col-md-4 child"> 
      <h3><a href="#">Blog Post Title</a></h3> 
      <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
      <p><a href="#">Read More</a></p> 
    </div> 
  </div> 
</div>

保存您的文件，如果您已经有一段时间没有编译了，请执行 harp compile。然后运行 harp server 来启动 Web 服务器，并转到http://localhost:9000预览页面。它应该看起来像这样：

设计单个博客文章

太好了，现在我们有一个看起来不错的博客主页。然而，我们需要添加更多文章来填充它。让我们继续在同一个行内添加更多的列<div>。由于这是 Flexbox，我们不需要为每行文章的每一行都开始一个新的带有行类的<div>。让我们添加三个更多的文章，看看它看起来像什么：

设计单个博客文章

完美。现在我们的主页开始成形了。继续添加更多文章，直到您满意的数量。在这个时候，您应该对 Flexbox 网格有相当的了解。

摘要

我们首先回顾了 Flexbox 模块的基本功能及其相关术语。接下来，我向你展示了如何通过编辑 Sass 变量和重新编译源文件来在 Bootstrap 中激活 Flexbox 网格。最后，我们通过学习如何使用 Bootstrap Flexbox 网格构建博客主页和源来亲自动手。在下一章中，我们将进一步探讨布局以及如何使用 Bootstrap 设置你的页面。

评估

  1. Flexbox 布局模块的目标是什么？

    1. 在构建响应式 Web 应用程序或网站时，当需要缩放以最佳填充可用空间时使用

    2. 为了创建一个更有效的为网站或 Web 应用程序设计布局的方法

    3. 为了创建一个主页

    4. 以上都是

  2. 默认情况下，在 Flexbox 中，子盒子将按什么顺序排列？

    1. 从左到右

    2. 从右到左

    3. 从上到下

    4. 对角线

  3. 以下代码输出什么？评估

    1. 将盒子垂直排序，以便它们按降序堆叠在一起

    2. 将盒子垂直排序，以便它们按升序堆叠在一起

    3. 反转盒子的顺序

    4. 将没有输出

  4. 以下代码片段的输出有什么区别？评估

    1. 第一段代码将使盒子对齐到浏览器窗口的底部，第二段代码将使你的列在布局中垂直居中，第三段代码将取消等高列，看起来像是一个常规的网格

    2. 第一段代码将使你的列在布局中垂直居中，第二段代码将盒子对齐到浏览器窗口的底部，第三段代码将取消等高列，看起来像是一个常规的网格

    3. 第一段代码将取消等高列，看起来像是一个常规的网格，第二段代码将盒子对齐到浏览器窗口的底部，第三段代码将使你的列在布局中垂直居中

    4. 以上都不是

  5. 在 Bootstrap 项目中，你可以在同一时间同时使用 Flexbox 和常规网格吗？

    1. 是

    2. 不

  6. 如何创建没有水平填充的full-width布局？

    1. 使用列而不是行

    2. 重命名.container类

    3. 移除所有的<div>元素

    4. 简单地移除具有.container类的<div>元素

第三章。与布局一起工作

任何 Bootstrap 网站的核心是布局或网格组件。没有网格，网站几乎毫无用处。我们作为现代网页开发者面临的最大布局挑战之一是处理从桌面到平板电脑、移动电话，甚至苹果手表的大量屏幕分辨率。布局一个网站并不容易，我们依赖于响应式网页设计和媒体查询来采取以移动端优先的方法。Bootstrap 布局网格的最好特性之一是它以移动端优先，并使用媒体查询构建。这从构建网格的最困难部分中解脱出来，让我们能够专注于我们项目的实际设计。在我们开始布局我们博客项目的下一部分之前，让我们回顾一下 Bootstrap 4 中的布局网格基础知识。

在本章中，我们将简要讨论以下列出的主题：

  • 与容器一起工作

  • 向您的布局添加列

  • 创建一个简单的三列布局

  • 编写博客主页的代码

  • 使用响应式实用类

与容器一起工作

任何 Bootstrap 布局的基础是一个容器类。您可以选择使用两种类型的容器。第一种是 .container-fluid，它是一个全宽度的盒子，并将布局扩展以适应浏览器窗口的整个宽度。

添加了一些左右填充，以便内容不会紧挨着浏览器边缘：

与容器一起工作

第二种选择是基本的 .container 类，它将根据您的设备视口的尺寸具有固定的宽度。Bootstrap 中有五种不同的大小，以下为宽度值：

  • 非常小 <544px

  • 小 >544px

  • 中等 >768px

  • 大 >992px

  • 非常大 >1140px

与容器一起工作

让我们看看两种容器类型的标记。我将从基本的 .container 类开始：

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

这相当简单。现在让我们看看流体容器的代码：

<div class="container-fluid"> 
  ... 
</div>

再次，这很简单，这就是您需要了解的关于在 Bootstrap 4 中使用容器类的一切。

创建没有容器的布局

现在，在某些情况下，您可能不想使用容器，这是完全可以接受的。这种情况的一个例子是，如果您想要全宽度的布局，但不想有默认的左右填充。您可能有一个想要拉伸到浏览器全宽且没有填充的图片横幅。在这种情况下，只需移除带有 container 类的 <div> 即可。

在单页上使用多个容器

在单个页面模板上使用多个容器是完全可行的。容器是 CSS 类，因此它们是可重用的。你可能想在较长的页面布局中这样做，比如一个着陆页设计，其中包含多个大型区域。另一个例子是使用容器来包裹你的页脚。如果你使用像 Harp 这样的模板系统，你将想要创建一个页脚部分。你可以通过给它自己的容器来使页脚组件更加自包含。这样你就不必担心在页脚中关闭在页面模板或甚至标题中打开的容器<div>。我建议使用多个容器来使你的设计更加模块化，并且更容易被多个用户管理。让我们快速看一下如何使用多个容器来构建一个基本页面：

<div class="container"> 
   <!-- header code goes here, harp partial name would be _header.ejs //--> 
</div> 

<div class="container"> 
   <!-- template code goes here, harp file name would be index.ejs //--> 
</div> 

<div class="container"> 
   <!-- footer code goes here, harp partial name would be _footer.ejs //--> 
</div>

我们有三个独立的文件，并为每个文件使用一个容器类，这使得每个部分更加模块化。你也不必担心在一个文件中打开<div>然后在另一个文件中关闭它。这是一种避免孤儿关闭</div>标签的好方法。

在布局中插入行

创建布局的下一步是插入至少一行的列。每个容器类可以包含一个或多个嵌套在其中的行。一行定义了一组水平列，这些列可以被分成十二份。在 Bootstrap 中，列的神奇数字是十二，你可以以任何你喜欢的方式细分它们。在我们讨论列之前，让我们回顾一下行的标记。首先让我们看看一个包含单行的容器的例子：

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
</div>

正如你所见，这是设置布局的简单下一步。就像我提到的，你可以在容器内拥有任意多的行。以下是如何编码一个五行布局的方法：

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
</div>

与容器类一样，行也是一个 CSS 类，因此它们可以在单个页面模板上重复使用任意多次。

注意

你永远不应该在行<div>中包含实际内容。所有内容都应该包含在列<div>中。

向布局中添加列

在我们实际添加列之前，让我们简要谈谈 Bootstrap 中你可以使用的不同列类。在 Bootstrap 3 中，有四种不同的列类宽度可供选择：超小、小、中和大。Bootstrap 4 引入了一个新的超大列类。这可能是为了允许使用超大显示器，比如你可以在 iMac 上找到的那种。让我们过一遍 Bootstrap 4 中每个列类的细微差别。

超小

最小的网格类使用命名模式.col-xs-#，其中-#等于从 1 到 12 的数字。记住，在 Bootstrap 中，你的行必须分成若干列，这些列的总数加起来必须是 12。这个例子包括.col-xs-6或.col-xs-3。超小列类用于针对最大宽度为 544 像素的移动设备。

小

小列类使用 .col-sm-# 的语法模式，一些例子包括 .col-sm-4 或 .col-sm-6。它针对分辨率大于 544 像素但小于 720 像素的设备。

中等

中等列类使用类似于 .col-md-# 的命名模式，一些例子包括 .col-md-3 或 .col-md-12。这个列类适用于大于 720 像素且小于 940 像素的设备。

大

大列类再次使用 .col-lg-# 的命名模式，一些例子包括 .col-lg-6 或 .col-lg-2。这个列类针对大于 940 像素但小于 1140 像素的设备。

超大

最终和新的列类是超大的，其语法为 .col-xl-#，例子包括 .col-xl-1 或 .col-xl-10。这个列类选项适用于所有大于或等于 1140 像素的分辨率。

选择列类

这是一个好问题。在所有类选项中，很难决定使用哪一个。如果你正在构建一个移动应用，那么你可能会想坚持使用超小或小列类。对于平板电脑，你可能想使用中等。如果你的应用的主要用户将在台式电脑上，那么使用大或超大类。但是，如果你正在构建一个响应式网站并且需要针对多个设备，那么情况会怎样？如果是这种情况，我通常建议使用中等或大列类。然后，如果你有一个组件需要针对特定分辨率进行额外关注，你可以根据需要调整使用更大或更小的类。

创建一个简单的三列布局

假设我们正在构建一个简单的响应式网站，并且我们需要为我们的模板创建一个三列布局。以下是你应该有的标记：

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div>

如你所见，我在我的行 <div> 内插入了三个 <div>，每个都带有 .col-md-4 类。对于具有 768 像素或更高分辨率的设备，你会看到一个这样的三列布局：

创建一个简单的三列布局

现在，如果你在一个分辨率小于 768 像素的设备上查看这个相同的布局，每个列的宽度都会变为 100%，列会堆叠在一起。这种为较小屏幕的布局变化看起来是这样的：

创建一个简单的三列布局

那很好，但如果我们想为较小设备的列设置不同的布局而不是将它们都设置为 100% 宽度怎么办？可以通过混合列类来实现这一点。

为不同设备混合列类

给我们每个列 <div> 添加额外的类将允许我们针对不同设备的网格布局。让我们考虑我们之前的三列布局，但这次，我们想这样布局：

  • 前两列应该是布局的 50%。

  • 第三列应扩展到布局的 100%，并且位于前两列之下。

要实现这种布局，我们将混合一些不同的列类。以下是你的标记应该看起来像这样：

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div>

我给前两个列<div>添加了.col-xs-6类。现在，如果我们的设备分辨率小于 768 像素，前两个列将被设置为 50%的宽度。对于第三列，我使用了.col-xs-12类，这将使第三列换行并设置为布局宽度的 100%。在较小设备上的布局将看起来像这样：

为不同设备混合列类

这只适用于布局小于 768 像素的设备。如果你使用最新的代码查看这个网格，在更大的设备上，它仍然会显示为水平排列的三等分列。

如果我想偏移一列怎么办？

可能你的布局需要你将一些列偏移，并在内容开始之前留出一些水平空白空间。这可以很容易地使用 Bootstrap 的偏移网格类来实现。命名约定与常规列类类似，但我们需要添加偏移关键字，例如：.col-lg-offset-#。一些例子包括.col-lg-offset-3或.col-md-offset-6。让我们以前面的三列网格为例，但移除第一列。然而，我们希望第二列和第三列在布局中保持原位。这需要我们使用偏移网格类。以下是你的标记应该看起来像这样：

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div>

注意

注意我移除了第一个列<div>。我还给第二个列的<div>添加了类.col-md-offset-4。一旦你这样做，你的布局应该看起来像这样。

你看，你已经通过移除第一个列并将其他两个列滑动过来成功偏移了列：

如果我想偏移一列怎么办？

这就结束了本章剩余部分你需要了解的 Bootstrap 网格基础。现在你对网格的工作原理有了很好的理解，让我们继续使用网格类来编写我们的博客主页布局代码。

编写博客主页代码

现在你已经很好地掌握了如何使用 Bootstrap 4 网格，我们将编写我们的博客主页代码。这个页面将包括帖子流、侧边栏和页面底部的时事通讯注册表单部分。让我们首先从我们在第 1 课“设置我们的第一个博客项目”中编写的代码开始，复制整个目录。将文件夹重命名为“第 3 课：处理布局或 Bootstrap 布局”。

注意

记住，我们接下来使用的是常规网格，而不是 Flexbox 网格。确保你使用的是bootstrap.min.css的默认构建版本。如果你简单地复制第二章的代码，那么你将拥有正确的文件配置。

编写 index.ejs 模板

好消息！由于我们在一开始就设置了 Harp 项目，现在我们可以重用其中的一些代码来构建我们的博客主页。我们不需要更新 JSON 文件和头部或尾部部分。唯一需要修改的文件是index.ejs。在文本编辑器中打开该文件，粘贴以下代码以开始：

<div class="container"> 
  <!-- page title //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <h1>Blog</h1> 
    </div> 
  </div> 
  <!-- page body //--> 
  <div class="row m-t-3"> 
    <div class="col-md-8"> 
      <!-- blog posts //--> 
    </div> 
    <div class="col-md-4"> 
      <!-- sidebar //--> 
    </div> 
  </div> 
  <!-- mailing list //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <!-- form //--> 
    </div> 
  </div> 
</div>

这里有几个不同的操作，让我一一为你解释：

  • 我不想要全宽布局，所以我决定使用.container类来包裹我的模板布局。

  • 我创建了三个不同的行，一个用于我们的页面标题，一个用于页面内容（博客源和侧边栏），还有一个用于邮件列表部分。

  • 行<div>上有些类我们之前没见过，比如m-t-3。我将在下一节中解释这些类的作用。

  • 由于我想让我的博客在所有尺寸的设备上都能阅读，我决定使用中等尺寸的列类。

  • 页面标题列设置为.col-md-12，因此它将扩展到布局宽度的 100%。

  • 我将第二行，即包含我们大部分页面内容的行，分为一个两列网格。第一列将占用布局宽度的 2/3，使用col-md-8类。第二列，我们的侧边栏，将占用布局宽度的 1/3，使用col-md-4类。

  • 最后，第三行将包含邮件列表，它也使用了col-md-12类，并将扩展以填充布局的整个宽度。

我们博客主页的网格基本布局现在已经完成。然而，让我们回顾一下我添加到行<div>中的那些新 CSS 类。

使用间隔 CSS 类

Bootstrap 4 中新增的一个新实用工具是间隔类。它们很棒，因为它们提供了一个简单、模块化的方式来为你的布局添加额外的垂直间隔，而不必为每个区域编写自定义 CSS 类。间隔类可以应用于 CSS 的margin和padding属性。定义类的基模式如下：

{property}-{sides}-{size}

让我们更详细地分解一下这是如何工作的：

  • property等于margin或padding。

  • sides等于你想要添加边距或填充的盒子的边。这用单个字母表示：t代表顶部，b代表底部，l代表左边，r代表右边。

  • size等于你想要添加的边距或填充量。范围是 0 到 3。将大小值设置为 0 实际上会移除元素上现有的任何边距或填充。

为了更好地理解这个概念，让我们构建几个间隔类。假设我们想要给一个大小值为 1 的行添加一些顶部边距。我们的类将看起来像这样：

.m-t-1

应用到实际的行<div>上，类将看起来像这样：

<div class="row m-t-1">

作为第二个例子，假设我们想要给一个值为 2 的div添加一些左边距。当与行<div>结合时，这个组合将看起来像这样：

<div class="row p-l-2">

你开始看到在布局和组件周围添加间隔是多么简单了吗？

注意

空间类可以用于任何类型的元素，而不仅仅是 Bootstrap 网格。

现在你已经了解了这些类是如何工作的，让我们再次查看我们的博客主页模板。在这种情况下，我们的 <div> 看起来是这样的：

<div class="row m-t-3">

在模板的三个部分，我决定使用这些类，并且它们都是顶部边距，大小值为三。保持这些一致性是个好主意，因为当你完成时，这将导致一个视觉上吸引人的布局。这也会使你在设置页面时进行数学计算变得稍微容易一些。现在我们已经审查了整个主页布局，我们需要对其进行测试。

测试博客主页布局

让我们在浏览器中测试一下，确保它看起来是我们想要的。在我们能够这样做之前，我们需要用 Harp 编译我们的代码。再次打开终端，导航到我们为这一章代码创建的项目目录。运行 harp compile 命令，这里再次列出，以防你忘记：

$ harp compile

这应该没有错误地运行；然后，我们可以启动网络服务器来查看我们的页面。这是再次运行网络服务器的命令：

$ harp server

服务器现在已经启动，打开网页浏览器，在 URL 栏中输入 http://localhost:9000 以显示博客主页。以下是你的页面应该看起来像这样：

测试博客主页布局

哎呀，这看起来不太对。你可以看到页面标题，但我们看不到任何列。哦，是的！我们需要填写一些内容，以便显示列。让我们为了演示目的添加一些占位文本。在后面的章节中，我将介绍如何编写我们想要在这个页面上看到的实际组件。这一章只是关于设置我们的布局。

添加一些内容

回到你的文本编辑器中的 index.ejs 并添加一些占位文本。首先进入主内容区域的第一列，输入如下内容：

<div class="col-md-8"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>

如果你正在寻找一种快速获取 HTML 格式填充文本的方法，请访问 html-ipsum.com/ 。

接下来，转到侧边栏列 <div> 并添加相同的段落文本，如下所示：

<div class="col-md-4"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>

最后，下拉到邮件列表 <div> 并再次添加相同的段落内容。它应该看起来像这样：

<div class="col-md-12"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>

现在我们已经向页面主体添加了一些实际内容，让我们重新编译项目并再次启动网络服务器：

注意

使用 Harp，你实际上不必在每次进行的小改动后都重新编译。你还可以在服务器运行时更改你的文件，并且它们将被浏览器拾取。定期编译是个好习惯，以防你在编译时遇到错误。这将使解决潜在问题更容易。

一旦服务器启动并运行，返回你的浏览器并刷新页面。现在你的布局应该看起来像这样：

添加一些内容

哈哈！我们现在可以看到我们添加的列和占位文本。目前页面可能看起来不太吸引人，但重要的是要验证你的列布局是否正确。

关于移动设备呢？

我们需要考虑我们的布局在移动设备和较小屏幕分辨率下的表现。我使用了中等网格布局类，所以任何小于 720 像素的设备都将有一个调整后的布局。调整浏览器窗口的大小，使其更小以触发媒体查询，你会看到所有的列都将调整到容器宽度的 100%。看起来是这样的：

关于移动设备呢？

我打算保持我们的博客布局相当简约，所以我对此布局没有问题。在这个格式中，侧边栏将滑入主要博客帖子流下方。实际上，我对这个设计并不那么热衷，所以我将完全隐藏侧边栏，当你在较小设备上查看博客时。

使用响应式实用类

响应式实用类允许你根据屏幕分辨率大小有选择地隐藏<div>或组件。这对于创建以移动端优先的 Web 应用来说很棒，因为在很多情况下，你可能想要隐藏一些在手机或平板上表现不佳的组件。移动应用设计通常意味着更简单、更简约的体验，使用响应式实用类将允许你实现这一点。在文本编辑器中打开index.ejs，然后向下到侧边栏<div>，然后在你的代码中添加.hidden-md-down类：

<div class="col-md-4 hidden-md-down">

添加这个类将在屏幕分辨率小于 720 像素时从浏览器中隐藏<div>。确保你的列类，在这种情况下是-md，与隐藏类匹配。现在，如果你再次缩小浏览器窗口，你会注意到侧边栏<div>将消失。

你可以在项目中使用许多响应式实用类。对于每个列类名都有一个-down版本。如果你希望在大分辨率下隐藏某些内容，你也可以使用-up版本。该类的示例包括.hidden-lg-up或.hidden-xl-up。要了解更多关于响应式实用类的信息，请查看 Bootstrap 文档中的页面v4-alpha.getbootstrap.com/layout/responsive-utilities/。

这就完成了我们博客主页的网格布局。在我们学习 Bootstrap 4 中的内容类之前，让我们设置其他我们将为博客构建的页面的布局网格。

编码额外的博客项目页面网格

在我们为联系和单篇博客页面创建新模板之前，我们需要更新一些 Harp 项目文件。让我们更新这些文件，然后我们将转向页面模板。

更新新页面用的 _data.json

记得在几章之前我们学习了如何编写_data.json文件，并为我们的每个模板创建了一个页面标题变量？我们需要通过为每个新页面提供pageTitle变量的值来更新此文件。在文本编辑器中打开_data.json；你可以在博客项目目录的根目录中找到该文件。一旦文件打开，插入以下代码。整个文件应如下所示：

{ 
   "index": { 
      "pageTitle": "Home" 
   }, 
   "contact": { 
      "pageTitle": "Contact" 
   }, 
   "blog-post": { 
      "pageTitle": "Blog Post" 
   } 
}

最初，我们只包括了index文件。我添加了两个条目，一个用于联系页面，一个用于博客帖子页面。我为每个页面的pageTitle变量输入了一个值。就这么简单。保存 JSON 文件，然后你可以关闭它。

创建新的页面模板

现在，_data.json已经更新，我们需要创建实际的页面模板 EJS 文件，就像我们处理index一样。在你的文本编辑器中创建两个新文件，并将它们保存为contact.ejs和blog-post.ejs。目前，只需将它们留空，我们将在下一步中填充它们。模板现在已设置好，准备好编写代码。目前，我们的两个新页面将使用与index文件相同的_layout.ejs文件，因此不需要创建更多布局。让我们开始编写联系页面模板。

编写联系页面模板

在你的文本编辑器中打开你刚刚创建的contact.ejs文件。让我们通过设置页面标题来开始模板。将以下代码输入到文件中：

<div class="container"> 
  <!-- page title //--> 
  <div class="row m-t-3"> 
    <div class="col-lg-12"> 
      <h1>Contact</h1> 
    </div> 
  </div> 
</div>

让我们分解一下这里代码中发生的事情：

  • 我使用一个带有.container类的<div>打开了文件。

  • 接下来，我添加了.row <div>，并添加了相同的m-t-3间距类，以匹配博客主页。

  • 我添加了一个具有.col-md-12类的<div>列。由于这是我们页面标题，我们希望它扩展到布局的宽度。

  • 最后，我添加了一个带有我们联系页面标题的<h1>标签。

添加联系页面主体

接下来，让我们插入联系页面主体的网格布局。在页面标题代码之后，插入以下网格代码：

<!-- page body //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </div> 
  </div>

让我们回顾一下页面主体的代码：

  • 我为页面主体打开了一个新的<div>行。它也有相同的m-t-3间距类，以保持一致的垂直间距。

  • 我再次使用了col-md-12列类，因为联系页面布局将填充我们容器的整个宽度。

  • 我现在添加了一些填充文本，以便我们可以验证页面布局是否正确。

在我们完成之前，让我们为我们的邮件列表部分添加一行。我希望这个部分在博客的每一页都可用。这个部分的网格代码将与我们在页面主体中使用的标记相同。以下是参考示例：

<!-- mailing list //--> 
<div class="row m-t-3"> 
  <div class="col-md-12"> 
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
  </div> 
</div>

由于此代码与页面主体相同，我不会再次分解它。我们的联系页面布局现在已完成。请确保保存文件，然后在我们移动到博客帖子页面之前测试它。

再次打开您的终端并导航到博客项目的根目录。一旦到达那里，运行harp compile命令，然后运行 Harp 服务器命令以启动本地 Web 服务器。打开您的网络浏览器并输入以下 URL 以预览页面：http://localhost:9000/contact.html。

您的联系页面应该加载并显示页面标题和两行填充文本。它应该看起来像这样：

添加联系页面正文

我们的联系页面网格现在已完成。在我们开始创建博客文章模板之前，让我们看一下联系模板的所有代码：

<div class="container"> 
  <!-- page title //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <h1>Contact</h1> 
    </div> 
  </div> 
  <!-- page body //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </div> 
  </div> 
  <!-- mailing list //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </div> 
  </div> 
</div>

编码博客文章模板

返回您的文本编辑器并打开之前创建的blog-post.ejs文件。像我们的联系页面模板一样，让我们首先设置页面标题部分的代码。将以下代码输入到博客文章模板文件中：

<div class="container"> 
  <!-- page title //--> 
  <div class="row m-t-2 m-b-2"> 
    <div class="col-lg-12"> 
      <h1>Post Title</h1> 
    </div> 
  </div> 
</div>

如您所见，此代码几乎与联系页面相同。有两个小的差异我将为您指出：

  • 我已经更改了行<div>上的间隔类。在未来的章节中，我们将在页面标题周围添加一些不同的组件，所以我已经调整了垂直间隔以允许它们。我使用相同的顶部边距间隔，但将其设置为 2。我添加了一个带有.m-b-2类的第二个底部边距间隔，值为 2。将-t切换到-b将应用底部边距而不是顶部边距。

  • 我已经将<h1>标签中的页面标题更改为Post Title。

添加博客文章功能

我们的博客文章正文将与博客主页模板有一些不同的元素。在页面标题之后，我将插入一个功能区域，该区域将用于未来章节中的图像或轮播。现在，让我们只是将网格列和一些用于测试的填充文本放入其中。在页面标题部分之后输入以下代码：

<!-- feature //--> 
<div class="row"> 
  <div class="col-md-12"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
  </div> 
</div>

这是一个非常简单的部分。注意row <div>上没有间隔类，因为我们已经在页面标题部分添加了底部边距。我插入了一个全宽col-md-12列类，这样功能就可以扩展到布局的宽度。

添加博客文章正文

现在我们已经添加了博客文章功能部分，让我们添加模板的实际正文部分。这个部分将使用与我们的博客主页相同的布局。它将是一个两列布局，第一列宽度为 2/3，侧边栏为布局的 1/3。在功能部分之后插入以下代码：

<!-- page body //--> 
<div class="row m-t-2"> 
  <div class="col-md-8"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
   </div> 
   <!-- sidebar //--> 
   <div class="col-md-4 hidden-md-down"> 
    <p>sidebar</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
  </div> 
</div>

让我们分析一下这里代码中发生的事情：

  • 行<div>添加了m-t-2间隔类，以提供一些垂直间隔

  • 我使用相同的col-md-8和col-md-4列类来设置布局

  • 我还在侧边栏<div>上使用了hidden-md-4类，这样这个部分在较小分辨率的设备上就不会可见

  • 最后，我添加了一些用于测试的临时填充文本

将邮件列表部分转换为部分

From your text editor, create a new file called _mailing-list.ejs and save it to the partial directory in the root of your blog project. Once the file is saved, insert the following code into it:

<div class="row m-t-3"> 
  <div class="col-md-12"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
  </div> 
</div>

现在回到博客帖子模板文件，在邮件列表部分应该出现的地方插入以下代码行：

<%- partial("partial/_mailing-list") %>

记得对索引和联系模板做同样的事情。删除硬编码的邮件列表，并用前面的部分行替换它。

这标志着博客帖子模板设置的完成。在我们进入下一章之前，让我们先测试一下，以确保新的邮件列表部分正常工作。返回终端，从根目录编译您的项目。运行 Harp 服务器命令，然后访问以下 URL：http://localhost:9000/blog-post.html。

如果一切按计划进行，您的博客帖子页面应该看起来像这样：

将邮件列表部分转换为部分视图

确保您不要忘记在浏览器中测试索引和联系页面模板，以确保邮件列表部分正常工作。这标志着博客帖子模板的设计布局完成。现在，我们的所有模板都已准备就绪，但在我们进入下一章关于内容组件之前，让我们回顾一下我们已经学到的内容。

摘要

本章详细解释了 Bootstrap 布局网格，如何使用它，以及如何构建一个示例项目。我们首先学习了 Bootstrap 容器、container-fluid 和行类的基础知识。接下来，我们学习了所有 Bootstrap 列类的区别。在列之后，我们涵盖了更多高级主题，如列偏移、间距和响应式实用工具。一旦你对网格有了坚实的理解，我们就编写了剩余的页面布局，这些布局我们将用于本书的其余部分。现在，我们已经一切就绪，我们将开始使用 Bootstrap 内容类将实际内容添加到博客中。

评估

  1. 您可以使用哪两种容器类型为 Bootstrap 布局？

    1. .container-fluid

    2. .container

    3. i 和 ii 都有

    4. 以上都不是

  2. 在单个页面模板上使用多个容器是完全可行的。

    1. 正确

    2. 错误

  3. .col-xl-1 或 .col-xl-10：这个列类选项适用于所有大于或等于 ___________ 像素的分辨率。

    1. 940

    2. 1140

    3. 720

    4. 544

  4. Bootstrap 4 中 spacing 类的优势是什么？

    1. 为行和列添加空格

    2. 它们提供了一个简单、模块化的方式来为布局添加额外的垂直间距，而无需为每个区域编写自定义 CSS 类

    3. 可以应用于 CSS 的 margin 和 padding 属性

    4. ii 和 iii 都有

  5. 以下哪项是实用类的作用？

    1. 使用中等网格布局类，因此小于 720 像素 的任何设备都将有调整后的布局

    2. 多个容器使您的设计更模块化，更容易由多个用户管理

    3. 将盒子垂直排列，以便它们按升序堆叠在一起

    4. 实用类将允许您根据屏幕分辨率大小有选择地隐藏 <div> 标签或组件

第四章：内容处理

Bootstrap 4 中的内容组件是为最常用的 HTML 元素保留的，例如图片、表格、排版等。在本章中，我将教您如何使用构建任何类型网站或网络应用程序所需的全部 HTML 构建块。我们将从每个组件的快速概述开始，然后将其构建到我们的博客项目中。Bootstrap 4 附带了一个全新的 CSS 重置，称为 Reboot。它建立在 Normalize.css 之上，使您的网站在开箱即用的情况下看起来更好。在我们深入之前，让我们回顾一下在 Bootstrap 4 中处理内容组件时的 Reboot 基础知识。

Reboot 默认值和基础知识

让我们从回顾 Bootstrap 中使用内容组件时 Reboot 的基础知识开始这一章。Bootstrap 4 中内容组件的主要变化之一是从 em 单位切换到 rem 单位。rem 是 root em 的缩写，与常规的 em 单位略有不同。em 是相对于其包含的父元素字体大小的相对单位。这可能导致代码中出现累积问题，当您有一组高度嵌套的选择器时，这些问题可能难以处理。rem 单位不是相对于其父元素，而是相对于根或 HTML 元素。这使得确定将在屏幕上显示的实际文本或其他内容组件的大小变得容易得多。

box-sizing 属性在所有元素上全局设置为 border-box。这很好，因为它确保元素的声明宽度不会因为额外的边距或填充而超过其大小。

Bootstrap 4 的基本 font-size 为 16px，并在 html 元素上声明。在 body 元素上，font-size 被设置为 1rem，以便在使用媒体查询时轻松进行响应式类型缩放。

在 body 标签上还设置了全局的 font-family 和 line-height 值，以确保所有组件的一致性。默认情况下，background-color 在 body 选择器上设置为 #fff 或白色。

标题和段落

Bootstrap 4 中标题和段落的样式没有发生重大变化。所有标题元素都被重置，移除了 top-margin。标题的 margin-bottom 值为 0.5rem，而段落的 margin-bottom 值为 1rem。

列表

列表组件有三种变体：<ul>、<ol> 和 <dl>。每种列表类型都移除了 top-margin，并具有 1rem 的 bottom-margin。如果您在列表内部嵌套列表，则完全没有 bottom-margin。

第五章：预格式化文本

这种排版样式用于在网站上使用 <pre> 标签显示代码块。像之前的组件一样，它的 top-margin 已被移除，并且有一个 bottom margin 为 1rem。

表格

表格组件已稍作调整，以确保所有单元格中的文本对齐一致。<caption> 标签的样式也进行了轻微调整，以提高可读性。

表单

Bootstrap 4 中的表单组件要简单得多。大多数默认样式已被移除，以便组件更容易使用和自定义。以下是您应该注意的一些亮点：

  • <fieldset> 标签上的大多数样式都已移除。边框、填充和边距不再存在。

  • <legend> 标签已被简化，现在看起来更加简约。

  • <label> 标签现在设置为 display: inline-block 以允许添加边距。

  • 从以下标签中移除了默认边距：<input>、<select>、<textarea> 和 <button>。

  • <textarea> 现在只能垂直调整大小。它们不能水平调整大小，这通常会破坏页面布局。

这就涵盖了您需要了解的 Reboot 的关键元素。如果您想了解更多，请查看v4-alpha.getbootstrap.com/content/reboot/ 上的文档。

现在我们已经回顾了 Reboot CSS 重置，是时候真正开始介绍内容组件并将它们添加到我们的博客项目中。

注意

Bootstrap 4 中的内容类与版本 3 并没有太大不同。如果您精通 Bootstrap 3，您可能想在这个时候跳到下一章。

学习使用排版

在 Bootstrap 4 中，核心排版 HTML 标签没有发生重大变化。标题标签及其支持的 CSS 类仍然像以前一样工作。然而，有一些新的实用类可以与某些类型标签一起使用，以提供更多变体，例如标题和标题。在本书的后面部分，我们将使用许多类型标签和样式在我们的博客项目中。一些快速示例包括用于页面和帖子标题的标题标签，以及用于多个不同组件的列表。让我们首先回顾 Bootstrap 4 中的新显示标题类。

使用显示标题

正规的标题标签在页面流中表现良好，对于设置文章的层次结构至关重要。对于着陆页或其他显示类型模板，您可能需要额外的标题样式。这就是您可以使用新的显示标题类来创建稍微大一点的标题并应用一些不同样式的时刻。您可以使用四种不同的显示标题级别，它们的标记如下：

<h1 class="display-1">Display 1</h1> 
<h1 class="display-2">Display 2</h1> 
<h1 class="display-3">Display 3</h1> 
<h1 class="display-4">Display 4</h1>

请记住，你可以将这些类应用到任何你喜欢的标题标签上。display-1 将是最大的，随着你增加大小，标题会缩小。例如，display-4 将是选项中最小的。以下是浏览器中渲染的标题外观：

使用 display 标题

请记住，你可以将这些类应用到任何你喜欢的标题标签上。display-1 将是最大的，随着你增加大小，标题会缩小。例如，display-4 将是选项中最小的。

自定义标题

你可能想要给你的标题添加一些额外的上下文，你可以很容易地使用一些包含的 Bootstrap 4 实用类来实现这一点。通过使用上下文文本类，你可以将描述添加到标题，如下所示：

<h3> 
  This is the main title 
  <small class="text-muted">this is a description</small> 
</h3>

如你所见，我在我的标题标签内嵌套了一个 <small> 标签，并添加了一个 text-muted 类。这将使文本的描述部分看起来略有不同，从而创建一个很好的视觉效果：

自定义标题

使用 lead 类

Bootstrap 4 中新增的一个实用文本类是 lead 类。当你想要使一段文本突出显示时，可以使用这个类。它将字体大小增加 25%，并将文本的字体粗细设置为轻或 300。添加它非常简单，如下面的代码所示：

<p class="lead"> 
here's some text with the .lead class to make this paragraph look a bit different and standout. 
</p>

上述代码的输出将看起来像这样：

使用 lead 类

如你所见，这给文本带来了一种独特的样式。这可以用作博客文章的第一段或可能在着陆页顶部突出显示文本。

使用列表

Bootstrap 4 默认提供了一系列列表选项。这些 CSS 类可以应用于 <ul>、<ol> 或 <dl> 标签以生成一些样式。让我们从无样式列表开始。

编写无样式的列表

在某些情况下，你可能想要移除有序或无序列表默认的子弹或数字。当创建导航或可能只是想要创建一个不带项目符号的项目列表时，这可能很有用。你可以通过在包装列表标签上使用 list-unstyled 类来实现这一点。以下是一个基本的无样式无序列表的示例：

<ul class="list-unstyled"> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
</ul>

这将生成一个没有项目符号的列表，看起来如下所示：

编写无样式的列表

如果我们想要创建多级缩进列表，我们还可以在内部嵌套额外的列表。然而，请注意，list-unstyled 类只适用于列表的第一级。任何嵌套的额外列表都将有它们的项目符号或数字。这种变化的代码可能看起来像这样：

<ul class="list-unstyled"> 
  <li>item 
    <ul> 
      <li>child item</li> 
      <li>child item</li> 
      <li>child item</li> 
      <li>child item</li> 
     </ul> 
  </li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
</ul>

上述变化将看起来如下所示：

编写无样式的列表

现在，如果我们在一个浏览器中查看这个代码示例，你会注意到你将看到嵌套在父列表中的子列表的项目符号。

创建内联列表

无样式列表可能是你用得最多的一个。下一个最有用的类是 list-inline，它将每个 <li> 排成一行。这对于在网站或应用程序中创建导航或子导航非常有用。这个列表的代码几乎与上一个相同，但我们将其类名更改为 list-inline。我们还需要为每个 <li> 标签添加一个 list-inline-item 类。这是 Bootstrap 4 的一个新变化，所以请确保在以下代码中不要错过它：

<ul class="list-inline"> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
</ul>

如我所述，代码与无样式列表类似，但有一些变化。以下是它在浏览器中渲染后的样子：

创建内联列表

我认为你可以看到这将为你的项目设置水平导航提供一种轻量级的方式。让我们继续到最后一种列表类型，即描述列表。

使用描述列表

描述列表允许你为术语和描述创建水平显示。让我们看看一个基本列表的代码，然后对其进行分解：

<dl class="dl-horizontal"> 
  <dt class="col-sm-3">term 1</dt> 
  <dd class="col-sm-9">this is a description</dd> 

  <dt class="col-sm-3">term 2</dt> 
  <dd class="col-sm-9">this is a different description</dd> 

  <dt class="col-sm-3 text-truncate">this is a really long term name</dt> 
  <dd class="col-sm-9">this is one last description</dd> 
</dl>

这里有一些你需要注意的事情，让我为你一一解释：

  • 首先，你使用 <dl> 标签开始一个描述列表。它需要一个 dl-horizontal 类来触发列表组件样式。

  • 每一行由一个 <dt> 和 <dd> 标签组成。<dt> 代表术语，而 <dd> 代表描述。每个标签都应该有一个列类，并且是灵活的，具体取决于你如何布局你的列表。

  • 在第三行，你会注意到一个名为 text-truncate 的类。这个类将截断非常长的术语或文本，以免它们超出列的宽度。这对于长文本块来说是一个很好的技术。

现在我已经解释了描述列表的所有代码，让我们看看这个示例在浏览器中的样子：

使用描述列表

这就完成了你在 Bootstrap 4 中需要了解的所有排版样式。接下来，让我教你如何在 Bootstrap 中使用图像。

如何设置图像样式

Bootstrap 允许你通过使用 CSS 类来对图像进行一些有用的操作。这些操作包括：使图像响应式，将图像转换为形状，以及对齐图像。在下一节中，我将向你展示如何将这些技术应用到你的图像上。

使图像响应式

Bootstrap 4 带来一个新的响应式图像类，当开发网站或基于 Web 的应用程序时非常方便。当将类 img-fluid 应用到 <img> 标签上时，它将自动将图像的 max-width 设置为 100%，并将高度设置为 auto。结果将是一个根据设备视口大小缩放的图像。以下是代码的样子：

<img src="img/myimage.jpg" class="fluid-image" alt="Responsive Image">

这就像给图像添加那个类来触发响应式控制一样简单。一个建议：我建议将你的图像设置得比你认为需要的最大尺寸稍大一些。这样，图像将适合所有屏幕尺寸。

使用图像形状

Bootstrap 允许你将三种不同的形状样式应用到图像上：

  • img-rounded将为你的图像添加圆角

  • img-circle将裁剪你的图像成圆形

  • img-thumbnail将为图像添加圆角和边框，使其看起来像缩略图

与响应式图像一样，你只需要在<img>标签中添加一个 CSS 类来应用这些样式。你想要使用这些类的原因是避免在像 Photoshop 这样的应用程序中实际创建这些变体。使用代码应用这种简单的图像格式要容易得多。以下是每个变体的代码：

<img src="img/myimage.jpg" class="img-rounded" alt="Image Rounded"> 

<img src="img/myimage.jpg" class="img-circle" alt="Image Circle"> 

<img src="img/myimage.jpg" class="img-thumbnail" alt="Image Thumbnail">

一旦你编写了这些代码，在浏览器中应该看起来像这样：

使用图像形状

注意

我在这里使用的是我自己的图像；你需要在你的代码中替换图像。

使用 CSS 对齐图像

你可以应用到图像上的最后一个 Bootstrap 类是对齐类。它们将允许你将图像对齐到布局的左、右或中心。像之前的例子一样，你只需要在<img>标签中添加一个 CSS 类来应用你想要的对齐方式。对于左对齐和右对齐，你还可以在类名中提供列大小。最佳做法是使用与包含图像的列相同的尺寸。因此，如果你的图像显示在一个具有col-xs-4类的列中，那么在对齐类名中使用-xs单位。以下是使用额外小尺寸的左对齐和右对齐代码示例：

<img src="img/myimage.jpg" class="pull-xs-left" alt="Left Aligned Image">

使用 CSS 对齐图像

<img src="img/myimage.jpg" class="pull-xs-right" alt="Right Aligned Image">

使用 CSS 对齐图像

你可以使用最后一个图像对齐类来在布局中居中对齐图像。这个类的名字有点不同，就像你在这里看到的那样：

<img src="img/myimage.jpg" class="center-block" alt="Center Aligned Image">

使用 CSS 对齐图像

这就完成了关于你可以在 Bootstrap 布局中使用图像类的部分。接下来，我们将探讨使用 Bootstrap 4 编写和渲染表格。

编写表格

Bootstrap 4 中的表格与框架的前一个版本基本没有变化。然而，有一些新功能，比如逆色表格选项和响应式表格。让我们从基础知识开始，并在过程中构建新功能。

设置基本表格

Bootstrap 中的基本表格结构利用了几乎所有可用的 HTML 表格标签。表头被包裹在<thead>标签中，而主体被包裹在<tbody>标签中。这将允许我们在逆表格布局中添加额外的样式。现在，让我们看看如何在 Bootstrap 中组合一个基本表格：

<table class="table"> 
<thead> 
  <tr> 
    <th>first name</th> 
    <th>last name</th> 
    <th>twitter</th> 
  </tr> 
</thead> 
<tbody> 
  <tr> 
    <td>john</td> 
    <td>smtih</td> 
    <td>@jsmtih</td> 
  </tr> 
  <tr> 
    <td>steve</td> 
    <td>stevens</td> 
    <td>@stevens</td> 
  </tr> 
  <tr> 
    <td>mike</td> 
    <td>michaels</td> 
    <td>@mandm</td> 
  </tr> 
</tbody> 
</table>

如你所见，语法相当简单。唯一应用的类是根table类，它应用在<table>标签上。这需要应用到你在 Bootstrap 中使用的任何表格变体上。这将产生一个在浏览器中看起来如下所示的表格：

设置基本表格

如您所见，语法相当简单。唯一应用的类是<table>标签上的根table类。这需要应用于 Bootstrap 中您使用的任何表格变化。

反转表格

让我快速向您展示 Bootstrap 4 中的一个新表格类。如果我们将类table-inverse添加到<table>标签中，表格颜色将反转，背景为深色，文字为浅色。以下是您需要更改的代码：

<table class="table table-inverse"> 
  ... 
</table>

这段代码的轻微变化将生成如下所示的表格：

反转表格

如果您需要快速获取基本表格样式的变化，这是一个相当实用的技巧。

反转表格标题

如果您不想反转整个表格，可以使用thead-inverse类在<thead>标签上仅反转该行：

<table class="table"> 
<thead class="thead-inverse"> 
  ... 
</thead> 
  ... 
</table>

如果应用了这个变化，那么您的表格将如下所示：

反转表格标题

如果您在寻找一个更微妙的设计方案，这种方法可能更适合您。

添加条纹行

虽然不是 Bootstrap 4 的新特性，但table-striped类是我经常使用的。将此类应用于<table>标签将为您的表格添加斑马条纹，从表体中的第一行开始，并在所有奇数行上应用浅灰色背景色：

<table class="table table-striped">

使用这个类将生成如下所示的表格：

添加条纹行

现在我们的表格开始成形。通过几个类，我们可以得到一个吸引人的布局。让我们看看我们还能用表格做什么。

为表格添加边框

另一种经常使用的样式是为您的表格添加边框。这可以通过与条纹相同的方式进行。只需更改或添加另一个名为table-bordered的类到<table>标签中。在这个例子中，我将移除条纹并添加边框：

<table class="table table-bordered">

现在我们已经添加了边框并去掉了条纹，我们的表格应该如下所示：

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

为表格添加边框

重要的是要知道您可以组合表格类并使用多个。如果您想要一个带有条纹和边框的表格，可以轻松地通过包含这两个相应的类来实现。

为行添加悬停状态

为您的每一行表格添加悬停状态是可能的且很容易。要做到这一点，您只需将table-hover类添加到<table>标签中。当使用时，如果鼠标悬停在表格的行上，其背景色将改变以指示状态变化：

<table class="table table-hover">

在这里，我移除了其他表格类以向您展示基本的悬停表格选项。在浏览器中查看时，当鼠标悬停在行上时，表格应如下所示：

为行添加悬停状态

在某些情况下，你可能需要一个具有较小文本和压缩高度的表格。这可以通过向<table>标签添加table-sm类来实现。这将使表格在查看时看起来更紧凑：

<table class="table table-sm">

如果你选择使用这个类，你的表格应该看起来像这样：

为行添加悬停状态

创建较小的表格

这就完成了你可以通过简单 CSS 类应用的核心表格变体。在我们继续之前，还有一些关于表格的重要点需要讨论。

颜色涂层的表格行

在某些情况下，你可能想要将表格行的背景颜色设置为不同的颜色。这可以通过使用一些包含的上下文类轻松实现。你可以选择五种不同的颜色变体：

  • table-active 是悬停颜色，默认为浅灰色

  • table-success 用于正面操作，颜色为绿色

  • table-info 用于信息高亮，颜色为蓝色

  • table-warning 用于引起注意，颜色为黄色

  • table-danger 用于负面或错误操作，颜色为红色

前面的类可以应用于<tr>或<td>标签。如果我将这些颜色变体全部应用到单个表格上，它们看起来像这样：

颜色涂层的表格行

如你所见，这些类对于验证或突出显示需要更加突出的特定行非常有用。

使表格响应

使用 CSS 添加表格响应性从未容易过。幸运的是，Bootstrap 4 内置了一些支持，你可以轻松利用。要使表格响应，你只需将一个带有table-responsive类的<div>包裹在你的<table>周围：

<div class="table-responsive"> 
  <table class="table"> 
    ... 
  </table> 
</div>

如果你在一个小于 768px 视口的视图中查看表格，那么表格单元格将水平滚动，这样就可以全部查看。如果视口更大，你将看到与常规表格相比没有差异。

摘要

完成表格后，本章内容到此结束。希望这已经是一个很好的 Bootstrap 内容组件介绍，以及 Bootstrap 4 中这些类型组件的新功能的回顾。回顾一下，我们学习了：重置、排版、图片和表格。在下一章，我们将开始深入研究一些更复杂的组件，并将它们构建到我们的博客项目中。

评估

  1. 描述列表为用户提供什么允许？

    1. 描述列表允许用户为术语和描述创建水平显示

    2. 在网站或应用程序中创建导航或子导航的允许

    3. 当创建导航，或者你可能只是想创建一个没有项目符号的项目列表

    4. 以上皆非

  2. 当将 img-fluid 类应用于<img>标签时，图像会发生哪些变化？

    1. 它会自动将宽度设置为 100%

    2. 它会将高度设置为自动

    3. 它将自动将图片的最大宽度设置为 100%，高度自动调整

    4. 以上都不是

  3. 以下哪个是图片的形状样式？

    1. img-border

    2. img-thumbnail

    3. img-pixel

    4. img-round

  4. 以下代码片段将输出什么？评估

    1. 它使表格具有响应性

    2. 如果你将鼠标悬停在表格的某一行上，其背景颜色将改变以指示状态变化

    3. 将为你的表格添加斑马纹，从表格主体的第一行开始，并将所有奇数行的背景颜色设置为浅灰色

    4. 表格颜色将反转，背景为深色，文字为浅色

  5. 使用左右对齐，你还可以在class name内提供列大小。

    1. 是的

    2. 不是

第五章。玩转组件

Bootstrap 的真正力量在于框架中包含的组件。在本章中，我们将探讨许多新组件和现有组件。我会向您展示如何使用它们，然后我们将它们插入到我们的示例博客项目中，以便您可以在实践中看到它们。让我们直接从最常见的组件之一——按钮——开始。

使用按钮组件

按钮是 Bootstrap 中最常用的组件之一。在 Bootstrap 4 版本中，按钮组件的一些新选项包括轮廓变体、切换状态以及带有复选框和单选按钮的按钮组。在我们深入探讨这些之前，让我们回顾一下基本的按钮选项和配置。以下是一些使用按钮时需要记住的几点：

  • 无论你创建什么类型的按钮，它至少需要包含 .btn CSS 类

  • .btn 类可以附加到多个 HTML 标签上，例如 <button>、<a> 和 <input>，以渲染按钮

  • 有不同的 CSS 类用于创建不同大小和颜色的按钮

基本按钮示例

在我们继续更高级的配置之前，让我们先了解一下创建 Bootstrap 按钮的基础知识。如果您不熟悉 Bootstrap，您可能想跳过这一部分。Bootstrap 默认提供了六种不同的按钮颜色选项。以下是它们的名字和何时使用它们的说明：

  • 主要：在您的网站上使用的主要按钮。默认颜色为蓝色。

  • 次要：在你的网站上使用的备用或次要按钮。默认颜色为白色。

  • 成功：用于基于正面的操作。默认颜色为绿色。

  • 信息：用于信息按钮。默认颜色为浅蓝色。

  • 警告：用于基于警告的操作。默认颜色为黄色。

  • 危险：用于基于错误的操作。默认颜色为红色。

现在我已经解释了所有按钮变体，让我们看看按钮的代码：

<button type="button" class="btn btn-primary">Primary</button>

如您所见，我正在使用 <button> 标签，并向其添加了一些 CSS 类。第一个是 .btn 类，我提到您需要在所有按钮上包含它。第二个是 .btn-primary 类，表示您想使用 主要 按钮变体。如果您想使用不同的按钮样式，只需更改第二个类以使用相应的关键字。让我们看看所有按钮变体的代码：

<button type="button" class="btn btn-primary">Primary</button> 

<button type="button" class="btn btn-secondary">Secondary</button> 

<button type="button" class="btn btn-success">Success</button> 

<button type="button" class="btn btn-info">Info</button> 

<button type="button" class="btn btn-warning">Warning</button> 

<button type="button" class="btn btn-danger">Danger</button> 

<button type="button" class="btn btn-link">Link</button>

就这么简单。请注意，最后一行是一个 链接 按钮选项，我还没有讨论过。这个变体在浏览器中会显示为文本链接，但在您点击或悬停时将作为按钮操作。我不经常使用这个变体，所以最初我把它留出来了。如果您在浏览器中查看此代码，您应该看到以下按钮：

基本按钮示例

创建轮廓按钮

从 Bootstrap 4 开始，他们引入了一种新的按钮变体，它将生成轮廓按钮而不是填充按钮。要应用这种外观和感觉，您需要更改按钮类中的一个。让我们看一下以下代码的所有变体：

<button type="button" class="btn btn-primary-outline">Primary</button> 
<button type="button" class="btn btn-secondary-outline">Secondary</button> 
<button type="button" class="btn btn-success-outline">Success</button> 
<button type="button" class="btn btn-info-outline">Info</button> 
<button type="button" class="btn btn-warning-outline">Warning</button> 
<button type="button" class="btn btn-danger-outline">Danger</button>

如您所见，类名已更改；以下是它们映射到每个按钮变体的方式：

  • btn-primary-outline

  • btn-secondary-outline

  • btn-success-outline

  • btn-info-outline

  • btn-warning-outline

  • btn-danger-outline

基本上，您只需将 -outline 追加到默认按钮变体类名中。一旦这样做，您的按钮应该看起来像这样：

创建轮廓按钮

复选框和单选按钮

Bootstrap 4 中的一个新特性是能够将复选框和单选按钮转换为常规按钮。从移动设备的角度来看，这非常方便，因为触摸按钮比勾选复选框或点击单选按钮要容易得多。如果您正在构建移动应用或响应式网站，使用此组件会是一个好主意。让我们首先查看生成三个复选框按钮组的代码：

<div class="btn-group" data-toggle="buttons"> 
  <label class="btn btn-primary active"> 
    <input type="checkbox" checked autocomplete="off"> checkbox 1 
  </label> 
  <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> checkbox 2 
  </label> 
  <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> checkbox 3 
  </label> 
</div>

让我分解代码并解释这里发生了什么：

  • 要生成带有复选框的按钮组，您需要将复选框包裹在一个具有 .btn-group 类的 <div> 中。

  • 要允许按钮切换开启或关闭，您还需要将数据属性 data-toggle="buttons" 添加到 <div> 中。

  • 接下来，我们需要在 <label> 标签上使用按钮类将每个复选框转换为按钮。请注意，在第一个按钮上，我使用了 .active 类，这将使此复选框默认开启。这个类完全是可选的。

  • 您的基本复选框 <input> 标签嵌套在标签内。

请记住，由于这些是复选框，您可以切换多个选项的开启或关闭。以下是按钮组在浏览器中渲染时的样子：

复选框和单选按钮

如您所见，这渲染了一个看起来很漂亮的按钮组，它针对移动设备和桌面设备进行了优化。同时，请注意第一个复选框具有不同的背景颜色，因为它当前处于开启状态，这是由于应用了 .active 类的标签。与创建带有复选框的按钮组相同，我们也可以用相同的方法处理单选按钮。

创建单选按钮组

创建单选按钮组与复选框非常相似。让我们首先查看生成这种不同变体的代码：

<div class="btn-group" data-toggle="buttons"> 
  <label class="btn btn-primary active"> 
    <input type="radio" name="options" id="option1" autocomplete="off" checked> radio 1 
  </label> 
  <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2" autocomplete="off"> radio 2 
  </label> 
  <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3" autocomplete="off"> radio 3 
  </label> 
</div>

让我解释一下这段代码中发生了什么：

  • 与复选框一样，您需要将您的单选按钮集合包裹在一个具有相同类和数据属性的 <div> 中

  • <label> 标签和按钮类也以相同的方式工作

  • 唯一的区别是我们将复选框 <input> 类型替换为单选按钮

请记住，对于单选按钮，一次只能选择一个。在这种情况下，第一个是默认选中的，但您可以轻松地移除它。以下是按钮在浏览器中的样子：

创建单选按钮组

如您所见，按钮组是以与复选框相同的方式渲染的，但在这个例子中我们使用的是单选按钮。这应该是优化您在移动和桌面上的单选按钮组的预期结果。接下来，我们将基于我们关于按钮组的了解，但学习如何以其他方式使用它们。

注意

我们将在本章后面回顾并实际上将组件添加到我们的博客项目中。

使用按钮组

如果您是 Bootstrap 的新手，按钮组听起来就是这样。它们是一组按钮，水平或垂直连接以看起来像一个单一组件。让我们看看代码来渲染组件的最基本版本：

<div class="btn-group" role="group" aria-label="Basic example"> 
  <button type="button" class="btn btn-secondary">Left</button> 
  <button type="button" class="btn btn-secondary">Middle</button> 
  <button type="button" class="btn btn-secondary">Right</button> 
</div>

如您所见，我们有一个由 <div> 包围的常规按钮标签组，该 <div> 上有一个 .btn-group 类。至少，这就是您需要做的来渲染一个按钮组。在 <div> 标签上还有一些其他可选属性，即 role 和 aria-label。如果您需要担心可访问性，那么您应该包括这些属性，否则它们是可选的。在这段代码中还有一个小的变化，我决定使用 .btn-secondary 类来稍微改变一下按钮样式。让我们看看这在浏览器中会如何显示：

使用按钮组

如您所见，我们有一个由三个按钮组成的单一组件。这个组件通常用于次要导航，或者像我之前解释的那样在表单中使用。如果您想以垂直方式显示按钮，这也是可能的，只需稍作更改即可。

创建垂直按钮组

如果您想以垂直方式排列您组中的按钮，这实际上相当容易做到。您不需要更改 <button> 标签上的任何代码，只需更新包装 <div> 标签上的 CSS 类名即可。以下是您需要更改的代码：

<div class="btn-group-vertical"> 
  ... 
</div>

如果您对代码进行那个更改，那么相同的按钮组在浏览器中会显示如下：

创建垂直按钮组

可能有必要将左侧按钮标签改为顶部，将右侧按钮标签改为底部。然而，我保留了它们原来的样子，因为我想向您展示您可以通过更改一个 CSS 类简单地改变组的对齐方式。这涵盖了使用按钮组组件的基本知识；在下一节中，我将向您展示如何创建按钮下拉菜单。

编写按钮下拉菜单

将按钮渲染为下拉菜单的代码稍微复杂一些，但仍然相当容易上手。您将结合一个按钮标签和一个 <div>，其中包含嵌套的链接集合。让我们看看渲染基本下拉按钮所需的代码：

<div class="btn-group"> 
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown 
  </button> 
  <div class="dropdown-menu"> 
    <a class="dropdown-item" href="#">Link</a> 
    <a class="dropdown-item" href="#">Link Two</a> 
    <a class="dropdown-item" href="#">Link Three</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Link Four</a> 
  </div> 
</div>

好的，这里有几个要点。让我们逐一分析并解释下拉菜单的工作原理：

  • 整个组件需要被一个带有 .btn-group 类的 <div> 包裹。

  • 接下来，您插入一个带有一些按钮 CSS 类的 <button> 标签。就像在上一节中一样，一些其他属性是可选的。然而，包含此属性是一个好主意：aria-expanded。它可以设置为 false 或 true，控制页面加载时下拉菜单是打开还是关闭。在大多数情况下，您会希望将其设置为 false。

  • 在 <button> 标签之后，插入另一个 <div> 标签，该标签将包含在下拉菜单列表中出现的所有链接。请确保给这个 <div> 一个 .dropdown-menu 类。

  • 在第二个 <div> 中，您需要插入一组 <a> 标签，每个标签对应列表中的一个项目。每个 <a> 标签都需要一个 .dropdown-item 类，以便应用正确的 CSS 样式。

  • 如果您的链接数量很多，您可能还希望在下拉列表中插入一个分隔符。这是通过插入一个带有 .dropdown-divider 类的第三个 <div> 来实现的。

正如我提到的，这个组件稍微复杂一些，但在 Bootstrap 4 中，他们实际上简化了一些，使其更容易使用。让我们看看它在浏览器中的样子。在下面的屏幕截图中，我展示了下拉菜单展开的样子，以便您可以看到按钮和链接列表：

编写按钮下拉菜单

如您所见，我们有一个嵌套在其中的链接列表的下拉按钮。请注意，如果您想使用这个组件，确实需要在模板中包含 jQuery 和 bootstrap.min.js。您还可以轻松实现这个组件的其他一些变体，例如弹出菜单。

创建弹出菜单

在某些情况下，您可能希望菜单在按钮上方弹出而不是下方。您可以通过在组件的包装 <div> 上添加一个类来实现这一点。查看以下代码：

<div class="btn-group dropup"> 
  .. 
</div>

如您所见，我已经将 .dropup 类添加到了 <div> 上。这将使菜单出现在按钮上方，并且应该看起来像这样：

创建弹出菜单

如您所见，当菜单展开时，列表出现在按钮上方。

创建不同尺寸的下拉按钮

通过在下拉按钮的 <button> 标签上添加一个类，您可以调整触发器的尺寸。让我们看看小按钮和大按钮变体的代码：

<!-- large button //--> 
<div class="btn-group"> 
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Large button 
  </button> 
  <div class="dropdown-menu"> 
    ... 
  </div> 
</div> 

<!-- small button //--> 
<div class="btn-group"> 
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Small button 
  </button> 
  <div class="dropdown-menu"> 
    ... 
  </div> 
</div>

如果您在第一个示例中找到按钮标签，您会看到我为它添加了一个 .btn-lg 类。这个类将增加按钮大小，使其比默认值更大。看看代码的第二部分，再次找到 <button> 标签，您会看到它上面有一个 .btn-sm 类。这以相同的方式工作，只是按钮现在将比默认值更小。让我们看看这些按钮在浏览器中的渲染效果。

注意

.btn-lg 和 .btn-sm 类不仅限于按钮下拉组件。您可以在任何您喜欢的按钮组件变体上使用它们。

创建不同大小的下拉按钮

这就完成了使用按钮下拉组件的基本知识。在下一节中，我们将介绍一个更复杂的组件，即表单。

在 Bootstrap 4 中编写表单

如果您熟悉 Bootstrap 3，那么您会注意到 CSS 表单类在版本 4 中几乎相同。我认为新版本中表单的最大变化是每个表单组使用一个 <fieldset> 标签而不是 <div>。如果您是 Bootstrap 表单的新手，一个基本的表单组由一个标签和一个输入组成。它还可以包括帮助文本，但这不是必需的。让我们直接创建一个使用多个核心组件的通用表单。

设置表单

至少，一个表单需要由一个输入和一个按钮组成。让我们从基础知识开始，创建一个符合这些要求的表单。以下是开始编写的代码：

<form> 
  <fieldset class="form-group"> 
    <label>Text Label</label> 
    <input type="text" class="form-control" placeholder="Enter Text"> 
    <small class="text-muted">This is some help text.</small> 
  </fieldset> 
  <button type="submit" class="btn btn-primary">Submit</button> 
 </form>

让我解释一下代码中发生的事情：

  • 每个表单都需要从一个 <form> 标签开始。然而，这个标签上不需要特殊类。

  • 我在单个输入上插入了一个带有 .form-group 类的 <fieldset> 标签。这个 <fieldset> 模式将在您添加更多输入时重复使用。

  • 在 <fieldset> 内，我们有一个 <label>。同样，不需要添加特殊 CSS 类到 <label>。

  • 在标签之后，您需要插入表单 <input> 标签。在这种情况下，我使用的是文本输入。在这个 HTML 标签上，您需要添加一个 .form-control 类。Bootstrap 中的所有输入标签都需要这个类。占位文本是可选的，但为了可用性添加它是很好的。

  • 在 <fieldset> 的最后一行中，我包含了一个带有 .text-muted 类的 <small> 标签，这将使文本变得小且浅灰色。如果您想在表单输入中包含一些帮助文本，应使用此模式。

  • 关闭 <fieldset> 标签，然后您需要添加一个 <button> 标签作为表单的提交按钮。

  • 关闭 <form>，您就完成了。

完成代码审查后，打开您的网页浏览器，您的表单应该看起来像这样：

设置表单

您已经成功编写了第一个 Bootstrap 4 表单。让我们继续，我将解释如何使用 Bootstrap 的最新版本实现其他常见表单组件。

添加选择下拉菜单

让我们通过添加一个选择下拉菜单来构建我们的表单代码。在我们的文本输入之后插入以下代码：

<fieldset class="form-group"> 
  <label>Select dropdown</label> 
  <select class="form-control"> 
    <option>one</option> 
    <option>two</option> 
    <option>three</option> 
    <option>four</option> 
    <option>five</option> 
  </select> 
</fieldset>

让我们分解一下你需要注意的代码部分：

  • 注意，整个 <select> 都被一个具有 .form-group 类的 <fieldset> 包裹。这种模式应该为每个你添加的表单输入类型重复。

  • 在 <select> 标签上，需要添加一个 .form-control 类。

  • 除了这些，你应该像通常一样编码 <select>，遵循最佳 HTML 语法实践。

完成后，如果你在浏览器中查看表单，它现在应该看起来像这样：

添加选择下拉菜单

这样就完成了 <select> 下拉菜单的设置。接下来，让我们检查 <textarea> 标签。

在你的表单中插入一个文本区域标签

接下来，让我们将一个 <textarea> 标签插入到我们的表单中。在 <select> 菜单之后，添加以下代码：

<fieldset class="form-group"> 
  <label>Textarea</label> 
  <textarea class="form-control" rows="3"></textarea> 
</fieldset>

使用这个输入相当简单。像我们的其他示例一样，你需要使用一个具有 .form-group CSS 类的 <fieldset> 标签来包裹整个内容。在实际的 <textarea> 标签上，你需要添加 .form-control 类。就是这样；一旦完成，你的表单现在应该看起来像这样：

在表单中插入文本区域标签

现在文本区域已经完成，让我们继续到文件输入表单字段。

添加文件输入表单字段

从历史上看，文件输入表单字段一直是用 CSS 样式化的难题。我很高兴地说，在 Bootstrap 4 中，他们创造了一种新的方法，这是我迄今为止看到最好的。让我们首先在我们的表单中的 <textarea> 之后插入以下代码：

<fieldset class="form-group"> 
  <label>File input</label> 
  <input type="file" class="form-control-file"> 
  <small class="text-muted">This is some help text. Supported file types are: .png</small> 
</fieldset>

再次，这个表单字段是以与前面相同的方式构建的。然而，你需要注意的一个小变化是关于 文件输入 字段。在 <input> 标签上，你需要将 CSS 类更改为 .form-control-file。有一些特定的样式被应用来清理这个表单字段的视觉效果。一旦完成，你的表单应该看起来像这样：

添加文件输入表单字段

这样就完成了 文件输入 字段，剩下两个基本表单字段输入需要介绍。它们是单选按钮和复选框。让我们学习如何添加它们。

向表单中插入单选按钮和复选框

这些字段非常相似，所以我将它们分组在自己的部分中。这两个字段的代码与其他输入略有不同，我将现在概述。首先，让我们在我们的表单中的“文件输入”字段之后插入以下代码：

<div class="radio"> 
  <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
    Option 1 
  </label> 
</div> 
<div class="radio"> 
  <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
       Option 2 
  </label> 
</div> 

<div class="checkbox"> 
  <label> 
    <input type="checkbox"> Checkbox 
  </label> 
</div>

让我们先从单选按钮的代码开始，然后我们将转到复选框：

  • 字段不使用 <fieldset> 标签作为包装器。在这种情况下，你应该使用一个 <div> 并给它一个 .radio 或 .checkbox 类，具体取决于你想要使用哪种类型。

  • 对于这些字段，<label> 标签也将围绕 <input> 标签包裹，使所有内容都显示在同一水平线上。我们不希望文本标签掉到单选按钮或复选框下面。

  • 你不需要为这些字段中的任何一个在 <input> 上使用特殊类。

如你所见，这些字段的代码与我们之前学到的其他表单输入有所不同。不用担心，它们使用起来很简单，而且不需要记住很多 CSS 类。Bootstrap 4 中表单的一个非常好的变化是它们需要的 HTML 标记更少，因此更容易编写。最后，如果你在浏览器中查看我们的表单，它应该看起来像这样：

向表单中插入单选按钮和复选框

这就完成了所有核心表单字段的解释，这些字段是你在 Bootstrap 4 中需要知道如何使用的。在我们继续到一些更高级的表单字段和变体之前，为什么不把我们自己的表单添加到博客项目中呢？

将表单添加到博客联系页面

我知道，我知道。我说过我们会等到本章的结尾再构建组件到博客项目中。然而，我想你可能想从学习中休息一下，并将你学到的一些东西应用到你的项目中。让我们继续这样做，通过在联系页面上填写表单来实现这一点。

更新你的项目

让我们先打开我们的项目目录，找到名为 contact.ejs 的文件。在文本编辑器中打开该文件，我们将添加一些新的表单代码并删除一些填充代码。首先，找到页面中以下列 <div> 包裹的正文部分：

<div class="col-md-12">

在那个 <div> 中目前有一些填充文本。删除该文本，并用以下表单代码替换：

<form> 
  <fieldset class="form-group"> 
    <label>Email</label> 
    <input type="email" class="form-control" placeholder="Enter email"> 
    <small class="text-muted">We'll never share your email with anyone else.</small> 
  </fieldset> 
  <fieldset class="form-group"> 
    <label>Name</label> 
    <input type="text" class="form-control" placeholder="Name"> 
  </fieldset> 
  <fieldset class="form-group"> 
    <label>Message</label> 
    <textarea class="form-control" rows="3"></textarea> 
  </fieldset> 
  <button type="submit" class="btn btn-primary">Submit</button> 
</form>

我已经编写了一个基本的联系表单，你通常会在博客上看到。它包含电子邮件、姓名和消息字段，以及一个提交按钮。保存你的文件，然后在浏览器中预览你的项目。现在联系页面应该看起来像这样：

更新你的项目

这就完成了目前对联系页面的更新。在本书的后面，我们将向这个页面添加一些额外的组件。让我们回到学习 Bootstrap 4 中的表单，通过回顾一些额外的表单控件。

额外的表单字段

现在我们已经学会了如何构建基本的表单并将其添加到我们的项目中，让我们回顾一下一些更高级的表单字段和变体，你可以使用 Bootstrap 4 应用。我将首先向你展示如何以几种不同的方式布局表单。

创建内联表单

让我们先学习如何创建内联表单。这是一个你可能想在项目标题或登录页面中使用的布局。在这种情况下，我们将使表单的字段和按钮垂直排列在整个页面上。为了这个例子，让我们创建一个简单的登录表单，代码如下：

<form class="form-inline"> 
  <div class="form-group"> 
    <label>Name</label> 
    <input type="text" class="form-control" placeholder="Mike Smith"> 
  </div> 
  <div class="form-group"> 
    <label>Email</label> 
    <input type="email" class="form-control" placeholder="mike@gmail.com"> 
  </div> 
  <button type="submit" class="btn btn-primary">Login</button> 
</form>

在这个表单中发生了一些事情，所以让我为你解释一下：

  • 对于内联表单，我们需要在 <form> 标签中添加一个名为 .form-inline 的 CSS 类。

  • 你还会注意到 <fieldset> 标签已经被 <div> 标签替换。这样做是为了它们可以被设置为 display 为 inline-block，这在字段集中是不行的。

除了这两个区别之外，表单的编码方式与常规表单相同。一旦完成，你的表单在浏览器中应该看起来像这样：

创建内联表单

如果你像我一样，你可能会觉得文本输入旁边的标签有点丑。好消息是有一个简单的方法可以隐藏它们。

在内联表单中隐藏标签

那些标签存在的原因是为了无障碍性和屏幕阅读器。我们不想完全从代码中移除它们，但我们可以通过添加一个名为 .sr-only 的 CSS 类来隐藏它们。这个类代表 仅屏幕阅读器，因此只有在可访问的屏幕阅读器上查看时才会显示标签。以下是如何添加该 CSS 类的示例：

<label class="sr-only">Name</label>

在你将这个 CSS 类应用到表单中的所有标签之后，现在在浏览器中应该看起来像这样：

在内联表单中隐藏标签

这就完成了如何制作一个基本的内联表单。然而，如果你想在内联方式中包含其他字段怎么办？让我们看看我们如何添加复选框和单选按钮。

添加内联复选框和单选按钮

如果你想在内联表单中包含复选框和单选按钮，你需要对你的代码做一些修改。让我们首先来看一下复选框的代码。在表单中的最后一个文本输入之后插入以下代码：

<label class="checkbox-inline"> 
  <input type="checkbox" value="option1"> Remember me? 
</label>

这里有几个需要注意的地方：

  • 首先，复选框周围不再有 <div> 包裹

  • 你需要给复选框的 <label> 标签添加一个名为 .checkbox-inline 的类

一旦你这样做，保存你的表单，它应该在浏览器中看起来像这样：

添加内联复选框和单选按钮

现在我们已经添加了复选框，让我们看看使用单选按钮的示例。在复选框代码之后添加以下代码：

<label class="radio-inline"> 
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Yes 
</label> 
<label class="radio-inline"> 
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> No 
</label>

如你所见，这里的模式完全相同。每个单选按钮周围的 <div> 都已被移除。取而代之的是，每个单选 <label> 标签需要添加一个名为 .radio-inline 的 CSS 类。一旦完成这一步，你的表单应该看起来像这样：

添加内联复选框和单选按钮

这就完成了你需要了解的所有关于内联表单的内容。现在让我们继续学习一些可以应用到你的表单字段上的更多实用类操作。

改变输入的大小

Bootstrap 提供了一些方便的实用 CSS 类，你可以与表单字段一起使用，使它们以不同的尺寸显示。除了默认尺寸外，你可以选择以更大的或更小的尺寸显示你的字段。让我们看看渲染所有三种尺寸变体的代码：

<input class="form-control form-control-lg" type="text" placeholder="form-control-lg"> 
<input class="form-control" type="text" placeholder="Default input, No class required"> 
<input class="form-control form-control-sm" type="text" placeholder="form-control-sm">

要使用不同大小的输入，你只需在标签中添加一个额外的类：

  • 对于较大的输入，使用类 .form-control-lg

  • 对于较小的输入，使用类 .form-control-sm

  • 默认输入大小不需要额外的 CSS 类

这是每个版本在浏览器中的样子：

更改输入的大小

如你所见，较大的输入更高，并且有一些额外的填充。较小的输入较短，填充减少。这些类仅覆盖输入的垂直尺寸。现在让我们学习如何控制输入的宽度。

控制表单字段的宽度

由于 Bootstrap 是一个以移动设备优先的框架，表单字段被设计为可以扩展以适应其列的宽度。因此，如果你为你的列类使用了 .col-md-12，字段将扩展到布局的宽度。这可能并不总是你想要的，你可能只想让输入扩展到布局宽度的一半。

如果是这样，你需要将你的字段包裹在一个带有列类的 <div> 中以控制宽度。让我们看看一些示例代码来阐明这个点：

<div class="col-md-12"> 
    <input type="text" class="form-control" placeholder="full width"> 
</div> 
<div class="col-md-6"> 
    <input type="text" class="form-control" placeholder="half width"> 
</div>

在前面的代码中，我移除了一些标签和其他表单代码，以便更容易看到正在发生的事情。以下是你需要了解的要点分解：

  • 你需要将你的输入包裹在一个带有列类的 <div> 中

  • 第一个输入将因为 .col-md-12 类而扩展到布局的宽度

  • 第二个输入将只扩展到填充 50% 的布局，因为使用了 .col-md-6 类

让我们看看这将在实际浏览器中看起来如何：

控制表单字段的宽度

如你所见，第二个输入只扩展到一半的宽度。这就是如果你不想让输入填充整个页面布局时如何控制输入宽度。在讨论表单时，我想最后讨论的是输入字段的验证。

添加输入验证

Bootstrap 4 为输入字段提供了一些强大且易于使用的验证样式。验证样式用于在提交实际表单时显示错误、警告和成功状态。让我们看看渲染所有三个验证状态的代码：

<div class="form-group has-success"> 
  <label class="form-control-label">Input with success</label> 
  <input type="text" class="form-control form-control-success"> 
</div> 
<div class="form-group has-warning"> 
  <label class="form-control-label">Input with warning</label> 
  <input type="text" class="form-control form-control-warning"> 
</div> 
<div class="form-group has-danger"> 
  <label class="form-control-label">Input with danger</label> 
  <input type="text" class="form-control form-control-danger"> 
</div>

每个验证变体的标记与常规输入非常相似，只是增加了一些 CSS 类来应用正确的状态外观和感觉。让我们逐一了解你需要注意的每个更改：

  • 第一个输入是成功状态。需要将一个名为 .has-success 的类添加到包裹 <div> 中。

  • 每个 <label> 标签都需要添加一个名为 .form-control-label 的类。这是为了使标签颜色与状态颜色相匹配。

  • 成功输入需要添加一个名为 .form-control-success 的类。

  • 第二个输入是警告状态。包裹 <div> 需要添加一个名为 .has-warning 的类。

  • 警告输入也需要添加一个名为 .form-control-warning 的类。

  • 最后，最后一个输入是危险或错误状态。包装 <div> 需要添加一个名为 .has-danger 的类。

  • 危险输入也需要添加一个名为 .form-control-danger 的类。

让我们看看所有这些验证输入在浏览器中应该如何显示：

添加输入验证

如您所见，输入和标签的颜色与它们的状态相匹配。您还会注意到每个输入的右侧都有一个图标。这些图标在包含所需的 CSS 文件时自动添加。实际上在这里不需要使用任何图像，这真是太好了。这也就结束了您需要了解的所有关于 Bootstrap 4 中表单的内容。在下一节中，我将教您关于 Jumbotron 组件的内容。

使用 Jumbotron 组件

如果您是 Bootstrap 的新手，您可能会问自己 Jumbotron 组件是什么东西。Jumbotron 用于展示内容块，通常位于页面顶部。这是您在许多网站上都会看到的标准主要功能块。如果您需要比简单的页面标题更复杂的东西，Jumbotron 就是您想要使用的组件。让我们快速看一下创建此组件所需的代码：

<div class="jumbotron"> 
  <h1 class="display-3">Feature title</h1> 
  <p class="lead">This is a basic jumbrotron call to action</p> 
  <hr class="m-y-2"> 
  <p>This is some further description text for your main feature</p> 
  <p class="lead"> 
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> 
  </p> 
</div>

这里有一些新的 CSS 类需要我们回顾，以及一些我们已经学过的现有类。让我们分析一下代码中发生的事情：

  • Jumbotron 组件基于一个带有 .jumbotron CSS 类的 <div>。在这个 <div> 中，您几乎可以使用您喜欢的任何文本格式化标签。然而，有一些基本的东西您应该包括，以便使其看起来更好。

  • 您首先会看到一个带有 .display-3 类的 <h1> 标签。由于 Jumbotron 更像是一个“显示”组件，您可能希望使用本书之前学到的可选类来增加 <h1> 的大小。

  • 接下来，您将看到一个简单的 <p> 标签，用于功能的标语。在这个标签上，有一个名为 .lead 的类。这个类将基本字体大小增加 25%，并将 font-weight 设置为 300，这是一个较轻的重量。同样，这给了 Jumbotron 组件更多的“功能”外观和感觉。

  • 在标语文本之后，您将看到一个带有 .m-y-2 类的 <hr> 标签。如果您还记得，这是一个实用间距类。在这种情况下，-y 会为 <hr> 标签上方和下方添加 margin。

  • 接下来，我们还有一个带有一些附加描述文本的 <p> 标签。

  • 最后，我们有一个 <button> 被一个 <p> 标签包裹，以便在 Jumbotron 块中有一个行动呼吁的结论。请注意，使用 .btn-lg 类的用户将产生一个更大尺寸的按钮。

在您编写完 Jumbotron 组件后，在浏览器中应该看起来像这样：

使用 Jumbotron 组件

默认情况下，巨幕组件将扩展以适应其包含的列的宽度。在大多数情况下，您可能希望它跨越整个页面的宽度。然而，在某些情况下，您可能希望巨幕从浏览器的一边延伸到另一边，没有任何水平填充。如果是这种情况，您需要向主<div>添加.jumbotron-fluid类，并确保它位于 Bootstrap .container之外。让我们看看以下代码，以了解我的意思：

<div class="jumbotron jumbotron-fluid"> 
  <div class="container"> 
    <h1 class="display-3">Feature title</h1> 
      <p class="lead">This is a basic jumbrotron call to action</p> 
  </div> 
</div>

如您所见，.container <div>现在位于Jumbotron <div>内部。这就是如何移除该部分的水平填充。一旦完成，在浏览器中应该看起来像这样：

使用巨幕组件

这就完成了 Bootstrap 4 中巨幕组件的使用。接下来，让我们继续学习如何使用标签组件。

添加标签组件

标签组件用于为不同类型的内容添加上下文。一个很好的例子是在应用程序中的通知。您可能会使用标签来指示电子邮件应用程序中有多少未读电子邮件。另一个例子是在表格或列表中的项目旁边插入警告标签。像按钮一样，标签有多种颜色变体，以满足您在项目中的需求。让我们看看代码，以了解如何渲染基本的标签选项：

<span class="label label-default">Default</span> 
<span class="label label-primary">Primary</span> 
<span class="label label-success">Success</span> 
<span class="label label-info">Info</span> 
<span class="label label-warning">Warning</span> 
<span class="label label-danger">Danger</span>

您可能会注意到这里与按钮组件 CSS 类的相似之处。当使用标签时，您应该使用<span>标签作为组件的基础。当使用此组件时，以下是一些更重要的事实：

  • 标签组件的每个变体都需要在<span>标签上使用.label类

  • 默认标签使用.label-default类，颜色为灰色

  • 主要标签使用.label-primary类，颜色为蓝色

  • 成功标签使用.label-success类，颜色为绿色

  • 信息标签使用.label-info类，颜色为浅蓝色

  • 警告标签使用.label-warning类，颜色为黄色

  • 最后，危险标签使用.label-danger类，颜色为红色

编码完成后，在您的浏览器中应该看起来像这样：

添加标签组件

默认情况下，标签将是矩形，并且角落略微圆润。如果您想以药丸格式显示它们，可以通过向<span>标签添加.label-pill类来实现。以下是一个示例，以说明我的意思：

<span class="label label-pill label-default">Default</span> 
<span class="label label-pill label-primary">Primary</span> 
<span class="label label-pill label-success">Success</span> 
<span class="label label-pill label-info">Info</span> 
<span class="label label-pill label-warning">Warning</span> 
<span class="label label-pill label-danger">Danger</span>

如果您将此类添加到标签中，它们在浏览器中应该看起来像这样：

添加标签组件

这就完成了 Bootstrap 4 中的标签组件。接下来，我将教您如何使用警报组件。

使用警报组件

Bootstrap 中的 Alert 组件为典型的用途提供上下文信息，例如验证和一般信息，需要更加突出。像我们之前的组件一样，它有几个不同的变体，取决于你的需求。让我们先看看渲染不同警报选项所需的基本代码：

<div class="alert alert-success" role="alert"> 
  A success alert 
</div> 
<div class="alert alert-info" role="alert"> 
  An info alert 
</div> 
<div class="alert alert-warning" role="alert"> 
  A warning alert 
</div> 
<div class="alert alert-danger" role="alert"> 
  A danger alert 
</div>

创建警报所使用的类可以添加到任何块元素中，但为了演示目的，我们将使用<div>标签来实现。以下是你需要知道的关键点：

  • 任何 Alert 组件的实例都需要在<div>标签上使用.alertCSS 类

  • 你还需要第二个 CSS 类来指明你想要使用警报的哪个版本

  • 成功警报使用类.alert-success，颜色为绿色

  • 信息警报使用类.alert-info，颜色为蓝色

  • 警告警报使用类.alert-warning，颜色为黄色

  • 危险警报使用类.alert-danger，颜色为红色

设置好那些警报的代码后，在浏览器中它们应该看起来像这样：

使用 Alert 组件

这只是一个使用警报的基本示例。你可以做一些额外的事情来扩展这个组件，比如添加一个关闭按钮。

向警报添加关闭按钮

如果你想要使警报栏可关闭，你可以添加一个按钮来实现。为了包含链接，更新你的栏代码，如下所示：

<div class="alert alert-success" role="alert"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
  </button> 
  A success alert 
</div>

之前的警报栏代码没有变化，但你确实需要在警报消息之前添加一个按钮：

  • <button>元素需要名为.close的类才能显示

  • 你还需要包含data-dismiss属性，其值为alert。

  • &times;代码在浏览器中将被渲染为X

添加新代码后，你的警报栏应该看起来像这样：

向警报添加关闭按钮

现在你的警报栏有一个可关闭的X按钮，当你在你应用或网站中实现组件的功能时可以触发关闭。这完成了 Bootstrap 4 中的 Alert 组件。在下一节中，我将教你关于版本 4 中最好的新组件——Cards。

使用 Cards 进行布局

在我看来，Bootstrap 4 中最好的新特性是新的 Card 组件。如果你不熟悉 Cards，它们随着 Google Material Design 的发布而变得流行。它们是一个以移动端优先的内容容器，非常适合手机、平板电脑和桌面电脑。

在我们的博客项目中，我们将大量使用 Card 组件，所以让我们直接开始学习如何使用它们。查看以下代码以了解如何渲染一个基本的卡片：

<div class="card"> 
  <img class="card-img-top img-fluid"  src="img/image.jpg"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div>

这里有一些新的 CSS 类你需要了解，让我们逐一介绍：

  • 任何 Card 组件的实例都必须使用带有名为.card的 CSS 类的<div>标签。

  • 如果您想在卡片内包含图片，它应该放在这里。图片需要一个名为 .card-img-top 的类来在卡片顶部显示图片。虽然不是必需的，但我还建议您为图片添加 .img-fluid 类。这将使图片响应式，以便它将自动调整大小以匹配卡片的宽度。

  • 在图片之后，您需要开始一个新的 <div>，并给它一个名为 .card-block 的 CSS 类。这个卡片的部分将包含实际的文本内容。

  • 您的卡片首先应该有一个标题。使用带有 .card-title CSS 类的 <h4> 标签来创建这个部分。

  • 接下来，您可以使用 <p> 标签和 .card-text 类插入一段文本。如果您选择有多个段落，请确保每个段落都使用相同的类名。

  • 最后，我插入了一个主要的 <button>，这样用户就有东西可以点击来查看完整的内容。

在您完成编码后，它应该在您的浏览器中看起来像这样。注意，出于演示目的，我包含了我自己的图片，以便您可以看到它是如何工作的。您需要为您的项目提供自己的图片：

使用卡片进行布局

如您所见，这将渲染一个看起来整洁的小内容组件，您可以用许多不同的方式使用它。让我们继续学习一些其他可以自定义卡片组件的方法。

移动卡片标题

也许您想将卡片的标题移动到图片上方？这实际上非常简单，您只需将 <title> 标签移动到组件流中的图片之前即可，就像这样：

<div class="card"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
  </div> 
  <img 
  class="card-img-top img-fluid" 
  src="img/matt-lambert.jpg"> 
  <div class="card-block"> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div>

这里有一些您需要了解的事情：

  • 在这个卡片中现在有两个 <div class="card-block"> 实例。在单个卡片内重复使用这个部分是完全可行的。您会注意到标题标签被包裹在这个 <div> 内。这是必需的，以便在卡片中的标题周围应用适当的填充和边距。

  • 第二件事您需要注意是，标题标签在卡片布局中已经被移动到图片上方。

在进行这个更改后，您的卡片应该看起来像这样：

移动卡片标题

希望这展示了在卡片中处理不同内容是多么容易。让我们继续展示您可以做的其他一些事情。

改变卡片中的文本对齐方式

默认情况下，文本和元素在卡片中总是左对齐。但是，您可以非常容易地更改这一点。让我们创建第二个卡片，然后我们将居中一个并右对齐另一个。我将移除图片，以便代码更容易理解：

<div class="card"> 
  <div class="card-block text-xs-center"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div> 
<div class="card"> 
  <div class="card-block text-xs-right"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div>

这里没有太多变化，但让我们来看看有什么不同：

  • 首先，正如我提到的，我移除了图片以使代码更简单。

  • 在第一张卡片上，我添加了一个名为 .text-xs-center 的类，这将使卡片中的文本居中。

  • 在第二张卡片上，我添加了一个名为 .text-xs-right 的类，这将使所有内容右对齐。

这就是你需要做的全部。如果你在浏览器中查看它，它应该看起来像这样：

更改卡片中的文本对齐方式

所以，通过添加一个额外的 CSS 类，我们可以轻松地控制卡片中文本和元素的对齐方式。卡片是一个非常强大的组件，所以让我们继续学习如何自定义它们。

添加卡片标题

如果你想给你的卡片添加一个标题，这也很容易做到。查看这个代码示例，看看它是如何工作的：

<div class="card"> 
    <div class="card-header"> 
    Header 
  </div> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div>

通过添加新的代码部分，我们可以添加一个标题：

  • 在 .card-block 部分之前，插入一个新的 <div>，并给它一个名为 .card-header 的类

  • 在这个新的 <div> 中，你可以添加标题

保存你的文件，并在浏览器中查看，它应该看起来像这样：

添加卡片标题

这是一种非常简单的方法，可以将标题部分添加到你的卡片中。你可以用同样的方式添加页脚。让我们添加一些额外的代码来设置页脚：

<div class="card"> 
    <div class="card-header"> 
    Header 
  </div> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
  <div class="card-footer"> 
      footer 
  </div> 
</div>

页脚的设置与标题非常相似；让我们将其分解：

  • 这次，在 .card-block 部分下方，插入一个新的 <div>，并给它一个名为 .card-footer 的类

  • 在这个新的 <div> 中，插入你的页脚文本

再次保存文件，并在浏览器中查看，它应该看起来像这样：

添加卡片标题

如此简单，我们现在也包含了我们的卡片页脚。接下来，让我们学习一种为我们的卡片应用不同外观和感觉的方法。

反转卡片的配色方案

在某些情况下，你可能想要为你的卡片应用不同的外观和感觉，使其更加突出。Bootstrap 包含了一些 CSS 类，允许你反转配色方案。让我们看看应用这种样式的代码：

<div class="card card-inverse" style="background:#000;"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
  </div> 
</div>

再次，这种变化通过几个小的修改很容易应用：

  • 在具有 .card 类的 <div> 上，添加一个名为 .card-inverse 的第二个类。

  • 这只会反转卡片中的文本。你需要自己设置背景颜色。为了速度，我在演示代码中只做了内联 CSS 样式。我建议实际上在你的样式表中创建一个 CSS 类，这对于你的项目来说是一种更好的做法。

这就是你需要做的全部。一旦完成，你的卡片应该看起来像这样：

反转卡片配色方案

在这种情况下，你需要指定自定义的背景颜色。然而，Bootstrap 确实有一些背景颜色变体，如果你想要添加一个额外的 CSS 类，你可以使用它们。这些选项的命名约定与按钮和标签相同。让我们看看代码将是什么样子：

<div class="card card-inverse card-primary"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
  </div> 
</div> 
<div class="card card-inverse card-success"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
  </div> 
</div> 
<div class="card card-inverse card-info"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
  </div> 
</div> 
<div class="card card-inverse card-warning"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
  </div> 
</div> 
<div class="card card-inverse card-danger"> 
  <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some basic description text for your card should appear in this section.</p> 
  </div> 
</div>

这是一堆代码，但只有几处变化是从我们之前的卡片示例来的：

  • 我所做的一切只是给带有基础 .card 类的 <div> 添加了一个额外的 CSS 类。让我们在以下要点中逐一回顾。

  • 主要 卡片使用 .card-primary 类，颜色为蓝色。

  • 成功 卡片使用 .card-success 类，颜色为绿色。

  • 信息卡片使用.card-info类，颜色为浅蓝色。

  • 警告卡片使用.card-warning类，颜色为黄色。

  • 危险卡片使用.card-danger类，颜色为红色。

一旦您设置了上述代码，您的卡片在浏览器中应该看起来像这样：

反转卡片颜色方案

这就完成了您可以使用卡片组件进行的基调和高级样式。为什么我们不暂时放下学习，实际上在我们的博客项目中构建一些卡片呢。

在联系页面添加位置卡片

让我们通过向联系页面添加一个简单的卡片组件来重新进入我们的项目。在您的文本编辑器中重新打开contact.ejs，并找到我们最近更新过的包含联系表单的主体部分。找到该部分以下列出的列代码：

<div class="col-md-12"> 

.col-md-8 and add a new <div> with a class of .col-md-4 on it. When you're done, the body of the page code should now look like this:

<div class="col-md-8"> 
      <form> 
        <fieldset class="form-group"> 
          <label>Email</label> 
          <input type="email" class="form-control" placeholder="Enter email"> 
          <small class="text-muted">We'll never share your email with anyone else.</small> 
        </fieldset> 
        <fieldset class="form-group"> 
          <label>Name</label> 
          <input type="text" class="form-control" placeholder="Name"> 
        </fieldset> 
        <fieldset class="form-group"> 
          <label>Message</label> 
          <textarea class="form-control" rows="3"></textarea> 
        </fieldset> 
        <button type="submit" class="btn btn-primary">Submit</button> 
      </form> 
    </div> 
    <div class="col-md-4"> 
    </div>

现在列已经设置好了，让我们在我们的新列中插入一个卡片组件。将以下代码输入到布局的第二列中：

<div class="card"> 
  <div class="card-header"> 
    Address &amp; Phone 
  </div> 
  <div class="card-block"> 
    <ul class="list-unstyled"> 
      <li>Mike Smith</li> 
      <li>1234 Street Name</li> 
      <li>Vancouver, BC</li> 
      <li>Canada V7V 1V1</li> 
      <li>604.123.1234</li> 
    </ul> 
  </div> 
</div>

一旦您插入了卡片组件代码，保存您的文件并在浏览器中查看。它应该看起来像这样：

在联系页面添加位置卡片

现在联系页面开始呈现出更多的形状。在我们继续到下一个内容组件之前，让我们将卡片组件添加到几个其他页面上。

更新博客索引页面

现在我们已经涵盖了卡片组件，是时候为我们的博客索引页面设置主要布局了。设计将严重依赖于卡片组件，让我们开始吧。首先，在您的文本编辑器中打开index.ejs并找到页面部分的主体。左侧列将看起来像这样：

<div class="col-md-8">

在这个当前存在的<div>中有些填充文本。删除填充文本并插入以下卡片组件，这将是我们第一篇博客文章：

<div class="card"> 
  <img class="card-img-top img-fluid" src="img/image.jpg" alt="Card image cap"> 
  <div class="card-block"> 
    <h4 class="card-title">Post title</h4> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
    <a href="#" class="btn btn-primary">Read More</a> 
  </div> 
</div>

现在我们已经将第一张卡片添加到博客滚动列表中，让我们来分析一下发生了什么：

  • 我开始时包括了我几年前在 Nova Scotia 拍摄的照片。我给它添加了.img-fluid类，使其宽度拉伸到卡片。

  • 从那里，我按照之前教你的方式设置了卡片，但这次我添加了一些实际的博客内容。

让我们继续添加博客滚动列表的其余卡片组件代码。在左侧第一张卡片之后插入以下代码：

<div class="card"> 
  <div class="card-block"> 
    <h4 class="card-title">Post title</h4> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p>Pellentesque habitant morbi tristique...</p> 
    <a href="#" class="btn btn-primary">Read More</a> 
  </div> 
</div> 
<div class="card"> 
  <img class="card-img-top img-fluid" src="img/image.jpg" alt="Card image cap"> 
  <div class="card-block"> 
    <h4 class="card-title">Post title <span class="label label-success">Updated</span></h4> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
    <a href="#" class="btn btn-primary">Read More</a> 
  </div> 
</div> 
<div class="card"> 
  <div class="card-block"> 
    <h4 class="card-title">Post title</h4> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p>Pellentesque habitant morbi tristique senectus...</p> 
    <a href="#" class="btn btn-primary">Read More</a> 
  </div> 
</div>

这是一段很长的代码。填充文本只是用来给您一个想法。您可以随意删除它或用实际文本替换它。现在我们已经用足够的内容填满了左侧列，您的页面应该看起来像这样：

更新博客索引页面

现在主要博客滚动内容已经完成，让我们也添加右侧列的内容。

添加侧边栏

让我们通过添加侧边栏来为索引页面添加更多内容。我们也将在这里使用卡片组件，但这次是它的不同变体。回到index.ejs并从第二列删除填充文本。相反，插入以下卡片代码：

<div class="card card-block"> 
  <h5 class="card-title">Recent Posts</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div>

你会注意到在这个卡片中我使用了不同的变体，即列表组选项。要这样做，请按照以下步骤操作：

  • 在你的卡片内创建一个新的 <div>，并给它一个 .list-group 类。

  • 在内部，为你的列表中的每个项目插入一个带有 .list-group-item 类的 <button>。

完成后，保存你的文件，在浏览器中它应该看起来像这样：

添加侧边栏

如你所见，这将绘制一个看起来很棒的侧边栏列表组件。让我们通过在第一个卡片组件之后插入以下代码来填写侧边栏的其余部分：

<div class="card card-block"> 
  <h5 class="card-title">Archives</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div> 
<div class="card card-block"> 
  <h5 class="card-title">Categories</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div>

这将为你的博客项目侧边栏生成两个额外的列表组卡片组件。一旦全部完成，整个页面现在应该看起来像这样：

添加侧边栏

这就完成了在索引页面上使用卡片组件。我们需要用卡片组件设置的最后一个页面是我们的博客文章页面。

设置博客文章页面

索引页面是我们项目中所有博客文章的列表。我们需要设置的最后一个页面是博客文章页面，它只是我们项目中的一个单独的文章。打开你之前在书中创建的 blog-post.ejs 模板，让我们开始更新一些代码。转到页面主体部分，找到以下代码行：

<div class="col-md-8">

目前，你会在那个 <div> 中看到一些填充文本；让我们用以下代码替换它：

<div class="card"> 
  <div class="card-block"> 
    <p><small>Posted by <a href="#">Admin</a> on January 1, 2016 in <a href="#">Category</a></small></p> 
    <p>Pellentesque habitant morbi tristique senectus et...</p> 
    <p><code>&lt;p&gt;this is what a code sample looks like&lt;/p&gt;</code></p> 
    <p>Pellentesque habitant morbi tristique senectus et netus...</p> 
    <!-- pre sample start //--> 
    <h4>pre sample code</h4> 
    <pre>This is what code will look like</pre> 
    <!-- pre sample end //--> 
    <!-- image //--> 
    <h4>responive image</h4> 
    <p><img src="img/image.jpg" class="img-fluid" alt="Responsive image"></p> 
    <!-- table //--> 
    <h4>table</h4> 
    <table class="table"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">1</th> 
          <td>john</td> 
          <td>smith</td> 
          <td>@jsmith</td> 
        </tr> 
        <tr> 
          <th scope="row">2</th> 
          <td>steve</td> 
          <td>stevens</td> 
          <td>@steve</td> 
        </tr> 
        <tr> 
          <th scope="row">3</th> 
          <td>mike</td> 
          <td>michaels</td> 
          <td>@mike</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>

这段代码中有很多事情在进行。我加入了一些我们已经学过的其他组件，以便你可以看到它们在实际中的应用。卡片组件内部包含以下内容：

  • 文本、<code> 和 <pre> 标签

  • 表格

  • 图片

让我们也更新这个模板，使用与索引页面相同的侧边栏代码。从索引模板复制右侧列的代码，并将其粘贴到博客文章模板中的相同位置。

完成后，页面现在应该看起来像这样：

设置博客页面

如你所见，我们使用单个卡片组件来包含页面的所有内容。我们也使用了从索引页面复制过来的相同的卡片组件作为侧边栏。现在我们已经将卡片添加到所有页面模板中，让我们回到学习 Bootstrap 4 中的一些其他内容组件。

如何使用 Nav 组件

Bootstrap 中的 Nav 组件可以以几种不同的方式显示。组件的默认视图只是一个简单的无样式的链接列表。这个列表也可以转换成标签页或药丸，以组织你的内容和导航。让我们首先学习如何创建默认的 Nav 组件：

<ul class="nav"> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 1</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 2</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 3</a> 
  </li> 
</ul>

Nav 组件最基本版本是使用前面的代码构建的：

  • 该组件基于一个具有 .nav 类的无序列表

  • 列表中的每个 <li> 标签都需要一个 .nav-item 类。

  • 在 <li> 标签内部必须嵌套一个具有 .nav-link 类的 <a> 标签。

完成添加代码后，在浏览器中应该看起来像这样：

如何使用 Navs 组件

如我所说，这只是一个基本的未加样式的链接列表。你可以做的简单更改之一是将链接列表水平显示。要实现这一点，你只需要给 <ul> 标签添加一个名为 .nav-inline 的类，就像这样：

<ul class="nav nav-inline">

这将显示所有链接成一行。为什么我们不尝试一些更有趣的事情，比如将这个列表转换为标签。

使用 Nav 组件创建标签

通过在我们的代码中添加一些内容，将基本的列表转换为标签非常简单。看看这个示例：

<ul class="nav nav-tabs"> 
  <li class="nav-item"> 
    <a class="nav-link active" href="#">Link 1</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 2</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 3</a> 
  </li> 
</ul>

我对代码做了两个修改，现在让我们来回顾一下：

  • 在 <ul> 标签上，我移除了 .nav-inline 类并添加了 .nav-tabs。这将使列表以标签的形式显示。

  • 我接着给第一个链接添加了一个 .active 类，以便在页面加载时它成为选中的标签。

编写完代码后，在浏览器中应该看起来像这样：

使用 Nav 组件创建标签

就这样，你可以将列表渲染为一系列标签。接下来，你想要尝试的下一个变体是药丸。

创建药丸导航

将 Nav 组件的样式更改为药丸实际上非常简单。看看以下示例代码：

<ul class="nav nav-pills"> 
  <li class="nav-item"> 
    <a class="nav-link active" href="#">Link 1</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 2</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 3</a> 
  </li> 
</ul>

让我们分析一下这里的新变化。我对代码只做了一处修改。我从 <ul> 标签中移除了 .nav-tabs 类，并用 .nav-pills 类替换了它。这就是你需要做的唯一修改。

保存更改后的文件，在浏览器中应该看起来像这样：

创建药丸导航

上述示例是 Nav 药丸的默认显示。不过，你可以尝试另一种变体，即堆叠药丸。这种模式在侧边栏导航中很常见。要创建这个版本，更新以下代码行：

<ul class="nav nav-pills nav-stacked">

在这里，我简单地在 <ul> 标签上添加了一个 .nav-stacked 类来堆叠药丸。在浏览器中的样子如下：

创建药丸导航

这就完成了 Bootstrap 4 中的 Nav 组件。正如你所学的，使用简单的无序列表创建几种不同的导航样式非常容易。在下一节中，我们将回顾更复杂的导航组件，即 Navbar。

使用 Bootstrap Navbar 组件

Navbar 组件是 Bootstrap 的一个基本组件，经常被使用。在过去，这个组件需要相当数量的标记才能使其工作。我很高兴地报告，在 Bootstrap 4 中，他们简化了这个组件，使其更容易使用。让我们从一个基本的 Navbar 示例开始：

<nav class="navbar navbar-light bg-faded"> 
  <a class="navbar-brand" href="#">Navbar</a> 
  <ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
      <a class="nav-link" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">Page 1</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">Page 2</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">Page 3</a> 
    </li> 
  </ul> 
</nav>

你可能会注意到这里与 Nav 组件的一些相似之处。Navbar 使用了一些相同的代码，但你可以进一步扩展它，并将额外的组件组合进去。让我们先分析这个基本的示例：

  • Navbar 组件可以放在带有.container类的<div>内部或外部。如果您想让 Navbar 与浏览器边缘对齐，则不应将其包含在.container <div>内部。但是，如果您想应用默认的内边距和外边距，请将其放在<div>内部。在这个例子中，我将将其构建在容器外部。

  • Navbar 组件从 HTML5 的<nav>标签开始，该标签添加了以下 CSS 类。

  • .navbar是始终需要出现在组件上的默认类。

  • .navbar-light是您想要使用的组件颜色。您还可以选择其他一些变体。

  • .bg-faded是一个可以用来使背景变亮的实用类。这是一个可选类。

  • Navbar 内部的第一元素是品牌。品牌应该是您项目的标题。要渲染该元素，创建一个<a>标签并给它一个.navbar-brand类。此链接的锚文本应该是您项目的名称或网站名称。请注意，使用品牌是可选的。

  • Navbar 的核心部分是导航链接列表。这是使用无序列表创建的，类似于 Nav 组件。在这种情况下，您的<ul>标签应包含.nav和.navbar-nav类。

  • 嵌套的<li>和<a>标签应使用来自 Nav 组件的相同.nav-item和.nav-link类。

这将为您创建一个基本的 Navbar 组件。这是它在浏览器中的样子：

使用 Bootstrap Navbar 组件

现在您已经学会了如何构建基本的 Navbar，让我们学习如何进一步扩展该组件。

更改 Navbar 的颜色

在 Bootstrap 3 中，您可以反转 Navbar 的颜色方案。然而，在 Bootstrap 4 中，您有多个选项来为 Navbar 组件着色。要编辑的只是包裹组件的<nav>标签上的一些类。让我们看看不同颜色选项的代码：

<nav class="navbar navbar-inverse"> 
  ... 
</nav> 
<nav class="navbar navbar-primary"> 
  ... 
</nav> 
<nav class="navbar navbar-success"> 
  ... 
</nav> 
<nav class="navbar navbar-warning"> 
  ... 
</nav> 
<nav class="navbar navbar-info"> 
  ... 
</nav> 
<nav class="navbar navbar-danger"> 
  ... 
</nav>

如您所见，我们正在重用我们在其他组件中使用的颜色变体的关键词。让我们分解 Navbar 组件的每个变体：

  • .navbar-inverse将组件颜色设置为黑色和灰色

  • .navbar-primary将组件颜色设置为蓝色

  • .navbar-success将组件颜色设置为绿色

  • .navbar-warning将组件颜色设置为黄色

  • .navbar-info将组件颜色设置为浅蓝色

  • .navbar-danger将组件颜色设置为红色

完成编码后，在浏览器中 navbar 应该看起来像这样：

更改 Navbar 的颜色

如您所见，我们现在有了一整系列可供选择的颜色来设置 Navbar。让我们来看看我们还能为这个组件添加些什么。

使 Navbar 响应式

由于 Bootstrap 是一个以移动设备为先的框架，因此您需要有能力使 Navbar 组件响应式。让我们看看实现这一点的基本代码：

<nav class="navbar navbar-light bg-faded"> 
   <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#responsive-nav"> 
    ☰ 
  </button> 
  <div class="collapse navbar-toggleable-xs" id="responsive-nav"> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
         <a class="nav-link" href="#">Home</a> 
       </li> 
       <li class="nav-item"> 
         <a class="nav-link" href="#">Page 1</a> 
       </li> 
       <li class="nav-item"> 
         <a class="nav-link" href="#">Page 2</a> 
       </li> 
       <li class="nav-item"> 
         <a class="nav-link" href="#">Page 3</a> 
       </li> 
     </ul> 
   </div> 
</nav>

在这里，代码中有几个不同之处需要您注意：

  • 在 <nav> 标签的打开之后，您需要插入一个带有 CSS 类 .navbar-toggle 和 .hidden-sm-up 的 <button>。第一个类表示此按钮将切换导航。第二个类表示仅对大于小号的尺寸显示响应式导航。您还需要包括 data-toggle="collapse" 数据属性，以便所有导航都可以折叠。最后，您需要添加一个数据目标，这将指向您想要可折叠的区域。我已经给它一个 ID 为 #responsive-nav。

  • 接下来，前往您的链接列表，并将一个 <div> 包裹在它们周围。本节需要名为 .collapse 和 .navbar-toggleable-xs 的 CSS 类。您还需要给它一个 responsive-nav 的 ID，以便将其与上一步中的按钮关联起来。

就这样；一旦您编写了这段代码，缩小浏览器窗口到一个小尺寸，您的栏应该会切换成如下所示。哦，别忘了按钮中的代码 ☰ 将在响应式导航栏中渲染一个汉堡菜单图标：

制作响应式导航栏

这就完成了 Bootstrap 4 中的导航栏组件。我知道这已经是一个很长的章节，但我们还有几个组件需要介绍。

在页面中添加面包屑

面包屑组件在 Bootstrap 中使用起来相当简单。让我们看看如何渲染一个面包屑的代码：

<ol class="breadcrumb"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">Page 1</a></li> 
  <li class="active">Page 2</li> 
</ol>

如您所见，此组件的代码相当基础，让我们来回顾一下：

  • 面包屑组件使用有序列表或 <ol> 标签作为其基础。

  • 在有序列表中，您只需创建一个链接列表。列表中的最后一项应该有一个 .active 类。

在博客文章页面中添加面包屑

对于这个例子，让我们实际上在我们的博客文章页面模板中添加一些面包屑。打开 blog-post.ejs 并在顶部的容器 <div> 之后添加以下代码：

<div class="row m-t-1"> 
    <ol class="breadcrumb"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Blog</a></li> 
      <li class="active">Post Title</li> 
    </ol> 
  </div>

此代码应位于页面标题之前，一旦您完成更新，您的页面顶部现在应如下所示：

在博客文章页面中添加面包屑

现在，我们已经在我们的博客文章模板中添加了一个漂亮的面包屑。让我们继续在页面模板中添加分页。

使用分页组件

让我们继续通过学习如何使用分页组件来添加更多组件到我们的模板中。对于我们的博客项目，我们想使用组件的翻页版本。打开 index.ejs 并在我们博客内容中的最后一个 Card 组件之后插入以下代码：

<nav> 
  <ul class="pager m-t-3"> 
    <li class="pager-prev"><a href="#">Older Posts</a></li> 
    <li class="pager-next disabled"><a href="#">Newer Posts</a></li> 
  </ul> 
</nav>

翻页组件被包裹在一个 HTML5 <nav> 标签中，并使用无序列表作为其基础：

  • <ul> 标签应该添加一个名为 .pager 的类。

  • 组合中的第一个列表项应该有一个 .pager-prev 类。

  • 第二个列表项应该有一个 .pager-next 类。在这种情况下，我还添加了 .disabled 类，这意味着没有更多的文章可以访问。

在您将此代码添加到索引模板后，在浏览器中应该看起来像这样：

使用分页组件

让我们也将此组件添加到博客文章页面模板中。

将分页器添加到博客文章模板

打开 blog-post.ejs 并将之前粘贴的相同代码片段放在左侧列的底部，紧接在卡片组件之后。我不会再发截图，因为它应该和之前的例子看起来一样。让我们继续学习如何使用另一个组件。

如何使用列表组组件

这是本章我们需要讨论的最后一个主要内容组件。让我们通过回顾渲染列表组所需的代码来直接进入正题：

<ul class="list-group"> 
  <li class="list-group-item">Item 1</li> 
  <li class="list-group-item">Item 2</li> 
  <li class="list-group-item">Item 3</li> 
  <li class="list-group-item">Item 4</li> 
</ul>

就像之前的组件一样，这个组件是基于无序列表的：

  • <ul> 标签需要在其上添加 .list-group 类以开始

  • 每个 <li> 都需要在其上添加 .list-group-item 类

完成后，您的列表组在浏览器中应该看起来像这样：

如何使用列表组组件

如您所见，通过一些简单的编码，您就可以渲染出一个看起来不错的组件。您可能已经错过了，但我们在构建索引和博客文章页面模板的侧边栏时实际上已经使用了这个组件。在文本编辑器中打开其中一个，您将看到以下代码，它是一个列表组：

<div class="card card-block"> 
  <h5 class="card-title">Recent Posts</h5> 
  <div class="list-group"> 
    <button type="button" class="list-group-item">Cras justo odio</button> 
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button> 
    <button type="button" class="list-group-item">Morbi leo risus</button> 
    <button type="button" class="list-group-item">Porta ac consectetur ac</button> 
    <button type="button" class="list-group-item">Vestibulum at eros</button> 
  </div> 
  <div class="m-t-1"><a href="#">View More</a></div> 
</div>

这就完成了列表组组件的使用。这也标志着内容组件章节的结束。

摘要

这是一章非常长的内容，但我希望您学到了很多。我们涵盖了包括按钮、按钮组、按钮下拉菜单、表单、输入组、下拉菜单、巨幕、标签、警告、卡片、导航、导航栏、面包屑、分页和列表组在内的 Bootstrap 组件。我们的博客项目现在也开始成形了。在下一章中，我们将深入研究 Bootstrap 4 的一些 JavaScript 组件，包括模态框、工具提示、弹出框、折叠和轮播。

评估

  1. .btn 类不能附加到以下哪个 HTML 标签？

    1. <button>

    2. <a>

    3. <p>

    4. <input>

  2. 以下哪个按钮默认是蓝色的？

    1. 主要

    2. 次要

    3. tsInfo

    4. 成功

  3. 以下哪个按钮默认是黄色的？

    1. 主要

    2. 警告

    3. 危险

    4. 次要

  4. 以下哪个是显示主要按钮的正确命令？

    1. <button type="Button" class="btn btn-primary">主要</button>

    2. <button type="Button" class="btn-primary">主要</button>

    3. <button type="button" class="btn-primary">主要</button>

    4. <button type="button" class="btn btn-primary">主要</button>

  5. 如果一个 <button> 标签有 .btn-success-outline 类，输出将会是什么？

    1. 整个按钮将被填充具有 .btn-success 类的颜色

    2. 按钮的边框将获得具有 .btn-success 类的按钮的颜色

    3. 按钮内的文本将获得具有 .btn-success 类的按钮的颜色

    4. 整个按钮（包括其中的文本）将填充 .btn-success 类的颜色

  6. 以下哪个类将按钮组合在单行上？

    1. .btn-group

    2. .btn-group-justified

    3. .btn-group-lg

    4. .btn-group-vertical

  7. 以下哪个属性需要添加以允许按钮“切换开和关”？

    1. data-target

    2. data-toggle

    3. class

    4. href

  8. 以下哪个标签需要添加以将每个复选框转换为按钮？

    1. <label>

    2. <div>

    3. <input>

    4. <button>

  9. 以下哪些因素是包裹你的单选按钮集合在 <div> 中所需的？

    1. 所有 <div> 应该有相同的类和不同的数据属性

    2. 所有 <div> 应该有相同的类和相同的数据属性

    3. 所有 <div> 应该有相同的类和不同的数据属性

    4. 所有 <div> 应该有不同的类和不同的数据属性

  10. 如果在 <div> 上应用 .dropup 类，输出是什么？

    1. 这使得菜单消失

    2. 这使得菜单出现在按钮下方

    3. 这使得菜单出现在按钮上方

    4. 这会显示一个弹出窗口

  11. 考虑以下代码：评估

    这段代码的输出是什么？

    1. 下拉按钮看起来很大

    2. 下拉按钮看起来很小

    3. 下拉按钮看起来是切换的

    4. 下拉按钮具有合适的尺寸

  12. 考虑以下代码：评估

    带有 .text-muted 类的 <small> 标签显示什么内容？

    1. 它使文本变小并呈现浅灰色

    2. 它使文本变小并呈现深灰色

    3. 它使文本变小

    4. 它以深灰色显示文本

  13. 以下哪个标签用于 <select>？

    1. 显示下拉菜单

    2. 显示单选按钮

    3. 显示复选框

    4. 以上都不是

  14. 以下哪个标签用于显示大号文本？

    1. <fieldset>

    2. <textarea>

    3. <input>

    4. <form>

  15. 如果在包含元素的 <form> 标签上应用 .form-inline 类，输出是什么？

    1. 所有元素都是内联

    2. 所有元素都是内联且右对齐

    3. 所有元素都是内联且左对齐

    4. 所有元素都是内联且居中对齐

  16. 以下哪个类用于隐藏标签？

    1. .sr-only

    2. disabled

    3. readonly

    4. .form-control

  17. 以下哪个类将使图像响应式，以便它自动调整大小以匹配卡片宽度？

    1. .img-responsive

    2. .card-img-top

    3. .img-thumbnail

    4. .img-fluid

  18. 以下哪个导航类将使组件颜色为黑色和灰色？

    1. .navbar-warning

    2. .navbar-primary

    3. .navbar-inverse

    4. .navbar-info

第六章. 使用 JavaScript 插件扩展 Bootstrap

在本章中，我们将通过学习如何使用 JavaScript 插件扩展框架来更深入地了解 Bootstrap 组件。您可能还记得，在第一章中，我们在模板中包含了bootstrap.min.js。这个文件包含了一些与 Bootstrap 一起提供的 JavaScript 组件。在本章中，我们将介绍如何使用其中的一些组件，包括：模态框、工具提示、弹出框、折叠和轮播。让我们直接学习如何在 Bootstrap 4 中创建一个模态框。

编写模态对话框

模态框有多个不同的名称；您可能也知道它们是对话框、弹出窗口、覆盖层或警报。在 Bootstrap 的情况下，这个组件被称为模态框，这也是我在整本书中会使用的称呼。一个模态框由两段必需的代码组成。第一段是按钮，以下是渲染它的基本代码：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#firstModal"> 
  Open Modal 
</button>

如您所见，这是一个基本的按钮组件，其中添加了一些属性：

  • 第一部分是data-toggle数据属性，它需要设置为modal。这告诉浏览器这个<button>与一个模态框组件相关联。

  • 第二个是data-target属性，它应该是一个 ID。这实际上并不重要，我将其命名为#firstModal。重要的是要注意这个 ID 名称，因为它将在稍后与之关联。同时，请确保 ID 名称是唯一的。

一旦编写好这段代码，它应该看起来像浏览器中的一个普通按钮：

编写模态对话框

编写模态对话框

模态框组件的第二部分是对话框。这是当您点击按钮时在浏览器中弹出的部分。让我们看看创建对话框的一些基本代码：

<div class="modal fade" id="firstModal" tabindex="-1" role="dialog" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title">Dialog Title</h4> 
      </div> 
      <div class="modal-body"> 
        Some copy for your modal. 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save</button> 
      </div> 
    </div> 
  </div> 
</div>

这是一段更大的代码，这里有几个需要向您解释的地方：

  • 整个对话框都被一个必需的.modal类的<div>包裹。还有一个可选的.fade类，它将对对话框进行淡入。注意这个<div>上的 ID，因为它很重要。ID 值需要与按钮上设置的data-target属性匹配。这就是我们告诉浏览器将这个按钮与这个对话框关联起来的方式。最后，还有一些 Bootstrap 需要的其他属性，包括tabindex、role和aria-hidden。确保您包含这些属性及其相应的值。

  • 在第一个<div>内部，我们有一个带有.modal-dialog类的第二个<div>；确保您包含它。

  • 接下来，模态框的内部被分为三个部分：头部、主体和底部。

  • 在我们的.modal-dialog内部，添加另一个带有.modal-header类的<div>。在这个部分中，您会注意到另一个按钮。这个按钮是模态框的关闭或X图标；虽然不是必需的，但包含它是好主意。

  • 在按钮之后，你需要包含一个标题标签，在这个例子中是一个带有.modal-titleCSS 类的<h4>。在这里，你应该输入你的模态框标题。

  • 下一个部分是另一个用于正文的<div>，它有一个.modal-body类。在这个部分中，你应该输入你的模态框正文内容。

  • 最后，我们有页脚部分，它是一个带有.modal-footer类的另一个<div>。在这个部分中，你会找到两个需要包含的按钮。第一个是标有关闭的白色按钮，点击它将关闭模态框。请注意，<button>标签上有一个名为data-dismiss的数据属性，其值为modal。这将关闭模态框。第二个按钮是一个主要按钮，如果你要连接实际的功能，它将用作保存按钮。

在编写完所有代码后，转到浏览器并点击你的按钮。你应该会看到一个看起来像这样的模态框：

编码模态对话框

如你所见，我们的模态框已经弹出了按钮上方。你可以阅读模态框的标题和正文，并查看页脚按钮以及右上角的关闭或X按钮。你可能已经注意到，实际上你不必编写任何 JavaScript 代码就能使这个模态框工作。这就是 Bootstrap 框架的力量；所有的 JavaScript 代码都已经为你准备好了，你只需通过使用 HTML 数据属性来调用模态框功能，这使得事情变得容易得多。这就结束了关于模态框的课程；接下来，让我们继续学习如何使用工具提示。

编码工具提示

工具提示（Tooltip）是一个标记，当你在浏览器中悬停在链接上时，它将出现在链接上方。在 Bootstrap 中，通过使用数据属性添加工具提示非常简单，但我们确实需要对其进行一些更新才能使其正常工作。在 Bootstrap 4 中，他们开始使用一个名为 Tether 的第三方 JavaScript 库来实现工具提示。在我们继续之前，请访问下面的 Tether 网站并下载库：

github.hubspot.com/tether/

下载库后，解压它并打开主目录，在那里你会看到许多文件。导航到/dist/js目录，并找到名为tether.min.js的文件：

现在将tether.min.js复制到我们的博客项目的/js目录中。这是你从 Tether 目录中需要的唯一文件，因此你可以保留其余的文件或删除它们。一旦文件在我们的项目目录中，我们需要更新我们的模板。

更新项目布局

现在我们已经将 Tether 文件放入我们的项目目录中，我们需要更新我们的_layout.ejs模板，以便在页面编译时包含它。从我们的项目目录的根目录，打开_layout.ejs并在 jQuery 附近插入以下代码行。确保 Tether 文件在 jQuery 之后、bootstrap.min.js之前加载：

<script src="img/tether.min.js"></script>

保存文件并确保你重新编译你的项目，以便将此导入到所有 HTML 文件中。完成此操作后，你现在将能够在包含在我们的项目中的任何页面上使用 Tooltips。

如何使用 Tooltips

现在我们已经包含了 Tether 库，我们可以学习如何在 Bootstrap 中实际使用 Tooltips。让我们在我们的项目文件之一上尝试它们。在你的文本编辑器中打开 index.ejs 并找到一段纯文本代码，如下所示：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>

一旦找到这段代码，让我们用以下属性将 <a> 标签包裹在前面三个词周围：

<p><a href="#" data-toggle="tooltip" >Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p>

这是渲染 Tooltips 所需的基本标记。让我们分析一下这里发生了什么：

  • data-toggle 属性是必需的，用于告诉浏览器这是一个 Tooltips。其值应设置为 tooltip。

  • title 属性也是必需的，其值将是 Tooltips 中显示的文本。在这种情况下，我将其设置为 This is a tooltip!。

在我们可以在浏览器中测试之前，我们需要在我们的 _layout.ejs 模板中添加一些其他内容。在你的文本编辑器中打开该文件，并在 Tether 库之后插入以下代码：

<script src="img/bootstrap.min.js"></script> 
<script> 
  $("a").tooltip(); 
</script>

在 Bootstrap 4 中，在使用 Tooltips 之前需要先对其进行初始化。因此，我在这里使用了一点点 jQuery 来说明所有 a 标签都应该初始化以使用 Tooltips 方法，这将激活所有链接标签以便与 Tooltips 一起使用。这是一个你可以使用的技巧，这样你就不必为每个想要初始化的 Tooltips 使用 ID 来标识了。完成这一步后，保存所有文件，重新编译它们，然后在浏览器中查看你的项目；当你悬停在链接锚文本上时，它应该看起来像这样：

如何使用 Tooltips

如何定位 Tooltips

默认情况下，在 Bootstrap 中，ToolTips 的位置在锚文本上方。但是，使用 data-placement 属性将允许你将提示放置在锚文本的上方、下方、左侧或右侧。让我们看看渲染不同版本所需的代码：

<p><a href="#" data-toggle="tooltip"  data-placement="top">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="bottom">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="right">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="left">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p>

如你所见，我已经将 data-placement 属性添加到每个链接标签中。以下值将控制当你悬停时 Tooltips 的位置：

  • 顶部：data-placement="top"

  • 底部：data-placement="bottom"

  • 右侧：data-placement="right"

  • 左侧：data-placement="left"

将 Tooltips 添加到按钮上

通过使用与链接相同的数据属性，也很容易将 Tooltips 添加到按钮上。让我们看看如何编写一个带有上方 Tooltips 的简单按钮代码：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" data-original->This is a button tooltip!</button>

这里你会看到一个基本的按钮组件，但它带有 Tooltips 数据属性：

  • 我添加了 data-toggle 属性，其值为 tooltip

  • 你可以可选地包含 data-placement 属性；如果你省略它，它将默认为顶部

  • 你需要包含 data-original-title 属性，其值将是 Tooltips 消息

更新按钮布局

要使按钮上的工具提示工作，你需要以与上一节中链接相同的方式初始化它们。再次在文本编辑器中打开 _layout.ejs 并包含以下代码行。现在整个 JavaScript 部分应该看起来像这样：

<script> 
  $("a").tooltip(); 
  $("button").tooltip(); 
</script>

就像我们对链接标签所做的那样，我们将初始化所有按钮标签以使用工具提示组件，如果它们在 HTML 模板中被调用。让我们看看当它正确完成时，按钮上的工具提示在浏览器中应该看起来什么样：

更新按钮布局

避免与我们的组件发生冲突

到目前为止，我们只使用了工具提示 JavaScript 组件，所以我们的代码是稳定的。然而，在下一节中，我们将介绍一个名为弹出框（Popovers）的不同组件。我们需要清理我们的 JavaScript 代码，以确保这两个组件不会相互冲突并产生不期望的结果。

由于这种情况，我们应该回到 _layout.ejs 并通过为项目中要使用的每个工具提示提供特定的 ID 来编辑代码。我们的脚本现在应该看起来像这样：

<script> 
  $("#tooltip-link").tooltip(); 
  $("#tooltip-button").tooltip(); 
</script>

注意

注意，我已经移除了 a 和 button 选择器，并用名为 #tooltip-link 和 #tooltip-button 的 ID 替换了它们。现在我们也需要更新索引模板上的链接和按钮代码，以包含这些 ID。

<p><a id="tooltip-link" data-toggle="tooltip" >Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

<button type="button" id="tooltip-button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" data-original->This is a button tooltip!</button>

正如你所见，我在前面的代码中为每个元素都包含了 ID。现在我们可以放心地引入新的组件，无需担心 JavaScript 中会发生冲突。让我们继续讨论下一个组件；弹出框（Popovers）。

使用弹出框组件

弹出框组件与工具提示（Tooltips）类似，但允许包含更多内容。弹出框也是通过点击动作来显示的，而不是像工具提示那样通过悬停动作。让我们看看渲染弹出框的基本代码。首先，让我们确保将这个弹出框添加到我们的项目中，所以再次打开 index.ejs 并找到另一行填充代码来添加这个新组件。当你这样做时，将以下代码输入到模板中：

<p><a id="popover-link" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>

正如你所见，这里有一些新内容需要我们讨论：

  • 首先，你会注意到我给链接标签分配了这个 ID； popover-link。

  • 在这种情况下，data-toggle 被设置为 popover。

  • title 属性是必需的，它将是你的弹出框的标题。

  • 最后，我们有一个新的属性名为 data-content。这个属性的值应该是你希望在弹出框上显示的文本。

更新 JavaScript

就像我们对工具提示所做的那样，我们还需要更新这个新组件的 JavaScript。再次打开 _layout.ejs 并在工具提示 JavaScript 之后插入以下代码行：

$("#popover-link").popover();

这段代码将在具有 #popover-link ID 的元素上初始化一个弹出框组件。一旦完成，保存两个文件，然后转到你的浏览器。找到你为弹出框创建的链接并点击它。这是你在浏览器中应该看到的：

更新 JavaScript

如您所见，Popover 组件比 Tooltip 更丰富。它包括标题和内容。如果您需要提供比常规 Tooltip 更多的上下文，应使用此组件。

定位 Popover 组件

再次，像 Tooltips 一样，可以控制 Popover 组件的位置。这是通过在链接标签上使用 data-placement 属性以相同的方式完成的。以下是每个变体的代码：

<p><a id="popover-link" data-placement="top" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 

<p><a id="popover-link" data-placement="bottom" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 

<p><a id="popover-link" data-placement="right" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 

<p><a id="popover-link" data-placement="left" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p>

由于这与 Tooltips 的工作方式完全相同，我不会进一步分解。只需包含 data-placement 属性，并给它一个四个定位值之一，以控制点击时 Popover 出现的位置。

将 Popover 添加到按钮

Popover 组件也可以轻松地添加到按钮中。再次打开 index 模板，并插入以下按钮代码：

<p><button type="button" id="popover-button" class="btn btn-primary" data-toggle="popover"  data-content="This is a button popover example">Popover Button</button></p>

如您所见，这个标记与 Tooltip 按钮非常相似。让我们再次分解：

  • 按钮标签需要添加一个 ID 为 popover-button

  • 与链接一样，将 data-toggle 属性设置为 popover

  • 包含 title 和 data-content 属性的值

与前面的示例一样，别忘了更新 JavaScript！

在 JavaScript 中添加我们的 Popover 按钮

我们最后需要做的是更新 JavaScript 以初始化我们新的 Popover 按钮。打开 _layout.ejs 并在 Popover 链接 JavaScript 之后插入以下代码行：

$("#popover-button").popover();

完成这些后，保存两个文件，并在浏览器中打开 index 页面。定位您插入的按钮并点击它。您的 Popover 应该看起来像这样：

在 JavaScript 中添加我们的 Popover 按钮

如您所见，您现在有一个按钮，上面附加了 Popover 组件。这可以用于通过按钮突出显示某些重要内容，一旦点击，就会向用户显示一条消息。我还有一些 JavaScript 组件想和您一起回顾；下一个是 Collapse 组件。

使用 Collapse 组件

我觉得 Collapse 组件的名称有点令人困惑。它实际上意味着一个可折叠的部分，可以通过点击操作显示或隐藏。让我们首先在 index.ejs 模板上创建一个简单的可折叠文本部分。打开该模板，并将以下代码插入您喜欢的任何位置：

<p><a class="btn btn-primary" data-toggle="collapse" href="#collapse-link" aria-expanded="false">Collapse Link Trigger</a></p>

Collapse 组件分为两部分。第一部分是显示或隐藏可折叠内容的触发器。第二部分是您想要显示或隐藏的实际内容。让我们更详细地回顾一下，以展示如何编写代码：

  • 第一部分是可折叠内容的触发器，我选择使用带有一些按钮类的链接

  • 链接需要带有值为 collapse 的 data-toggle 属性

  • 链接的 href 需要一个唯一的 ID 名称，在这种情况下，#collapse-link

  • 最后，我们将 aria-expanded 的值设置为 false，因为我们希望在页面加载时隐藏可折叠内容

页面加载时，你的新组件应该就像一个普通的按钮一样出现：

使用 Collapse 组件

编写可折叠内容容器

现在 Collapse 的触发器已经设置好了，我们需要编写内容容器。在链接标签之后，插入以下代码：

<div class="collapse" id="collapse-link"> 
  <p class="alert alert-warning">This is some collapsable text.</p> 
</div>

这是如何组装这段代码的：

  • 我们从一个需要具有collapseCSS 类的<div>开始。你还需要在这里包含一个 ID。这个 ID 应该与你在触发链接中设置的href相匹配；在这个例子中，是#collapse-link。

  • 在<div>内部，你可以包含任何你想要的内容。这些内容将是隐藏的可折叠内容，当点击触发器时，你可以显示或隐藏这些内容。为了使示例更加明显，我在一些文本周围包裹了一个警告 Alert，使其突出。

在你编写完代码并保存文件后，前往浏览器，找到按钮，然后点击它。一旦你点击触发链接，你应该在你的窗口中看到以下内容：

编写可折叠内容容器

这只是一个简单的例子，说明了如何编写 Collapse 组件的代码。通过使用额外的代码和设置，你可以使用这个组件来创建可折叠面板。

使用 Collapse 组件编写可折叠面板

在上一节中，我教了你一个相当简单的方法来使用 Collapse 组件。同一个组件也可以用来创建一个更复杂的版本，即可折叠面板。让我们看看创建可折叠面板的基本代码：

<div id="accordion"> 
  <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headerOne"> 
      <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#sectionOne" aria-expanded="true" aria-controls="sectionOne"> 
          Section #1 
        </a> 
      </h4> 
    </div> 
    <div id="sectionOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headerOne"> 
      This is the first section. 
    </div> 
  </div> 
  <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headerTwo"> 
      <h4 class="panel-title"> 
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#sectionTwo" aria-expanded="false" aria-controls="sectionTwo"> 
          Section #2 
        </a> 
      </h4> 
    </div> 
    <div id="sectionTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headerTwo"> 
      This is the second section. 
    </div> 
  </div> 
  <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headerThree"> 
      <h4 class="panel-title"> 
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#sectionThree" aria-expanded="false" aria-controls="sectionThree"> 
          Section #3 
        </a> 
      </h4> 
    </div> 
    <div id="sectionThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="sectionThree"> 
     This is the third section. 
    </div> 
  </div> 
</div>

现在这看起来可能像很多代码，但实际上这是一个重复的模式，一旦你理解了它，就很容易组合起来。让我来分解这里发生的一切：

  • 整个组件被一个带有 ID 的<div>包裹。在这个例子中，我使用的是#accordion。

  • 可折叠面板的每个部分都是一个带有.panel类的<div>。我还包括了.panel-default类，以进行最基本的样式设置。

  • 每个面板由一个标题和一个主体或部分组成。让我们先谈谈标题。创建另一个带有.panel-heading类的<div>。还要包括一个值为tab的role属性，并且你需要给你的标题一个唯一的 ID，在这个例子中，是#headerOne。

  • 在标题内部包含一个标题标签，在这个例子中，是一个带有.panel-title类的<h4>。

  • 最后，在标题标签内部，编写一个具有几个你需要包含的属性的链接：

    • .collapsed对于可折叠组件是必需的。

    • data-toggle也是必需的。

    • data-parent应该是你为第一个<div>设置的相同 ID。

    • href将是链接到可折叠部分的主体。在这个例子中，它被称为sectionOne。

    • aria-expanded应该设置为true，因为我们希望这个部分在页面加载时是打开的。其他链接应该设置为false，除非你希望它们在页面加载时打开。

    • aria-controls也应该与相应部分的 ID 名称匹配。

    • 现在标题已经分解，让我们来谈谈面板的主体。

  • 在标题之后，插入另一个带有 #sectionOne ID 的 <div>。它也应该有 .panel-collapse 和 .collapse 类，并包含一个 role 属性，其值为 tabpanel。最后，包含 aria-labelledby 属性，其值为 sectionOne。

  • 在这个 <div> 内部包含你想要显示的章节内容。

对于接下来的部分，你需要重复你在第一个面板中做的事情。只需复制粘贴，然后你需要更改一些内容：

  • 将 headerOne 改为 headerTwo

  • 将 sectionOne 改为 sectionTwo

  • 更改第二个部分的标题和正文内容

对第三个部分做同样的处理，然后 Accordion 组件就完成了。一旦完成，浏览器中的样子应该是这样的：

使用 Collapse 组件编写可折叠面板

这就完成了 Collapse 和 Accordion 组件。我们还有一个组件要完成，那就是 Carousel 组件。

编写 Bootstrap Carousel

Carousel 是在许多不同类型的网站上广泛使用的流行组件。我们将在项目的博客文章模板中构建一个 Carousel。让我们首先在文本编辑器中打开项目目录中的 blog-post.ejs 文件。在页面标题代码块之后，插入以下标记：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
  </ol> 
  <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
      <img src="img/..." alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
      <img src="img/..." alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
      <img src="img/..." alt="Third slide"> 
    </div> 
  </div> 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="icon-prev" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="icon-next" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div>

这是一个像 Accordion 一样的大组件，让我们逐节分析：

Carousel 组件从一个 <div> 开始，需要一个唯一的 ID。在这种情况下，#carouselOne。还包括以下类：.carousel 和 .slide。最后，你需要添加一个 data-ride 属性，其值为 carousel。

我们需要添加到 Carousel 中的第一件事是子弹或指示导航。它由一个有序列表组成。以下是代码，然后我们将对其进行分解：

<ol class="carousel-indicators"> 
  <li data-target="#carouselOne" data-slide-to="0" class="active"></li> 
  <li data-target="#carouselOne" data-slide-to="1"></li> 
  <li data-target="#carouselOne" data-slide-to="2"></li> 
</ol>

Carousel 导航的工作方式如下：

  • 在 <ol> 标签上分配一个 .carousel-indicators 类。

  • 列表中的每个 <li> 都需要一些东西：

    • data-target 需要与你为根 Carousel <div> 给出的相同 ID，在这种情况下，#carouselOne。

    • 包含 data-slide-to 属性，第一个值应该是 0。对于第一个列表项之后的每个列表项，增加 1。

下一步是包含实际的 Carousel 幻灯片。我不会在代码中包含图片，这将由你插入，但不用担心，我会告诉你在哪里放置它们。以下是包装幻灯片的代码段：

<div class="carousel-inner" role="listbox"> 
  .. 
</div>

给 <div> 添加一个 .carousel-inner 类，并添加一个 role 属性，其值为 listbox。在这个 <div> 内部，你将为 Carousel 中的每个图像幻灯片添加另一个部分。以下是 Carousel 中一个幻灯片的代码：

<div class="carousel-item active"> 
  <img src="img/..." alt="First slide"> 
</div>

让我们分析一下代码中发生的事情：

  • 在这种情况下，插入一个具有 .carousel-item 和 .active 类的 <div> 标签。

注意

注意你只应该在第一张幻灯片上包含 .active 类。这是轮播图在页面加载时开始的地方。

  • 在 <div> 内插入一个具有以下属性的 img 标签：

    • 插入 src 属性，其值应该是幻灯片图像文件的路径

    • 可选地，为图像包含一个带有值的 alt 属性

添加轮播图箭头导航

我们需要添加到轮播图中的最后一件事是箭头导航。以下是渲染箭头的代码：

<a class="left carousel-control" href="#carouselOne" role="button" data-slide="prev"> 
  <span class="icon-prev" aria-hidden="true"></span> 
  <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carouselOne" role="button" data-slide="next"> 
  <span class="icon-next" aria-hidden="true"></span> 
  <span class="sr-only">Next</span> 
</a>

让我解释箭头导航是如何工作的：

  • 左右箭头导航基于 href 标签。

  • 第一项将是左箭头；编写一个带有以下类的链接：.left 和 .carousel-control。

  • 链接的 href 应该设置为轮播图的主要 ID，在这种情况下，#carouselOne。

  • 将 role 属性设置为 button。

  • 最后，将 data-slide 属性设置为 prev。

  • 在链接内，添加一个带有 .icon-prev 类的 <span>。这将渲染箭头图标。包含 aria-hidden 属性并将其设置为 true。

  • 最后，你可以包含另一个可选的 <span> 以便进行无障碍访问。如果你想包含它，给它一个 .sr-only 类。在 <span> 中包含文本 Previous。

  • 现在我们来了解一下右箭头的区别：

    • 编写另一个链接标签，并将 .left 类更改为 .right。

    • 将 data-slide 属性值更改为 next。

    • 在第一个 <span> 标签中，将类值更改为 .icon-next。

    • 如果你包含了无障碍 <span> 标签，将文本更改为 Next。

这样就完成了轮播组件的设置。启动项目服务器，并在浏览器中查看博客文章页面，它应该看起来像这样：

添加轮播图箭头导航

这样就结束了 Bootstrap 中 JavaScript 组件的章节。在本章中，我教了你如何编写以下组件的代码：模态框、工具提示、弹出框、折叠、手风琴和轮播图。在下一章中，我将教你如何在 Bootstrap 中使用 Sass。

摘要

在本章中，我们涵盖了所有依赖于 JavaScript 的 Bootstrap 组件。这包括：模态框、工具提示、弹出框、折叠和轮播图。

在下一章中，我们将看到在 Bootstrap 4 中，框架如何从 Less 转变为 Sass 作为其 CSS 预处理器。我们将介绍在 Bootstrap 主题中使用 Sass 的基础知识。我还会解释如何自定义或使用现有的变量，或者编写你自己的。

评估

  1. 以下哪个也可以称为模态框？

    1. 对话框

    2. 弹出窗口

    3. 遮罩

    4. 所有这些

  2. 以下哪个数据属性需要设置为模态框？

    1. data-target

    2. data-toggle

    3. data-type

    4. data-value

  3. 以下哪个值被分配给按钮的 data-target 属性以显示模态框？

    1. 模态框 ID

    2. 模态框类型

    3. 模态框类

    4. 模态框名称

  4. 以下哪个是模态框的必需类？

    1. .modal-header

    2. .modal-footer

    3. .modal-body

    4. .modal

  5. 以下哪个数据属性用于定位工具提示？

    1. data-target

    2. data-placement

    3. data-value

    4. data-toggle

第七章：加入一些 Sass

到目前为止，我们已经介绍了很多不同的 Bootstrap 组件及其使用方法。在本章中，我们将转换方向，学习 Sass，这将允许你自定义组件的外观和感觉。我将首先介绍一些你需要了解的 Sass 基础知识，然后继续编写一些基本代码，最后展示使用变量在组件中节省宝贵时间的强大功能，当你创建你的 Web 应用或项目时。

学习 Sass 的基础知识

Sass 代表 Syntactically Awesome Style Sheets。如果你之前从未使用过或听说过 Sass，它是一个 CSS 预处理器。预处理器通过允许在 CSS 中使用变量、运算符和混入等功能来扩展常规 CSS。Sass 在项目的开发阶段编写，并且在将项目部署到生产环境之前需要将其编译成常规 CSS。我将在下一节中更详细地介绍这一点，但请放心，Harp.js 使得这一过程变得非常简单。

在 Bootstrap 的第 4 版本之前，所使用的 CSS 预处理器实际上是 Less。在一段时间内，Sass 和 Less 都在前端设计领域很受欢迎。然而，在过去的几年里，虽然 Sass 已经成为开发者的最佳选择，但 Bootstrap 团队决定在第 4 版本中进行更改。如果你熟悉 Less 但从未使用过 Sass，不用担心，因为它们的使用方式非常相似，所以你很快就能上手。

在博客项目中使用 Sass

如前文所述，Sass 是开发流程的一部分，浏览器无法直接读取其原生格式。在你能够部署项目之前，你需要将 Sass 文件转换或编译成常规的 CSS 文件。通常这需要你安装一个 Ruby gem，并且你必须手动编译你的代码才能进行测试。幸运的是，Harp.js 实际上内置了一个 Sass 编译器。所以当你运行 harp compile 命令来构建你的模板时，它也会将你的 Sass 文件编译成常规的 CSS。我相信在了解到这一点后，你开始更加喜欢 Harp 了。

更新博客项目

在我们继续之前，我们需要对我们的博客项目进行一些更新，以便为 Sass 准备。前往你的项目目录，导航到 CSS 目录。在这个目录中，创建一个名为 custom.scss 的新文件。

注意

Sass 文件的扩展名是 .scss。

我们在这里做的是创建一个自定义样式表，我们将用它来覆盖一些默认的 Bootstrap 视觉效果的 CSS。为此，我们需要在布局文件中在 Bootstrap 框架 CSS 文件之后加载这个自定义文件。打开项目目录根目录下的 _layout.ejs，在 bootstrap.min.css 之后插入以下代码行。这两行代码放在一起应该看起来像这样：

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/custom.css">

注意这里我使用的是.css文件扩展名来命名custom.css。这是因为，在文件编译之后，模板将寻找实际的 CSS 文件，而不是 Sass 文件。关键部分只是确保实际的文件名匹配，并且在布局文件中使用.css。在我们继续之前，让我们测试一下我们的 Sass 文件，以确保它已正确设置。在你的文本编辑器中打开custom.scss并添加以下代码：

body { 
   background: red; 
}

这只是一个简单的方法来确保 Sass 正在编译为 CSS，并且被插入到我们的布局中。编译你的项目并启动服务器。如果你一切都做对了，你主页的背景应该是红色，看起来像这样：

更新博客项目

希望你看到的是这个，并且你可以确认你已经正确设置了文件。一旦你成功完成这个，删除 Sass 文件中我们输入的 CSS。

注意

在 Sass 文件中编写常规 CSS 是完全可接受的。理想情况下，你希望将常规 CSS 代码与 Sass 语法结合使用，以充分利用预处理器。

现在你已经完成了文件的设置，让我们开始学习更多关于在项目中使用 Sass 的知识。

使用变量

在 Sass 中，变量通过使用$符号字符来调用。如果你熟悉 Less，则使用@符号作为变量。所以在这种情况下，你只需要用$代替@。要编写一个变量，以$符号开始，然后插入一个描述性的关键字，可以是任何你喜欢的。以下是一些通用的变量名示例：

$background-color 
$text-size 
$font-face 
$margin

我将这些命名得很通用地，它们实际上与一些 CSS 属性名相匹配。这是一个好主意，如果多个开发者正在同一个项目上工作，它们很容易重用和理解。然而，正如我所说的，你可以随意命名你的变量。如果你想更有创意，你可以这样命名变量：

$matts-best-color 
$awesome-background-color 
$fantastic-font-face

这些是极端的例子，建议不要以这种方式命名变量。对你来说$awesome-background-color可能意味着红色，但对另一个人来说它可能意味着任何东西。总是以描述性的方式命名变量，使其有意义是一个好主意。

我已经向你展示了如何编写变量名，但等式的另一边是变量的实际值。让我们为我们的第一组变量名添加一些示例值：

$background-color: #fff; 
$text-size: 16px; 
$font-face: helvetica, sans-serif; 
$margin: 1em;

你编写 Sass 变量的方式与编写 CSS 属性的方式相同。也值得注意，你应该在样式表的顶部输入你的变量，这样它们就可以在你之后的 CSS 中使用。

在 CSS 中使用变量

现在我们已经定义了一些变量，接下来让我们将这些变量实际插入到一些 CSS 中。在custom.scss中的变量之后，输入以下代码：

body { 
   background: $background-color; 
   font-size: $text-size; 
   font-family: $font-face; 
   margin: $margin; 
}

因此，我们不是使用 CSS 属性的实际值，而是使用我们设置的变量名称。随着我们添加更多的 CSS，这开始变得更有力量。让我们重用一些这些变量：

body { 
   background: $background-color; 
   font-size: $text-size; 
   font-family: $font-face; 
   margin: $margin; 
} 

h1 { 
   font-size: 36px; 
   font-family: georgia, serif; 
} 

h2 { 
   font-size: $text-size; 
   font-family: $font-face; 
}

在这个例子中，你可以看到一些我应该解释的事情：

  • 对于 <h1> 标签，我没有使用任何变量。我使用的是常规 CSS 属性值。

  • 对于 <h2> 标签，我正在重用相同的变量来插入 font-size 和 font-family 的值。

随着你的样式表变得越来越长，我相信你会看到这种策略的价值。例如，如果我想将我的 font-size 改为 24px，我只需要将 $text-size 变量的值更改为 24px。我不需要在我的整个样式表中逐个更改所有值。这些只是你可以使用变量的基本操作。让我们看看更高级的使用案例。

使用其他变量作为变量值

这可能听起来有点复杂，但实际上你可以将一个变量作为另一个变量的默认值。一个很好的例子是在定义调色板时你可能想要这样做。你可以将十六进制值转换为可读的名称，然后用于其他变量。当你调试代码时，这会更容易扫描和理解。以下是我想要说明的例子：

$black: #000; 
$white: #fff; 
$red: #c00; 

$background-color: $white; 
$text-color: $black; 
$link-color: $red;

让我为你分解这里发生的事情：

  • 首先，我为 black、white 和 red 创建了三个颜色变量

  • 接下来，我为 background-color、text-color 和 link-color 创建了三个 CSS 属性变量；这些 CSS 属性变量的值是颜色变量

与使用十六进制数值作为 CSS 属性变量的值相比，我使用了颜色关键字变量，这更容易阅读和理解。这标志着 Sass 中变量介绍的结束。接下来，我们将学习如何将不同的文件导入 custom.css 并使用部分。

在 Sass 中导入部分

@import directive to bring them all into a single master theme, which is then included in your project. Let's go over an example of how you could do this for a single component. In your project, go to the /css directory and create a new sub-folder called /components. The the full path should be:

/css/components

在 /components 目录中，创建一个新的 Sass 文件，并将其命名为 _buttons.scss。确保你始终在文件名开头插入一个下划线。编译器将忽略这些文件，因为下划线意味着它被插入到另一个文件中。在文件顶部输入以下内容作为标记：

/* buttons */

保存按钮文件，然后打开 custom.scss 并在文件中添加以下行代码：

@import "components/_buttons.scss";

这行代码使用了 @import 规则，这将允许我们将 _buttons.scss 文件导入我们称为 custom.scss 的主主题文件。正如我提到的，你需要这样做的原因是为了可维护性。这使得代码更容易阅读，并添加/删除组件，这也就是我们所说的使其更具模块化。

在我们测试以确保其工作之前，我们需要在我们的 _buttons.scss 文件中添加一些代码。以更改主按钮为例，让我们添加一些简单的 CSS：

.btn-primary { 
  background-color: green; 
}

添加此代码后，保存文件并执行 harp compile。然后启动服务器并查看主页；按钮将像这样变绿：

在 Sass 中导入部分

测试完之后，你可能想要移除那个自定义代码，除非你希望按钮保持绿色。这只是如何使用部分来使你的 Bootstrap 组件更加模块化的一个简单例子。我将在未来的章节中更深入地探讨这个话题，但现在我们将专注于使用 Sass 混合器。

使用混合器

在 CSS 中编写某些内容，例如浏览器供应商前缀，可能非常繁琐。混合器允许你将 CSS 声明分组在一起，这样你就可以在整个项目中重用它们。这很好，因为你可以使用一行代码而不是为每个浏览器编写多行代码来包含 border-radius 的代码。首先，打开 custom.scss 并在文件顶部插入以下代码：

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
}

让我们回顾一下这里发生的一些事情：

  • 混合器总是以 Sass 中的 @mixin 关键字开始

  • 随后，你想要包含要针对的属性名称以及设置一个变量，在这个例子中是 $radius

  • 然后我们将 $radius 变量应用于每个浏览器前缀实例

我们已经设置了混合器来处理 border-radius 属性，但我们还需要将角落值添加到元素中。让我们更改默认 Bootstrap 按钮的 border-radius 值。打开 _buttons.scss 并插入以下代码：

.btn { 
  @include border-radius(20px); 
 }

让我来解释这里发生了什么：

  • 我通过插入 .btn 类来针对所有 Bootstrap 按钮

  • 插入 @include 关键字将获取 border-radius 混合器

  • 最后，我提供了一个 20px 的值，这将使我们的按钮在每个端点看起来非常圆润

保存你的文件，运行 harp compile 命令，然后，当你用浏览器查看项目时，它应该看起来像这样：

使用混合器

这就结束了 Bootstrap 4 中使用混合器的相当简单的例子。你可以出于许多其他原因使用它们，但替换 CSS3 供应商前缀是最常见和最有用的之一。接下来，我们将覆盖 Sass 中一个稍微复杂的话题，即运算符的使用。

如何使用运算符

Sass 允许你在 CSS 中执行基本的数学运算，这有几个原因很有用。首先，你可以使用以下运算符 +, -, *, /, 和 %。为了让你了解如何在 CSS 中使用运算符，让我们学习如何将基于像素的网格转换为百分比。我们将创建两个像素列，然后使用一些 Sass 将它们转换为百分比。打开 custom.scss 并插入以下代码：

.left-column { 
  width: 700px / 1000px * 100%; 
} 

.right-column { 
  width: 300px / 1000px * 100%; 
}

现在，我已经在这里创建了两个列。在编译这个 Sass 运算符之后，.left-column类将具有 70%的宽度。.right-column类将具有 30%的宽度。所以如果我们把它们加起来，我们将得到大约四分之三的布局，左侧有一个较大的列，右侧有一个较小的列。运行harp compile命令来构建这段代码，然后打开/www/css文件夹中的custom.css文件。在那里你应该找到以下代码：

.left-column { 
  width:70%; 
} 

.right-column { 
  width:30%; 
}

如你所见，我们的 Sass 运算符已经被转换成了常规的百分比值。这只是你可以在 Sass 中使用运算符的一种方式；我鼓励你更多地尝试它们。接下来，我们将学习如何设置一个 Sass 变量库，你可以使用它来创建一个 Bootstrap 主题。

创建变量集合

当你在 Bootstrap 中使用 Sass 时，你想要做的最主要的事情之一是创建一个全局变量库，这样你就可以在整个主题中使用它。想想颜色、背景、字体、链接、边框、边距和填充等事情。最好只定义这些常用属性一次，然后你可以在不同的组件中重复使用它们。在我们走得太远之前，我们需要创建一个新的.scss文件。打开你的文本编辑器，创建一个新文件，并将其命名为_variables.scss。将此文件保存到/css/components目录中。目前，你可以让它保持空白。

将变量导入到自定义样式表中

现在我们已经创建了变量 Sass 文件，我们需要将其导入到我们的自定义样式表中。在你的文本编辑器中打开custom.css文件，并在文件顶部粘贴以下代码行：

@import "components/_variables.scss";

重要的是要注意，此文件必须位于你的自定义样式表文件顶部。变量将级联通过它们之后的所有代码，因此它们必须首先加载。让我们开始用调色板填充我们的变量文件。

添加调色板

保存自定义样式表，然后返回变量文件。让我们首先将一个调色板插入到变量文件中，如下所示：

$red: #e74c3c; 
$red2: #c0392b; 
$blue: #3498db; 
$blue2: #2980b9; 
$green: #2ecc71; 
$green2: #27ae60; 
$yellow: #f1c40f; 
$yellow2: #f39c12; 
$purple: #9b59b6; 
$purple2: #8e44ad; 
$white: #fff; 
$off-white: #f5f5f5; 
$grey: #ccc; 
$dark-grey: #333; 
$black: #000;

如你所见，我已经设置了一个颜色调色板，我将在我的组件和后来的主题中使用这些颜色。以下是一些需要注意的关键点：

  • 对于你的关键颜色，有两个变体是很好的。这对于像按钮这样的组件很有用，其中$red将是静态颜色，而$red2将是按钮的悬停或活动颜色。

  • 我猜你已经能看出，使用像$purple这样的变量名比在长样式表中使用十六进制值更易读。

添加一些背景颜色

你应该添加到你的变量集合中的下一件事是背景颜色。随着我们通过这个变量文件前进，我们将为在样式表中反复使用的所有属性创建一个变量。

将以下背景颜色变量添加到文件中：

$primary-background: $white; 
$secondary-background: $off-white; 
$inverse-background: $black;

让我解释一下，作为最佳实践，我是如何设置这个的：

  • 首先，我正在使用我们刚刚设置的色彩变量作为我们新的背景颜色变量的值。这使事情变得简单，同时也允许你更改颜色，并使其通过所有其他变量传递。这是一个节省时间的好技巧。

  • 至少，定义一个primary、secondary和inverse背景颜色变量是个好主意。注意我这里使用了与 Bootstrap 相同的语言。这是一个值得遵循的好习惯。如果你认为你的项目中需要更多的背景颜色，可以自由定义。

设置背景颜色变量相当简单。接下来，让我们设置我们的基础排版变量。

设置排版变量

我们将要设置的下一个变量部分是基础排版样式。在背景颜色之后插入以下代码：

$body-copy: helvetica, arial, verdana, sans-serif; 
$heading-copy: helvetica, arial, verdana, sans-serif; 
$base-font-size: 16px; 
$font-size: 1em; 
$base-line-height: 1.75;

让我解释一下为什么我要设置以下排版变量：

  • 为了保持一致性，有一个正文和标题字体样式是好的。在这种情况下，我正在使用相同的字体堆栈，但你也可以轻松地将标题变量更改为其他内容。当你编写 CSS 时，与尝试记住每个的整个字体堆栈相比，考虑正文或标题版本的font-family要容易得多。

  • 对于$base-font-size变量，我们将使用像素值。这是唯一一个你会看到像素的地方，它被设置为所有其他内容的基础 em 大小。记住，ems 是一个相对尺寸单位，所以如果你想要使所有组件稍微大一点或小一点，你只需调整这个像素值即可。

  • 我们还需要一个$font-size变量，它将被设置为1em。这是一个基础单位，并且可以通过 Sass 运算符轻松地在其他选择器中更改。我们将其设置为1em的原因是它使数学计算变得简单。

  • 最后，我将$base-line-height设置为1.75，因为我喜欢我的文本中有一点额外的行间距。如果你对 Bootstrap 默认值满意，可以选择省略这一点，Bootstrap 的默认值更接近1.5。

现在我们已经设置了我们的排版变量，让我们继续编码我们的文本颜色。

编码文本颜色变量

与背景颜色一样，我们需要设置一些常见的文本颜色样式，以及定义一些基础 HTML 标签如<pre>和<code>的颜色。在文件中的排版变量之后插入以下标记：

$primary-text: $black; 
$light-text: $grey; 
$loud-text: $black; 
$inverse-text: $white; 
$code-text: $red; 
$pre-text: $blue;

让我分解一下每个变量是如何设置的：

  • 与背景颜色变量一样，我们正在使用变量名作为我们的文本颜色变量的值。我包含了一个名为$primary-text的变量，并将其设置为黑色，遵循之前建立的相同命名约定。

  • 我添加了$light-text和$loud-text变量，这样我们就可以轻松地在组件中应用更亮或更暗的文本。

  • 我还包含了一个$inverse-text变量，用于与相应的背景颜色一起使用。

  • 最后，我已经为<pre>和<code>标签设置了默认颜色，我们将使用这些颜色来覆盖默认颜色，使它们与我们的主题和调色板相匹配。

这就完成了我推荐的设置的所有颜色变量。如果你有其他需要覆盖的用途，请随时添加。接下来，我们将通过添加链接来继续设置一些文本颜色。

为链接编码变量

在我们的项目中，基本文本颜色之外，还需要为链接设置颜色。请在文件中的文本颜色之后添加以下代码：

$primary-link-color: $purple; 
$primary-link-color-hover: $purple2; 
$primary-link-color-active: $purple2;

在这个例子中，我决定只定义一个主要链接颜色以保持简单。在你的项目中，你可能还想设计出更多变体。

  • 对于静态链接颜色，我使用的是$purple颜色变量。

  • 对于主要链接的悬停和活动状态，我使用的是$purple2。正如我之前提到的，这是为什么在调色板中为每种颜色提供两种变体是个好主意的一个例子。

正如我说的，我保持了链接变量的简单性。尽量保持你的变量集尽可能紧凑是个不错的选择。如果你有太多变量，那么使用它们的目的就会受到影响，因为这将使你在代码中记住它们变得更难。接下来，让我们来看看我们应该为边框设置的变量。

设置边框变量

另一个经常使用的 CSS 属性是边框。这使得它成为 Sass 变量的优秀候选者。请在文件中的链接颜色之后插入以下代码：

$border-color: $grey; 
$border-size: 1px; 
$border-type: solid; 
$border-focus: $purple;

让我解释一下为什么我以这种方式设置边框变量：

  • 当你决定$border-color的值时，你应该选择一个你认为在你的组件中最常使用的颜色。例如，在大多数设计中，$grey总是一个安全的选择。

  • 与颜色值一样，你应该将$border-size设置为最常用的边框大小。将此设置为1px也是个好主意，因为如果你想要更细或更粗的边框，可以轻松地进行计算以应用 Sass 运算符。

  • 对于$border-type，将其设置为最常用的值，这很可能是实线。

  • 最后，设置一个常见的$border-focus颜色。这主要用于一旦激活的表单输入。选择一个与该变量形成对比的颜色是个好主意，这样当输入处于焦点时，它就会非常突出。

这就结束了所有我推荐的边框变量。接下来，让我们包括一些基本的布局变量。

添加边距和填充的变量

为了在整个设计中保持一致的间距，使用变量来设置margin和padding是个好主意，这样你就可以在尺寸上实现标准化。这些属性也经常被使用，因此将它们设置为可重用的变量是个明智的选择。请在边框标记之后添加以下代码：

$margin: 1em; 
$padding: 1em;

我在这里所做的只是设置一个基本尺寸（对于padding和margin都是）1em。再次强调，将这两个都设置为1em是一个好主意，因为如果你想要使用 Sass 运算符来增加或减少特定组件的值，这样做数学运算会更加容易。那些是我会推荐添加到你的变量文件中的最后一个变量。然而，在我们完成之前，我们应该至少在文件中添加一个混入。

将混入添加到变量文件中

由于混入（mixins）将在你的许多组件中使用，你应该在变量文件中定义它们。这样，它们就会在自定义主题文件中跟随它们的 CSS 代码中可用。至少，我建议设置一个用于border-radius的混入，我将在接下来的演示中展示如何做。你可能还想包括其他 CSS3 特性的额外混入。

编写border-radius混入

我们之前稍微讨论过混入，但现在我们已经实际将它们应用到我们的项目中，让我们再次回顾一下。在你的文件中布局变量之后插入以下代码：

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
}

在 Less 中，你可以在混入中为所有的border-radius设置一个全局值。然而，在使用 Sass 时，你必须设置上述公式，然后在实际的后续选择器中设置实际的border-radius值。一个例子可能看起来像这样：

.my-component { 
  @include border-radius(5px); 
 }

在这个例子中，我已经将border-radius混入添加到了一个名为.my-component的 CSS 类中。该组件将应用一个border-radius为5px。你需要在任何你想要应用border-radius混入的 CSS 类或组件上重复此步骤。这就完成了我们的变量 Sass 文件。我们在那里讨论了很多代码，所以让我们看看它们一起看起来是什么样子。我还在下面的代码中包含了一些 CSS 注释，以帮助提醒你每个部分的作用：

/* variables */ 

/* color palette */ 
$red: #e74c3c; 
$red2: #c0392b; 
$blue: #3498db; 
$blue2: #2980b9; 
$green: #2ecc71; 
$green2: #27ae60; 
$yellow: #f1c40f; 
$yellow2: #f39c12; 
$purple: #9b59b6; 
$purple2: #8e44ad; 
$white: #fff; 
$off-white: #f5f5f5; 
$grey: #ccc; 
$dark-grey: #333; 
$black: #000; 

/* background colors */ 
$primary-background: $white; 
$secondary-background: $off-white; 
$inverse-background: $black; 

/* typography */ 
$body-copy: helvetica, arial, verdana, sans-serif; 
$heading-copy: helvetica, arial, verdana, sans-serif; 
$base-font-size: 16px; 
$font-size: 1em; 
$base-line-height: 1.75; 

/* text colors */ 
$primary-text: $black; 
$light-text: $grey; 
$loud-text: $black; 
$inverse-text: $white; 
$code-text: $red; 
$pre-text: $blue; 

/* links */ 
$primary-link-color: $purple; 
$primary-link-color-hover: $purple2; 
$primary-link-color-active: $purple2; 

/* border */ 
$border-color: $grey; 
$border-size: 1px; 
$border-type: solid; 
$border-focus: $purple; 

/* layout */ 
$margin: 1em; 
$padding: 1em; 

/* border-radius mixin */ 
@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
}

现在我们已经设置了所有的变量和混入，让我们继续学习如何应用它们。我们将继续构建我们之前开始的按钮示例，通过扩展它来创建一个自定义的外观和感觉。

自定义组件

让我们首先从自定义单个组件开始；稍后我会谈到创建一个主题，在那里你可以自定义 Bootstrap 中的所有组件。为了开始，我们将基于我们之前开始工作的按钮组件进行构建。在这个下一步中，我们将扩展我们添加的 CSS，以完全自定义组件。你想要做的是覆盖所有你想要更改的 CSS 类和属性。在某些情况下，这可能只是几件事情，但在其他情况下，你可能想要更改很多。

自定义按钮组件

首先，打开位于项目目录/css/components中的_buttons.scss。我们需要定制的第一件事是基础.btnCSS 类。一旦我们在那里应用了一些更改，我们将添加更多的 CSS 来控制不同按钮变体的外观和感觉。在文件顶部插入以下 CSS 以用于基础按钮类：

.btn { 
  background-color: $grey; 
  border-color: $grey; 

  @include border-radius(20px); 
}

为了保持简单，我只将覆盖几个属性。你可以完全自由地发挥创意，更改更多属性，使你的按钮看起来与 Bootstrap 默认链接不同。让我们分析一下我所做的：

  • 首先，我将background-color和border-color设置为使用我们的调色板中的$grey。这是一个指出，如果你想做一个完整的主题，你需要覆盖所有组件上的所有 Bootstrap 默认颜色以匹配你的调色板的好时机。

  • 接下来，我插入了border-radius混合并给它赋值为20px。这将使按钮变得非常圆滑。我追求这种外观，这样你可以清楚地看到按钮已经被定制。

保存这些更改后，转到终端并从项目目录的根目录运行harp compile命令。然后启动服务器并打开项目的主页，主页上有一堆按钮。你的按钮现在应该看起来像这样：

定制按钮组件

现在可能看起来不太有用，但重要的是我们首先定制基础.btn类；现在我们将继续构建组件，通过将我们的调色板应用于所有不同的按钮变体。

将按钮组件扩展以使用我们的调色板

在下一节中，我们将通过将我们的调色板应用于所有不同的 Bootstrap 按钮变体来进一步扩展按钮组件。在我们到达所有不同的按钮类型之前，让我们首先定制.btn-primary变体。在_buttons.scss文件中，在基础.btn样式之后输入以下代码：

.btn-primary { 
   background-color: $purple; 
   border-color: $purple; 
} 

.btn-primary:hover, 
.btn-primary:active { 
   background-color: $purple2; 
   border-color: $purple2; 
}

发生了几个不同的事情，让我们逐一回顾：

  • 每个按钮变体都有两个 CSS 部分。第一个是按钮的静态状态。第二个是按钮的悬停和激活状态。

  • 对于静态状态，我们使用.btn-primary类并插入background-color和border-color属性。我想让我的主按钮变成紫色，所以我插入了$purpleSass 变量来覆盖 Bootstrap 默认颜色。

  • 对于其他状态，我们有.btn-primary:hover和.btn-primary:active。在这种情况下，我使用的是第二种紫色颜色变量，即$purple2。在悬停或激活按钮上会有稍微深一点的紫色阴影。

保存文件，在终端中运行harp compile命令，然后在浏览器中打开主页。如果一切代码都编写正确，你的按钮现在应该看起来像这样：

将按钮组件扩展以使用我们的调色板

如您所见，主按钮现在变成了紫色！就这么简单；您现在可以开始为按钮组件应用自定义的外观和感觉。让我们通过在_buttons.scss文件中输入以下代码来构建按钮颜色的其他变体：

.btn-secondary { 
   background-color: $off-white; 
   border-color: $off-white; 
} 

.btn-secondary:hover, 
.btn-secondary:active { 
   background-color: $grey; 
   border-color: $grey; 
} 

.btn-success { 
   background-color: $green; 
   border-color: $green; 
} 

.btn-success:hover, 
.btn-success:active { 
   background-color: $green2; 
   border-color: $green2; 
} 

.btn-info { 
   background-color: $blue; 
   border-color: $blue; 
} 

.btn-info:hover, 
.btn-info:active { 
   background-color: $blue2; 
   border-color: $blue2; 
} 

.btn-warning { 
   background-color: $yellow; 
   border-color: $yellow; 
} 

.btn-warning:hover, 
.btn-warning:active { 
   background-color: $yellow2; 
   border-color: $yellow2; 
} 

.btn-danger { 
   background-color: $red; 
   border-color: $red; 
} 

.btn-danger:hover, 
.btn-danger:active { 
   background-color: $red2; 
   border-color: $red2; 
}

这段代码有很多，但应该相当容易理解。我只是为每个按钮变体重复了为主按钮完成相同的步骤。在这个过程中，我将默认的 Bootstrap 颜色值替换成了我们的自定义调色板。完成之后，您所有的按钮现在应该看起来像这样：

扩展按钮组件以使用我们的调色板

我们现在已经成功自定义了整个按钮组件。正如我之前提到的，您可能还想对按钮做一些其他的事情。然而，至少我们已经做了足够的事情来展示您如何使组件成为自己的。这个过程的下一步是逐个通过每个 Bootstrap 组件并应用相同的自定义过程。我们称之为编写您自己的 Bootstrap 主题。

编写主题

创建自己的 Bootstrap 主题是一项相当大的任务。好消息是，一旦您完成了它，您就可以为未来的主题重用大量的代码。这就是使您的代码模块化的真正力量所在。您不必每次都从头开始，可以重用旧代码并对其进行扩展。在上一个部分中，我们学习了如何自定义按钮组件，这是我们自己的主题的开始。让我们首先看看一些常见的 Bootstrap 组件，您可能想要为您的主题进行自定义。

需要自定义的通用组件

您可以通过多种方式为主题 Bootstrap。在某些情况下，您可能只需要自定义几个组件来获得独特的外观和感觉。然而，您可能希望进行更彻底的主题化过程，以便您的主题完全不像是默认的 Bootstrap 外观。在本节中，让我们首先列出一些您最可能想要自定义的通用组件。

接下来，我们将通过编写代码来自定义一些组件，以便您了解其工作原理。以下是我推荐自定义的组件列表：

  • 按钮

  • 下拉菜单

  • 警报

  • 导航栏

  • 字体

  • 表格

这个列表只是一个起点。如果您想要创建一个独特的主题，您真的应该尝试自定义所有 Bootstrap 组件。至少，您应该将它们更改为使用您的自定义调色板、字体和布局样式。我们已经涵盖了按钮，让我们跳到自定义下拉菜单组件，它是按钮的扩展。

主题化下拉菜单组件

下拉组件需要中等程度的定制，因此这是一个很好的起点，可以了解这个过程中涉及的内容。它还基于我们为按钮编写的代码，所以是自然的第二步。需要注意的是，某些组件可能需要大量的 CSS 来定制，而其他组件可能只需要一点。让我们先为下拉创建一个新的 Sass 文件。从你的项目文件夹中，在css/components目录下创建一个名为_dropdown.scss的新文件。现在你可以先留空，只需保存它。

一旦为下拉组件创建了新的 Sass 文件，我们需要将其导入到我们的主主题文件custom.scss中。在你的文本编辑器中打开自定义样式表，并在按钮组件的@import之后插入以下代码行：

@import "components/_dropdown.scss";

现在我们已经准备好开始编写自定义的下拉样式。在你的文本编辑器中打开_dropdown.scss，并插入以下 CSS 的第一部分：

.dropdown-menu { 
   color: $primary-text; 
}

与上一节中的按钮一样，我只会更改最基本的属性来演示你可以如何自定义组件。你可以自由地自定义其他属性以获得更独特的外观和感觉。

让我们分析一下这里发生的事情。下拉组件由基础.dropdown-menu CSS 类组成。这控制了菜单的外观。在这里，我简单地更改了文本颜色，以使用$primary-text变量。

我们还需要对出现在下拉菜单中的链接列表做一些工作。在你刚刚输入的第一部分之后插入以下 CSS：

.dropdown-item:focus, 
.dropdown-item:hover { 
   color: $primary-text; 
   background-color: $secondary-background; 
}

让我分析一下这里发生的事情：

  • 这些 CSS 类控制下拉菜单中每个列表项的悬停和焦点状态。同样，我已经将其设置为使用我们的$primary-text字体颜色。

  • 当你悬停在列表项上时，背景颜色会改变。我已经将那个背景颜色更改为使用我们的$secondary-background颜色变量。在这种情况下，你应该使用背景颜色变量，而不是自定义颜色变量。这样做的原因是，随着你编写代码的进展，更容易跟踪你正在使用的背景颜色。

我们需要做的最后一件事是使用一些额外的代码更新实际的下拉按钮触发器。将 CSS 的最后部分输入到文件中：

.open > .btn-primary.dropdown-toggle:focus { 
   background-color: $purple2; 
   border-color: $purple2; 
}

当点击下拉按钮触发器时，.open CSS 类将动态地插入到 HTML 代码中。这启动了按钮类的一个独特变体，下拉切换焦点。这可能听起来很复杂，但你需要知道的是，你需要将这个选择器设置为我们的$purple2颜色，以便与按钮的其余部分匹配。

我已经覆盖了background-color和border-color属性，使用我们的调色板中的$purple2。

就这样，下拉组件现在已经被主题化，以匹配我们的外观和感觉。如果你在浏览器中预览它，当菜单打开时应该看起来像这样：

主题化下拉组件

现在我们已经完成了下拉组件，让我们继续学习如何为主题警报组件。

自定义警报组件

Bootstrap 中的警报组件主题化相当简单。与按钮组件一样，它有几个变体。让我们首先编写默认颜色方法的 CSS。创建一个名为 _alerts.scss 的新文件，并将其保存到 css/components 目录中。别忘了使用以下代码行将其导入到 custom.scss 文件中：

@import "components/_alerts.scss";

一旦你设置了文件，让我们开始编写成功警报组件的代码：

.alert-success { 
   color: $green; 
   background-color: lighten( $green, 30% ); 
   border-color: lighten( $green, 30% ); 
}

你现在看到的应该开始变得熟悉。然而，我介绍了一些新内容，我需要解释：

  • 这是一个成功警报，所以它应该是绿色的。我首先做的事情是将文本颜色更改为使用我们调色板中的绿色 $green 变量。

  • 对于 background-color 和 border-color 属性，我使用了一个新的东西，Sass 函数。在这种情况下，我想得到一个比我的文本稍微浅一点的绿色。而不是引入另一个绿色颜色变量，我可以使用 Sass 函数来加亮基 $green 变量颜色。

  • 要创建函数，你使用 lighten 关键字。在括号内，你需要包含你想要的目标变量名，在这个例子中是 $green，最后包含一个百分比值来指定加亮的程度。这是一个节省你创建更多变量的好方法。

一旦你将这段代码编写完成，在浏览器中应该看起来是这样的：

自定义警报组件

如你所见，我们正在使用我们调色板中的绿色值。让我们继续，并为剩余的警报栏变体自定义颜色。将以下代码输入到 _alerts.scss 文件中：

.alert-info { 
   color: $blue; 
   background-color: lighten( $blue, 30% ); 
   border-color: lighten( $blue, 30% ); 
} 

.alert-warning { 
   color: $yellow; 
   background-color: lighten( $yellow, 30% ); 
   border-color: lighten( $yellow, 30% ); 
} 

.alert-danger { 
   color: $red; 
   background-color: lighten( $red, 30% ); 
   border-color: lighten( $red, 30% ); 
}

其他警报遵循与成功版本相同的模式。当你完成时，在浏览器中它们应该看起来像这样：

自定义警报组件

如你所见，警报现在正在使用我们的调色板。让我们继续到最后一个组件，我将向你展示如何自定义，那就是排版。

自定义排版组件

排版组件并不难自定义。我们将基于我们设置的基变量来应用它们到适当的 HTML 标签。就像我们处理其他组件一样，首先创建一个名为 _typography.scss 的新文件，并将其保存到 css/components 目录中。一旦完成，使用以下代码行将其导入到 custom.scss 文件中：

@import "components/_typography.scss";

让我们从通过应用一些样式到基本标题标签开始自定义类型：

h1, h2, h3, h4, h5, h6 { 
   font-family: $heading-copy; 
   color: $primary-text; 
}

在这里，我简单地使用了$heading-copy变量并将其应用于所有的 HTML 标题标签。这将允许我们自定义标题字体在所有标题中使用。我还添加了$primary-text变量，以便我们的标题使用正确的文本颜色。接下来，让我们看看一些你可能想要覆盖的杂项文本样式：

small { 
   color: $light-text; 
} 

pre { 
   color: $pre-text; 
} 

code { 
   color: $code-text; 
}

正如我们处理基本变量一样，我现在将这些变量应用到实际的选择器上。让我们分解一下：

  • 对于<small>HTML 标签，我想让它看起来更微妙，所以我将文本颜色设置为使用$light-text变量。

  • 我故意为 HTML 的<pre>和<code>标签设置了颜色文本变量。现在我已经将这些变量$pre-text和$code-text应用到这些标签上。

这涵盖了您想要定制的部分基本排版样式。您还可以添加更多，但我将让您自己探索这些。这也适用于所有的 Bootstrap 组件。我们只是触及了您可以为 Bootstrap 主题进行的自定义程度的表面。然而，我认为我已经为您提供了关于您需要做什么来编写自己的 Bootstrap 主题的良好介绍。

摘要

这节课到此结束。我们在这节课中涵盖了大量新内容，包括：Sass 的基础知识、如何在 Bootstrap 中使用 Sass、如何创建 Sass 变量库、如何将这些变量应用到自定义 Bootstrap 组件，以及最后如何开始编写自己的 Bootstrap 主题。

现在是时候尝试一些动手项目了。在跳到下一节课之前，我建议您阅读《构建过程手册》（代码包）中提到的步骤。

评估

  1. 以下哪个是正确的 CSS 代码？

    1. .test { background: "red"; }

    2. class test { background: red; }

    3. body { background: red; }

    4. .test { "background": "red"; }

  2. 以下哪个是正确声明 CSS 变量的符号？

    1. var

    2. $

    3. %

    4. .

  3. 在 Sass 中导入test.scss文件的正确语法是什么？

    1. @import "components/_test.scss";

    2. #import "components/test.scss";

    3. #import "components/_test.scss";

    4. @import "components/test.scss";

  4. 以下哪个代码向文件添加了背景颜色变量？

    1. $primary-background: $white;

    2. background-color: $white;

    3. $background-color: white;

    4. background-color: white;

  5. 以下哪个选择器在鼠标悬停时选择链接？

    1. :link

    2. :hover

    3. :focus

    4. :selection

第八章. 启动你的作品集

从这一章开始，学习体验将变得动态，因为你将经历互动的实战项目，这将让你全面了解 Bootstrap 4 和 Sass，从而大大提高你对 Bootstrap 的信心。

让我们想象我们已经准备好为我们的在线作品集进行一次全新的设计。一如既往，时间很紧张。我们需要高效，但作品集必须看起来很棒。当然，它必须是响应式的。它应该在各种形态的设备上工作，因为这是我们潜在客户的关键卖点。这个项目将使我们能够利用 Bootstrap 内置的许多功能，同时我们根据需要定制 Bootstrap。

我们将构建的内容

我们草拟了一些主页模拟图。虽然我们已经在大型屏幕上有了想法，但我们从手持屏幕尺寸开始，强迫自己关注重点。

你会注意到以下功能：

  • 一个带有标志的折叠响应式导航栏

  • 一个带有四个特色作品集项目图片的滑动轮播图

  • 一个单列布局，包含三个内容块，每个内容块都有一个标题、一段简短的文字和一个邀请进一步阅读的漂亮大按钮

  • 一个带有社交媒体链接的页脚

如下截图所示，这是设计模拟图：

我们将构建的内容

总体来说，这应该为我们的工作提供了一个良好的介绍。轮播图足够高，可以为我们的作品集图片提供足够的视觉空间。快速导航到下面的内容并不困难，用户可以高效地扫描关键选项，以便在内部采取下一步行动。通过将关键链接呈现为漂亮的按钮，我们将为关键操作项建立有用的视觉层次，并确保访客不会因为手指粗大而遇到问题。

为了便于维护，我们选择在这个设计中只有两个主要断点。我们将使用单列布局来适应小于 768 像素的屏幕尺寸。然后，我们将切换到三列布局：

我们将构建的内容

你会在平板电脑和更高版本的模拟图中注意到以下功能：

  • 顶部的一个带有图标的导航栏

  • 一个全屏版本的主页轮播图，图片拉伸以填充浏览器全宽

  • 我们文本内容块的三列布局

  • 一个内容居中的页脚

色彩方案相当简单：灰色调，加上金色绿色用于链接和突出显示。

在这些设计目标下，我们可以继续前进，将内容放置到位。

检查练习文件

让我们看看这个练习的前几个文件。通过使用 Bootstrap CLI 创建一个新项目。

你可以通过在控制台中运行以下命令来安装 Bootstrap CLI：

npm install -g bootstrap-cli

然后，你可以通过运行以下命令来设置你的项目：

bootstrap new

再次，选择一个新的空 Bootstrap 项目。当提示时，选择 Panini、Sass 和 Gulp 选项：

查看练习文件

现在你需要做一些添加：

  • 创建一个新的 assets/images 文件夹。

  • 将 img 文件夹的文件复制到新的 assets/images 文件夹。它包含五张图像：

    • 一个名为 logo.png 的标志图像

    • 四个作品集项目图像

  • 向 Gulpfile.js 文件中添加一个新任务：

        // Copy assets
        gulp.task('copy', function() {
            gulp.src(['assets/**/*']).pipe(gulp.dest('_site'));
         });
  • 最后，将前面的任务添加到文件末尾的默认任务中：
         gulp.task('build', ['clean','copy','compile-js','compile
         sass','compile-html']);

包含你的 Panini HTML 模板的 html 文件夹应该具有以下文件和文件夹结构：

查看练习文件

你可以在 github.com/zurb/panini 上了解更多关于 Panini 的信息。

以下是在前一个屏幕截图中显示的文件的一些详细信息：

  • html/pages/index.html 文件包含以下 HTML 和模板代码：

    • 包含轮播图 (includes/carousel.html) 的 {{> carousel}} 片段

    • 内容块，如下所示：

              <h2>Welcome!</h2> 
              <p>Suspendisse et a.....</p> 
              <p><a href="#">See our portfolio</a></p>

  • 包含在 layouts/default.html 中的 includes/header.html 文件包含我们的导航栏，并具有以下新的修改：

    • 导航栏项已更新，以反映我们新的网站结构：
        <header role="banner"> 
          <nav class="navbar navbar-light bg-faded" role="navigation"> 
          <a class="navbar-brand" href="index.html">Bootstrappin'</a> 
           <button class="navbar-toggler hidden-md-up pull-xs-right"
         type="button" data-toggle="collapse"
        data-target="#collapsiblecontent"> 
            ? 
          </button> 
          <ul class="nav navbar-nav navbar-toggleable-sm collapse"
         id="collapsiblecontent"> 
            <li class="nav-item"> 
              <a class="nav-link active" href="#">Home <span class="sr-only">
         (current)</span></a> 
             </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Portfolio</a> 
            </li> 
             <li class="nav-item"> 
              <a class="nav-link" href="#">Team</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Contact</a> 
            </li> 
          </ul> 
          </nav> 
        </header>

  • 包含在 layouts/default.html 中的 includes/footer.html 文件包含以下项目：

    • 页脚中的标志

    • 社交链接：

        <footer role="contentinfo"> 

            <p><a href="{{root}}index.html"><img 
                src="img/logo.png"
                width="80" alt="Bootstrappin'"></a></p> 

            <ul class="social"> 
              <li><a href="#" >Twitter</a></li> 
              <li><a href="#" >Facebook</a></li> 
              <li><a href="#" >LinkedIn</a></li> 
              <li><a href="#" >Google+</a></li> 
              <li><a href="#" >GitHub</a></li> 
            </ul> 

        </footer>

除了导航栏外，还没有添加任何 Bootstrap 类来样式化轮播图、列或图标。

接下来，我们将讨论如何使用 Sass 来自定义你的项目。现在你可以看到 app.scss 文件导入了 includes/_navbar.scss 文件。

除了前面的修改，你也可以从 Lesson 8/start 文件夹中找到的文件开始。在这个文件夹中，首先运行 npm install 和 bower install 命令。运行 npm 和 bower 命令后，你可以运行 bootstrap watch 或 gulp 命令来在浏览器中查看结果。

你将看到导航栏，然后是作品集图像：

查看练习文件

文本块和页脚，包含社交链接，在图像之后：

查看练习文件

目前还没有太多可说的。让我们开始转换。

我们将首先应用 Bootstrap 类，这样我们就可以快速高效地使用 Bootstrap 的默认 CSS 样式和 JavaScript 行为来建立我们界面元素的基础。

标记轮播图

让我们开始制作我们的轮播图，它将在我们的作品集中旋转四张特色图像。

Bootstrap 的轮播图标记结构可以在其文档页面 getbootstrap.com/components/carousel/ 中找到。

按照示例中使用的模式，我们将从这个结构开始设置基本元素。这将包含轮播图的全部部分，然后是进度指示器：

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

注意，我使用了一个带有 ID (id="carousel-feature") 的 div 标签来建立 carousel 的基本上下文。carousel 类将 Bootstrap 的轮播 CSS 应用到轮播元素上，为轮播指示符、轮播项以及下一页和上一页控制添加适当的样式。

carousel-feature ID 必须用于进度指示器的 data-target 属性中。这表示 JavaScript 插件将更新具有 active 类的当前活动轮播项的指示器。我们已经为第一个指示器提供了该类以开始操作。从那里开始，JavaScript 接管一切。它移除该类，并在轮播循环时将其添加到适当的指示器上。

此外，请注意，data-slide-to 的值从 0 开始计数。这是 JavaScript 和其他编程语言的常规行为。只需记住：从零开始计数，而不是从一。

在指示符之后，carousel-inner 类的元素紧随其后。这作为包装器来包含所有的轮播项——在这种情况下，是我们的图片。

轮播项位于 carousel-inner 内。它们是一组 div 标签，每个标签都有 class="item"。修改第一个项，使其同时具有 item 和 active 类，以便一开始就可见。

因此，标记结构如下所示：

<!-- Wrapper for slides --> 

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active"> 
        <img src="img/project1.png" alt="Streetart.com Homepage"> 
    </div> 
    <div class="carousel-item"> 
        <img src="img/project2.png" alt="Your bussiness"> 
    </div> 
    <div class="carousel-item"> 
        <img src="img/project3.png" alt="Your blog"> 
    </div> 
    <div class="carousel-item"> 
        <img src="img/project4.png" alt="Menstrualcups.eu Homepage"> 
    </div> 
</div><!-- /.carousel-inner -->

在轮播项之后，我们需要添加轮播控制。这些将在轮播的左右边缘提供下一页和上一页按钮。在控制之后，我们将使用关闭的 div 标签关闭整个标记结构：

<!-- Controls --> 
  <a class="left carousel-control" href="#carousel-feature" role="button" data-slide="prev"> 
    <span class="icon-prev" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-feature" role="button" data-slide="next"> 
    <span class="icon-next" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div><!-- /#homepage-feature.carousel -->

提示

轮播控制需要使用基本轮播元素的 ID (#carousel-feature) 作为它们的 href 值。然后，代码看起来是这样的：<a class="left carousel-control" href="#carousel-feature" role="button" data-slide="prev">

现在，你可以在文件中写下轮播的完整代码。一旦这段代码就位，如果没有运行 bootstrap watch，就运行 gulp 命令。Bootstrap 的样式和 JavaScript 应该开始工作。你的图片现在应该作为一个滑动轮播工作！

注意，轮播组件需要 jQuery 和 JavaScript 插件。Gulp 构建过程将 jQuery 和所有插件代码合并到单个 app.js 文件中。

默认情况下，轮播每 5 秒滑动一次。让我们将间隔设置为 2 秒，以便我们的用户有时间欣赏我们工作的全部美丽：

  1. 创建一个名为 js/main.js 的新文件。

  2. 添加以下行。我们将从检查页面元素是否就绪的 jQuery 方法开始，然后以 2,000 毫秒的间隔初始化轮播：

          $( document ).ready(function() { 
        $('.carousel').carousel({ 
          interval: 2000 
        }); 
      });

  3. 注意，你应该自动从 assets 文件夹复制 js/main.js 文件并将其链接到文件中，或者将其添加到 Gulpfile.js 文件中的 compile-js 任务中：

          gulp.task('compile-js', function() { 
        return gulp.src([bowerpath+ 
       'jquery/dist/jquery.min.js', bowerpath+ 
       'tether/dist/js/tether.min.js', bowerpath+ 
       'bootstrap/dist/js/bootstrap.min.js','js/main.js']) 
     .pipe(concat('app.js')) 
     .pipe(gulp.dest('./_site/js/')); 
    });

    注意

    你还应该考虑将 js/main.js 文件添加到 Gulp 监视任务中。

  4. 保存并重新启动您的应用程序。您将看到间隔已增加到 2 秒。

与我们刚才通过 JavaScript 传递选项不同，您也可以通过数据属性传递它们。轮播图的间隔可以通过 data-interval 属性设置：

<div id="carousel-feature" class="carousel slide" data-ride="carousel" data-interval="2000">

关于此和其他选项，请参阅 Bootstrap 轮播图文档，链接为 getbootstrap.com/javascript/#carousel。

我们将在本章后面部分返回来定制轮播图、其指示器和其图标的样式。在下一节中，您将学习如何使用 JavaScript 和 CSS (SCSS) 来修改轮播图的工作方式。

轮播图是如何工作的？

jQuery 插件更改轮播图项的 CSS 类。当页面加载时，第一个项已经具有 active 类；当间隔过去后，插件将 active 类移动到下一个项，依此类推。该插件不仅更改 active 类的位置，还暂时添加 next 和 left 类。与这些类上的 CSS3 动画一起，创建了滑动效果。您可以在以下 URL 上了解更多关于 CSS3 动画的信息：

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations。

transition 被设置为 carousel-inner 类，如下所示：

transition: transform .6s ease-in-out;

在这个声明中，ease-in-out 值设置了动画的过渡时间函数（过渡效果）；有关更多信息，请参阅 developer.mozilla.org/en/docs/Web/CSS/transition-timing-function。本质上，它允许您建立一个加速度曲线，这样过渡的速度可以在其持续时间中变化。稍后，我们将看到您还可以使用关键帧来描述过渡的不同状态。

执行的转换是 translate3ds。translate3d() CSS 函数将元素的位置移动到 3D 空间中。更多信息可以在 developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d 找到。轮播图按照以下方式在 X-轴上移动轮播图项：

      &.next, 
      &.active.right { 
        left: 0; 
        transform: translate3d(100%, 0, 0); 
      }

通过添加新的动画来更改轮播图

当我们用上一节中描述的另一个动画替换 CSS 动画时，轮播图的滑动效果会改变。

Daniel Ede 的 Animate.css 项目包含了许多您可以在项目中使用的 CSS 动画。您也可以将这些动画用于我们的轮播图。您可以在 daneden.github.io/animate.css/ 找到这个库。

我们可以使用 SCSS 代码创建新的动画。因为我们的构建过程已经运行了 autoprefixer，所以你不需要考虑供应商前缀。在我们的示例中，我们将使用 Animate.css 库中的 flipInX 动画，该动画会在 x 轴上旋转图像。

现在将以下 SCSS 代码添加到 scss/includes/_carousel.scss 文件的末尾：

@keyframes flipInX { 
  from { 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    animation-timing-function: ease-in; 
    opacity: 0; 
  } 
  40% { 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    animation-timing-function: ease-in; 
  } 
  60% { 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    opacity: 1; 
  } 
  80% { 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
  } 
  to { 
    transform: perspective(400px); 
  } 
} 
.flipInX { 
  backface-visibility: visible !important; 
  animation-name: flipInX; 
} 
.carousel-inner { 
  position: relative; 
  width: 100%; 
  overflow: hidden; 

  > .carousel-item { 
    position: relative; 
    display: none; 
    transition: none; 
    backface-visibility: visible !important; 
    animation-name: flipInX; 
    animation-duration: 0.6s; 

    // Account for jankitude on images 
    > img, 
    > a > img { 
      @extend .img-fluid; 
      line-height: 1; 
    } 
  } 
  > .active, 
  > .next, 
  > .prev { 
    display: block; 
  } 
  > .active { 
    top: 0; 
  } 
  > .next, 
  > .prev { 
    position: absolute; 
    left: 0; 
    width: 100%; 
  } 
  > .next { 
    top: 100%; 
  } 
  > .prev { 
    top: -100%; 
  } 
  > .next.left, 
  > .prev.right { 
    top: 0; 
  } 
  > .active.left { 
    top: -100%; 
  } 
  > .active.right { 
    top: 100%; 
  } 
} 
@keyframes flipInX { 
  from { 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    animation-timing-function: ease-in; 
    opacity: 0; 
  } 
  40% { 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    animation-timing-function: ease-in; 
  } 
  60% { 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    opacity: 1; 
  } 

  80% { 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
  } 
  to { 
    transform: perspective(400px); 
  } 
} 
.flipInX { 
  backface-visibility: visible !important; 
  animation-name: flipInX; 
} 
.carousel-inner { 
  position: relative; 
  width: 100%; 
  overflow: hidden; 

  > .carousel-item { 
    position: relative; 
    display: none; 
    transition: none; 
    backface-visibility: visible !important; 
    animation-name: flipInX; 
    animation-duration: 0.6s; 
    // Account for jankitude on images 
    > img, 
    > a > img { 
      @extend .img-fluid; 
      line-height: 1; 
    } 
  } 
  > .active, 
  > .next, 
  > .prev { 
    display: block; 
  } 
  > .active { 
    top: 0; 
  } 
  > .next, 
  > .prev { 
    position: absolute; 
    left: 0; 
    width: 100%; 
  } 
  > .next { 
    top: 100%; 
  } 
  > .prev { 
    top: -100%; 
  } 
  > .next.left, 
  > .prev.right { 
    top: 0; 
  } 
  > .active.left { 
    top: -100%; 
  } 
  > .active.right { 
    top: 100%; 
  } 
}

如果已经运行了 bootstrap watch 或 gulp 命令，你可以在浏览器中检查结果。你会发现图像现在在 x-轴上旋转。

Bootstrap 为大多数插件的独特操作提供了自定义事件。Carousel 插件触发 slide.bs.carousel（在滑动过渡开始时）和 slid.bs.carousel（在滑动过渡结束时）事件。你可以使用这些事件来添加自定义 JavaScript 代码。例如，你可以在事件中通过将以下 JavaScript 添加到 js/main.js 文件中来更改页面的背景颜色：

$('.carousel').on('slide.bs.carousel', function () { 
  $('body').css('background-color','#'+(Math.random()*0xFFFFFF<<0).toString(16)); 
});

注意，gulp watch 任务没有设置为 js/main.js 文件，所以你必须在完成更改后手动运行 gulp 或 bootstrap watch 命令。

对于对插件行为的更高级更改，你可以通过使用例如以下 JavaScript 代码来覆盖其方法：

!function($) { 
var number = 0; 
    var tmp = $.fn.carousel.Constructor.prototype.cycle; 
    $.fn.carousel.Constructor.prototype.cycle = function (relatedTarget) {   
        // custom JavaScript code here 
        number = (number % 4) + 1; 
        $('body').css('transform','rotate('+ number * 90 +'deg)'); 
        tmp.call(this); // call the original function 
    }; 

}(jQuery);

此代码设置了没有供应商前缀的 transform CSS 属性。autoprefixer 只为你的静态 CSS 代码添加前缀。为了实现全浏览器兼容性，你应该在 JavaScript 代码中自己添加供应商前缀。

小贴士

Bootstrap 专门使用 CSS3 进行动画，但 Internet Explorer 9 不支持必要的 CSS 属性。

让我们继续利用 Bootstrap 的默认样式，并为轮播图下方的内联内容设置一个响应式网格。

创建响应式列

我们有三个文本块，每个块都有一个标题、一个简短的段落和一个链接。在约平板宽度或更宽的屏幕尺寸下，我们希望这些内容以三列的形式布局。在较窄的屏幕宽度下，内容将组织在一个全宽度列中。

请花点时间访问并阅读 Bootstrap 移动优先响应式网格的文档。您可以在 getbootstrap.com/css/#grid 找到它。

简而言之，网格基于一个 12 列系统。基本的类结构允许我们使用 col-12 类实现全宽度，col-6 类实现半宽度，col-4 类实现三分之一宽度，依此类推。

多亏了媒体查询的创造性使用，Bootstrap 的网格可以非常擅长响应不同的屏幕尺寸。回想一下，我们希望我们的欢迎信息在屏幕尺寸为平板电脑时采用单列布局，然后在约 768 像素的大屏幕上适应三列布局。方便的是，Bootstrap 在 768 像素处有一个内置的断点，这是在 $grid-breakpoints Sass 变量中定义的默认值。超过 768 像素是大型范围，从 992 像素开始，也在 $grid-breakpoints Sass 变量中定义，然后是超大型屏幕，测量值为 1,200 像素及以上。我将把这些称为 Bootstrap 的超小、小、中、大和超大断点。

使用中等断点，有一个特殊的列类，使用公式 col-md-。因为我们希望在小型断点之后有三个列，所以我们将使用 class="col-md-4"。在中等断点以下，元素将保持全宽。在其上方，它们将变为三分之一的宽度并并排排列。注意，导航栏在 768 像素处也会折叠。完整的结构如下，其中段落内容被省略以清晰起见：

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-4"> 
    <h2>Welcome!</h2> 
    <p>Suspendisse et arcu felis ...</p> 
    <p><a href="#">See our portfolio</a></p> 
  </div> 
  <div class="col-sm-4"> 
    <h2>Recent Updates</h2> 
    <p>Suspendisse et arcu felis ...</p> 
    <p><a href="#">See what's new!</a></p> 
  </div> 
  <div class="col-sm-4"> 
    <h2>Our Team</h2> 
    <p>Suspendisse et arcu felis ...</p> 
    <p><a href="#">Meet the team!</a></p> 
  </div> 
  </div><!-- /.row --> 
</div><!-- /.container ?

注意

你应该在 html/pages/index.html 文件中编辑前面的代码。

如果你不太熟悉 container 和 row 类，以下是它们的作用：

  • container 类限制了内容的宽度，并使其在页面中居中

  • row 类为我们的列提供包装，允许额外的左右边距用于列间隙

  • container 类和 row 类都是 clearfixed，这样它们可以包含浮动元素并清除任何之前的浮动元素

现在，保存文件，如果你还没有这样做，运行 bootstrap watch 或 gulp 命令。当你的浏览器宽度超过 768 像素时，你应该会看到以下三列布局形成：

创建响应式列

调整浏览器窗口大小至 768 像素以下，你会看到它恢复为单列布局：

创建响应式列

在我们的响应式网格就位后，让我们利用 Bootstrap 的按钮样式将这些链接转换为清晰的行动号召。

将链接转换为按钮

将我们的关键内容链接转换为视觉上有效的按钮是直接的。我们将使用的键类如下：

  • btn 类将链接样式化为按钮。

  • btn-primary 类将按钮的颜色设置为我们的主要品牌颜色。

  • pull-xs-right 类将链接浮动到右边，将其移动到更宽的空间，使其成为一个更有吸引力的目标。类名中的 xs 部分表示它应该应用于每个比超小断点 0 像素更宽的视口。pull-md-right 类仅在视口宽度超过 768 像素时浮动元素。

将这些类添加到我们三个内容块的末尾的链接中：

<p><a class="btn btn-primary pull-xs-right" href="#">See our portfolio</a></p>

保存。你应该会看到以下结果：

将链接转换为按钮

我们已经取得了很大的进步。我们的关键元素正在成形。

在我们的基本标记结构就绪后，我们可以开始处理更细致的细节。达到这个目标将需要一些自定义 CSS。我们将通过利用 Bootstrap 的 Sass 文件的力量来处理这个问题。如果你对 Sass 不熟悉，不用担心！我会一步步带你了解。

理解 Sass 的强大功能

在接下来的几节中，我们将组织、编辑、自定义和创建 SCSS 文件，以生成我们设计所需的 CSS。

注意

如果你不太熟悉 Sass 并且想了解更多关于 Sass 的信息，我建议阅读我的 Sass and Compass Designer's Cookbook 书籍 (www.packtpub.com/web-development/sass-and-compass-designers-cookbook) 或 www.sass-lang.com/ 的文档。

简而言之，我们可以这样说，使用 Sass 预处理器生成 CSS 是一种令人兴奋和自由的体验。Sass 的工作优势将在下一节中讨论。

根据我们的需求自定义 Bootstrap 的 Sass

当我们与 Bootstrap 的 Sass 文件一起工作时，我们将通过以下方式对它们施加相当大的控制：

  • 组织我们的 scss 文件夹，以便我们能够灵活自由地完成所需的工作，同时使未来的维护更加容易

  • 自定义 Bootstrap 的 Sass 变量

  • 创建我们自己的几个自定义 Sass 文件

  • 在我们的网站资源中整合一组基于字体的图标，提供我们社交媒体链接所需的图标

换句话说，我们将做的不仅仅是学习和应用 Bootstrap 的约定。我们将使它们按照我们的意愿弯曲。

在本章的练习文件中，打开 scss 目录。在里面，你应该看到以下结构：

根据我们的需求自定义 Bootstrap 的 Sass

为了为接下来的内容做准备，我已经通过解释新的组织层来给你一个先发优势。所有的 Bootstrap Sass 文件都保存在 bower_components/bootstrap/scss/ 文件夹中。你不应该修改这些文件；你可以（重新）使用它们，如下一节所述。保持原始文件不变，使你能够在不撤销修改的情况下更新 Bootstrap。

首先，app.scss 文件导入两个部分文件：

@import "includes/variables"; 
@import "includes/bootstrap";

文件 includes/_bootstrap.scss 是原始 bootstrap.scss 文件的修改版。此文件导入所有其他原始 Bootstrap 文件，并在编译过程中使用，以从所有导入的 Sass 文件中创建一个统一的样式表。文件 includes/_variables.scss 是原始 _variables.scss 文件的修改版。此文件包含所有 Bootstrap 的 Sass 变量的声明。因为 includes/_variables.scss 文件在原始 _variables.scss 文件之前导入，所以其中的变量可以用来覆盖 Bootstrap 的默认设置。

为什么要费这个劲？因为我们很快就会修改 Bootstrap 的默认设置，并创建我们自己的自定义 Sass 文件。当我们这样做时，我们可以保持Bootstrap文件夹及其文件不变，同时在我们将要创建的自定义文件中进行调整。

让我们开始定制！我们将从定制 Bootstrap 的变量并添加一些我们自己的新变量开始。

定制变量

接下来，我们将创建 Bootstrap 变量文件的副本，并根据自己的需求进行定制：

  1. 在scss文件夹中找到includes/_variables.scss文件，并在你的编辑器中打开它。

  2. 在浏览这个文件的每一行时，你会看到用于设置 CSS 值的变量，从基本的颜色到主体背景、字体族、导航栏高度和背景等，应有尽有。这看起来非常美观。而且，玩弄这些变量更有趣。在我们开始玩弄之前，让我们创建这个文件的副本，这样我们就可以保留 Bootstrap 的默认变量，以防我们以后想恢复到它们。

接下来，让我们实现我们的新配色方案：

  1. 在我们新的includes/_variables.scss文件的最顶部部分，你会看到 Bootstrap 的默认灰度和品牌颜色变量：

          $gray-dark:                 #373a3c; 
      $gray:                      #55595c; 
      $gray-light:                #818a91; 
      $gray-lighter:              #eceeef; 
      $gray-lightest:             #f7f7f9;

  2. 我们有我们想要的特定值。所以，让我们简单地替换我们想要的值（如果你喜欢，可以自由地进行计算！）然后，我们将添加两个额外的变量来涵盖我们需要的完整范围。结果如下：

          $gray-dark:              #454545; 
      $gray:                   #777; 
      $gray-light:             #aeaeae; 
      $gray-lighter:           #ccc; 
      $gray-lightest:          #ededed;

  3. 接下来，我们将更新Brand colors下的$brand-primary变量。我们将将其调整为我们的金色色调：

          // Brand colors 
      // ------------------------- 
      $brand-primary:         #c1ba62;

  4. 当你运行 bootstrap watch（或 gulp）命令时，浏览器会在保存includes/_variables.scss文件后自动重新加载。

如果这样做成功，最明显的改变将是链接颜色和具有btn-primary类的按钮，它们都将采用新的$brand-primary颜色。

定制导航栏

现在，让我们编辑设置导航栏高度、颜色和悬停效果的变量。

让我们从更改高度开始。默认情况下，导航栏的填充是$spacer / 2，总高度由字体大小和垂直填充决定。

在本地的includes/_variables.scss文件中，搜索$navbar-padding-vertical变量，并按以下方式更新它。这将扩展导航栏的高度：

$navbar-padding-vertical: $spacer;

现在，我们可以设置导航栏的背景颜色。原始的html/includes/headers.html文件中的 HTML 代码有一个bg-faded类。因为我们想让导航栏有白色背景，所以我们可以简单地删除这个类；主体已经有白色背景，不设置导航栏的背景属性也会使导航栏变成白色。

你也可以使用 Sass 和 Bootstrap 的混入来生成一个新的bg-white类。创建一个新的文件scss/includes/_backgrounds.scss，并将以下 SCSS 代码编辑到其中：

@include bg-variant('.bg-white', #fff);

注意，bg-variant 混合器使用 !important 声明了 background-color 和 color 属性。因为 color 属性默认设置为 #fff（白色），所以使用 bg-variant 混合器似乎不是最灵活的解决方案。在 scss/includes/_navbar.scss 文件中为导航栏选择器设置 background-color 属性是一个更好的解决方案。你可以按照以下方式设置 background-color 属性：

.navbar { 
 background-color: #fff; 
}

导航栏链接的颜色由 .navbar-light 或 .navbar-dark 类设置。你应该为具有深色背景的导航栏使用 .navbar-dark 类，为浅色背景使用 .navbar-light 类。我们 html/includes/header.html 文件中的导航栏已经具有 .navbar-light 类，因此为了更改链接颜色，你将不得不修改 includes_variables.scss 文件中的 $navbar-light-* 变量，如下所示：

    $navbar-light-color:            $gray; 
    $navbar-light-hover-color:      $link-hover-color; 
    $navbar-light-active-color:     $link-hover-color; 
    $navbar-light-disabled-color:   $gray-lighter;

注意，我们之前已经更改了 $gray 和 $gray-lighter 变量，并且 $link-hover-color 变量的值与 $brand-primary 变量相同，我们将其设置为 #c1ba62; 颜色值。

如果你喜欢为悬停和活动链接使用不同的背景颜色，你可以使用你喜欢的文本编辑器打开 scss/includes/_navbar.scss 文件并执行以下步骤：

  1. 首先，使用以下 SCSS 代码删除垂直填充：

          .navbar { 
        padding-top: 0; 
        padding-bottom: 0; 
      }

  2. 现在应用 .nav-link 选择器的填充，并设置悬停和活动状态下的背景颜色：

            .navbar { 
          .nav-link 
          { 
            padding: $spacer;   
            &:hover, 
            &.active { 
              background-color: $gray-lightest; 
            } 
          } 
        }

  3. 因为 .navbar-brand 有更大的字体大小，所以你必须为这个选择器调整填充：

          .navbar { 
        .navbar-brand { 
          padding: ($spacer - ((($font-size-lg - $font-
            size-base) * $line-height) / 2)); 
        } 
      }

如果你还没有运行 bootstrap watch 命令，现在运行它，你应该在你的导航栏中看到以下新功能：

  • 它应该增加大约 16 像素（2 x 1em）的高度

  • 其背景颜色应变为白色

  • 导航项背景在悬停和活动状态下会改变

  • 链接文本应在悬停和活动时激活我们的品牌主色，如下面的截图所示：

自定义导航栏

现在，让我们将我们的标志图像放置到位。

添加标志图像

在 assets/images 文件夹中找到 logo.png 文件。你可能注意到其尺寸很大，宽度为 900 像素。在我们的最终设计中，它将只有 120 像素宽。因为像素将被压缩到更小的空间中，这是确保图像在所有设备上看起来都很好的一种相对简单的方法，包括视网膜显示屏。同时，该图像的文件大小已经为网络优化，仅为 19 KB。

因此，让我们将其放置到位并限制其宽度：

  1. 在你的文本编辑器中打开 html/includes/header.html 文件。

  2. 在导航栏标记中搜索此行：

          <a class="navbar-brand"
       href="index.html">Bootstrappin'</a>

  3. 将上一步的 HTML 替换为以下图像标签，包括其 alt 和 width 属性：

          <a class="navbar-brand" href="index.html"><img src="
      {{root}}/images/logo.png" alt="Bootstrappin'"
        width="120"></a>

    提示

    一定要包含宽度属性，将其宽度设置为 120 像素。否则，它将在页面上显得非常大。

如果你还没有运行 bootstrap watch 命令，现在运行它。你应该看到标志已经放置到位：

添加标志图像

您可能会注意到导航栏的高度已经增加，并且其底部边缘不再与活动导航项的底部边缘对齐。这是由于之前围绕bar-brand类放置的填充造成的。我们需要调整适当的填充值。我们可以在几个快速步骤中做到这一点：

  1. 使用您的文本编辑器再次打开scss/includes/_navbar.scss文件。按照以下方式更改bar-brand类的填充：

    padding: ($spacer - ((2.16rem - ($font-size-base * $line-height)) / 2));

  2. 当将图像宽度调整为 120 像素时，其高度变为大约 34.51 像素，34.51 / 16 = 2.16 rem。

Sass 的力量继续给人留下深刻印象。当然，我们也应该注意折叠的响应式导航，所以将浏览器窗口调整到小于 768 像素的视口大小。

导航现在应该看起来如下截图所示：

添加标志图像

您会看到标志周围的填充不足，切换按钮也没有与标志对齐。我们将再次使用 Sass 来纠正这些问题。再次打开scss/includes/_navbar.scss文件。请记住，我们之前将导航栏的垂直填充设置为 0。现在将此声明包裹在一个 CSS 媒体查询中，如下所示，以仅适用于较大的视口：

  @include media-breakpoint-up(md) { 
    padding-top: 0; 
    padding-bottom: 0; 
  }

如前所述，media-breakpoint-up混合是 Bootstrap Sass 混合的一部分，可以根据 Bootstrap 的媒体查询范围隐藏或显示元素。前面的 SCSS 代码编译成 CSS 如下：

@media (min-width: 768px) { 
  .navbar { 
    padding-top: 0; 
    padding-bottom: 0; 
  } 
}

要使标志与切换按钮对齐，您必须将标志图像的display属性从block更改为inline-block。您可以通过编辑scss/includes/_navbar.scss文件中的以下 SCSS 代码来实现这一点：

.navbar { 
  @include media-breakpoint-down(sm) { 
    .navbar-brand, 
    .nav-item { 
      float: none; 
      > img { 
        display: inline-block; 
      } 
    } 
  } 
}

最后，检查您最新的scss/includes/_navbar.scss文件。在您的浏览器中，结果应该如下截图所示：

添加标志图像

现在，让我们添加图标功能。

添加图标

是时候给我们的导航添加图标了。Bootstrap 3 附带的一些Glyphicons在 Bootstrap 4 中被删除了。在这里，我们将使用由Font Awesome提供的庞大图标库。其他图标字体集可以在网上找到。

Font Awesome 是在编写本书时提供 628 个图标的字体图标集。Font Awesome 图标是免费、开源的，并且旨在与 Bootstrap 良好协作。您可以在fortawesome.github.io/Font-Awesome/查看 Font Awesome 的主页。

让我们将 Font Awesome 整合到我们的工作流程中。

在这里，我们将 Font Awesome 的 CSS 代码编译到我们的主app.css文件中：

  1. 首先，通过在控制台中运行以下命令，在您的项目文件夹中安装 Font Awesome：

     bower install font-awesome --save

  2. 之后，您可以将 Font Awesome 的主 SCSS 文件导入到您的scss/app.scss文件中：

          @import "includes/variables"; 
 @import "font-awesome/scss/font-awesome.scss"; 
      @import "includes/bootstrap"; 
      @import "includes/navbar";

  3. 最后但同样重要的是，将字体文件复制到您的资产文件夹中：

          cp bower_components/font-awesome/fonts/*
       assets/fonts/

  4. Font Awesome 的scss文件包括一个变量，指定了 Font Awesome 网络字体的路径。我们需要检查以确保此变量与我们的文件夹结构匹配。确保在our scss/includes/_variables.scss文件中将$fa-font-path变量设置为../fonts，如下所示：

             $fa-font-path:    "../fonts";

    注意

    此路径相对于编译后的 CSS 文件，该文件位于我们的css目录中

    现在，在html/includes/header.html文件中，让我们更新团队导航项的图标，使用名为fa-group的 Font Awesome 图标。我们还需要独立的fa类：<i class="fa fa-group"></i> 团队

  5. 将此更改保存到html/includes/header.html文件中，并刷新你的浏览器。

如果一切按预期工作，你应该会看到以下结果：

添加图标

小贴士

如果你看到一个奇怪的符号或什么都没有，那是一个迹象，表明网络字体没有通过。请确保你的图标类是正确的（包括fa类），Font Awesome 网络字体文件位于你的字体目录中，并且路径在scss/includes/_variables.scss文件中设置正确。

现在更新html/includes/header.html文件中的图标标记，以便使用所需的 Font Awesome 图标。

Font Awesome 图标页面fortawesome.github.io/Font-Awesome/icons/允许你扫描你的选项。我们的原型在导航栏中需要这些图标：

<i class="fa fa-home"></i> Home 
<i class="fa fa-desktop"></i> Portfolio 
<i class="fa fa-group"></i> Team 
<i class="fa fa-envelope"></i> Contact

这会产生以下结果：

添加图标

这完成了我们的导航，或者几乎完成了。我们无意中创建了一个小问题，在继续之前我们需要修复它。

是时候转向轮播了。

样式化轮播

我们将采用 Bootstrap 的默认轮播样式，并应用一些重要的自定义。让我们创建一个新的_scss/includes/carousel.scss文件，并将其导入到我们的scss/app.scss文件中。

现在开始定制和美化。

添加顶部和底部填充

让我们在.carousel元素本身添加一些顶部和底部填充，并使用我们的@gray-lighter颜色作为背景色：

.carousel { 
  padding-top: 4px; // added 
  padding-bottom: 28px; // added 
  background-color: @gray-lighter; // added 
}

保存更改并重新加载（运行bootstrap watch或gulp命令），你会在我们新创建的空间中看到浅灰色背景出现在轮播图像的上方和下方。这为它们提供了些许框架，使它们从上方和下方的其他元素中脱颖而出。稍后，我们将利用额外的底部填充将轮播指示器定位，以便它们能够更加清晰地突出显示。

现在来样式化轮播指示器。

重新定位轮播指示器

轮播指示器用于告知用户轮播中有多少张幻灯片，并突出显示当前旋转的位置。目前，这些指示器几乎看不见，位于我们投资组合图像的底部中心边缘附近：

重新定位轮播指示器

注意，我已经临时将边框颜色设置为白色，以便前面的图片如下所示：

.carousel-indicators li {     
  border: 1px solid white; 
}

让我们将这些指示器移动到它们自己的空间，就在图像下方：

  1. 我们希望将指示器向下移动，使其更靠近底部边缘，进入我们之前添加填充所创建的浅灰色区域。因此，让我们调整底部定位。此外，我们需要通过将其设置为 0 来移除默认的底部边距。在 _scss/includes/carousel.scss 文件中写下以下 SCSS 代码：

          .carousel-indicators { 
       position: absolute; 
        bottom: 0; 
        margin-bottom: 0; 
      }

  2. 保存文件；如果你已经运行了 bootstrap watch 命令，你的浏览器将自动重新加载。

这就得到了我们想要的结果。指示器现在在所有屏幕尺寸上都保持在期望的空间中：

重新定位轮播指示器

现在我们将更新它们的外观，使它们更大，更容易看到。

调整指示器的样式

我们将通过使用我们的灰色变量来使我们的轮播指示器更明显。我们还将稍微增加它们的大小。我们可以在 scss/includes/_variables.scss 文件中开始这样做：

  1. 在 scss/includes/_variables.scss 中，在 $carousel-control 变量之后，你会找到两个以 $carousel-indicator 开头的变量：

             $carousel-indicator-active-bg:          #fff; 
         $carousel-indicator-border-color:       #fff;

    这些用于在默认指示器周围提供白色边框，并填充活动指示器的背景颜色。

  2. 在这里添加一个默认背景颜色变量，这样我们就可以用我们的 $gray-light 值填充默认指示器：

            $carousel-indicator-bg:          $gray-light;

  3. 然后，我们将更新活动背景颜色：

            $carousel-indicator-active-bg:    $gray-lightest;

  4. 最后，我们将使边框颜色透明：

            @carousel-indicator-border-color: transparent;

  5. 保存，编译，并刷新。

目前，这会使除了活动项之外的所有项都不可见：

调整指示器的样式

现在让我们在 _scss/includes/_carousel.scss 文件中做一些工作：

  1. 在 _scss/includes/_carousel.scss 文件中，移动到之前工作的 .carousel-indicator 规则的第一组：

              .carousel-indicators { 
            position: absolute;

  2. 在它下面寻找嵌套的 li 选择器。在这里，我们将编辑几个值。具体来说，我们将执行以下操作：

    • 将宽度和高度增加到 16px

    • 移除边距

    • 使用我们新创建的变量 $carousel-indicator-bg 添加背景颜色

    • 完全移除边框线（我们为边框变量设置的透明值现在只是一个安全措施）

    • 我已经在以下代码片段中实现了这些更改：

                   .carousel-indicators {
               position: absolute;
               bottom: 0;
               margin-bottom: 0;
               li {
               background-color: $carousel-indicator-bg;
               &,
              &.active {
              border: 0;
              height: 16px;
              width: 16px;
              margin: 0;
             }
            }
            }

  3. 在 Bootstrap 的默认 CSS 中，活动指示器比普通指示器（12 px）略大；因此，你必须为普通和活动指示器设置新的尺寸（16 px）。你可以通过使用 Sass 和父引用，如前面的代码片段中所做的那样来完成这个任务。考虑以下 SCSS 代码片段：

           .selector { 
        &, 
        &.active, 
        &.otherstate { 
          property: equal-for-all-states; 
        } 
      }

  4. 这段 SCSS 代码编译成如下所示的 CSS 代码：

          .selector, .selector.active, .selector.otherstate { 
        property: equal-for-all-states; 
      }

保存并查看结果！

调整指示器的样式

轮播调整完成！在这个过程中，我们学到了很多——关于 Bootstrap 的很多，也许还有一点关于 Sass。

让我们继续到下一部分。剩下的部分相当简单。

调整列及其内容

让我们进一步调整三个标题欢迎！、最新更新和我们的团队下的内容块：

  1. 首先，让我们将这些三个块中的按钮添加上箭头圆圈图标。回想一下，我们正在使用 Font Awesome 来选择图标。

  2. 访问 Font Awesome 文档，fortawesome.github.io/Font-Awesome/icons/。您将找到我们需要的图标：调整列及其内容

  3. 在html/pages/index.html文件中，为每个链接内部添加一个带有适当类别的i标签。这是第一个例子，我已经通过在元素之间添加额外的换行符来使其间隔更开：

          <p> 
        <a class="btn btn-primary pull-right" href="#"> 
          See our portfolio  <i class="fa fa-arrow-circle- 
            right"></i> 
        </a> 
      </p>

  4. 对每个链接重复此操作。

现在，您应该在三个按钮中看到所需的图标：

调整列及其内容

在此同时，让我们在轮播和这段文字部分之间添加一点垂直填充。目前，它们之间的间隔相当紧凑。

此时出现的问题是，在哪里最好地编写我们将需要的样式；在页面内容部分添加额外的填充可能现在和将来都会成为我们的常规做法。让我们创建一个 Sass 文件来保存这些以及其他对页面普通内容的调整（实际上，我们还需要这个文件来进行一个额外的、更重要的响应式调整，所以这样做似乎是合理的）：

  1. 创建一个名为scss/includes/_page-contents.scss的文件。

  2. 将其保存在您的scss文件夹中，与您的其他自定义 Sass 文件放在一起：

          <image of the directory scss>

  3. 注释文件：

          // 
      // Page Contents 
      // --------------------------

  4. 现在，让我们为这个目的创建一个合理的类，并添加我们想要的填充，包括底部的一些填充：

          .page-contents { 
        padding-top: 20px; 
        padding-bottom: 40px; 
      }

  5. 保存文件。

  6. 将scss/includes/_page-contents.scss文件添加到scss/main.scss文件中的导入部分。我将在文件底部附近添加一个新的部分，并添加一个有用的注释以供定位：

          // Other custom files 
      @import "includes/page-contents";

  7. 现在让我们将必要的类添加到我们的标记中。打开html/pages/index.html文件，并将类page-contents添加到紧跟在轮播之后的具有container类的div中：

                {{> carousel}}<!-- /#homepage-feature.carousel --> 
            <div class="page-contents container"> 
              <div class="row">

保存，您应该看到添加的填充。

接下来，我们需要整理这些块在窄屏幕视图中的外观。注意，当以单列布局查看时，标题没有清除浮动的按钮：

调整列及其内容

解决这个问题有点棘手。我们可能想在包含这三个块的div中添加一个清除浮动的样式。然而，这不会起作用，因为我们需要这些块在视窗宽度达到 768 像素或更高时并排浮动。

这需要使用媒体查询。知道我们的三列视图从中等断点开始，即 768 像素，让我们设置一个规则，当窗口宽度低于此断点 1 像素时清除浮动。如前所述，我们可以使用 Bootstrap 的 Sass 媒体查询混合来实现这一点。

在此过程中，我们还可以给我们的列添加一些底部填充，以便在堆叠时有更多的垂直空间。

在媒体查询混合中，我们将添加一个 CSS2 属性选择器来选择所有包含col-类的元素，以便相同的规则适用于任何大小的列：

.page-contents { 
  padding-top: 20px; 
  padding-bottom: 40px; 

  @include media-breakpoint-down(sm) { 
    [class*="col-"] { 
      clear: both; 
      padding-bottom: 40px; 
    } 
  } 
}

保存。结果是大幅改进！

调整列及其内容

现在好多了！现在让我们继续处理页脚！

设置页脚样式

页脚最大的特点是我们的社交图标。Font Awesome 来帮忙！

咨询 Font Awesome 文档，我们发现品牌图标类别下有一系列可用的图标。这里是直接链接：fortawesome.github.io/Font-Awesome/icons/#brand

现在我们只需要将页脚中每个社交链接的文本在html/includes/footer.html文件中替换为i元素，并使用适当的类：

<ul class="social"> 
  <li><a href="#" ><i class="fa      fa-twitter"></i></a></li> 
  <li><a href="#" ><i class="fa      fa-facebook"></i></a></li> 
  <li><a href="#" ><i class="fa      fa-linkedin"></i></a></li> 
  <li><a href="#" ><i class="fa fa-     google-plus"></i></a></li> 
  <li><a href="#" ><i class="fa fa-     github-alt"></i></a></li> 
</ul>

这个更新的标记将我们的图标放置到位：

设置页脚样式

现在，执行以下步骤以水平排列它们并将它们居中对齐：

  1. 创建一个新文件scss/includes/_footer.scss来管理这些样式。

  2. 将文件保存到scss目录。

  3. 在__main.less文件中为该文件添加一个导入变量：

          // Other custom files 
      @import "includes/navbar"; 
      @import "includes/carousel"; 
      @import "includes/page-contents"; 
 @import "includes/footer";

现在我们将编写所需的样式。让我简单列出它们，然后说明它们的作用：

// 
// Footer 
// -------------------------- 

ul.social { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  text-align: center; 
  > li { 
    display: inline-block; 
    > a { 
      display: inline-block; 
      font-size: 18px; 
      line-height: 30px; 
      @include square(30px); // see includes/mixins/_size.scss 
      border-radius: 36px; 
      background-color: $gray-light; 
      color: #fff; 
      margin: 0 3px 3px 0; 
      &:hover, 
    &:focus    { 
        text-decoration: none; 
        background-color: $link-hover-color; 
      } 
    } 
  } 
}

因为 Bootstrap 试图在 Sass 中避免元素和子选择器，你可以考虑将前面的 SCSS 代码重写如下：

.social { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  text-align: center; 
} 

.social-item { 
 display: inline-block; 
} 

.social-link { 
  display: inline-block; 
  font-size: 18px; 
  line-height: 30px; 
  @include square(30px);  
  // see includes/mixins/_size.scss 
  border-radius: 36px; 
  background-color: $gray-light; 
  color: #fff; 
  margin: 0 3px 3px 0; 
  @include hover-focus { 
    // bootstrap/scss/mixins/_hover.scss 
    text-decoration: none; 
    background-color: $link-hover-color; 
    color: #fff; 
  } 
} 

Here's what's happening:

*   The normal margin and padding is stripped away from the `ul`
*   It is stretched to 100 percent width
*   Its content is center aligned
*   The list items are displayed inline to the block, thereby centering them
*   The links are displayed inline to block, so that they fill up their available space
*   The font size and line height are increased
*   The width and height are set to 30px square, using a custom mixin (note that this mixin is copied from Bootstrap 3)
*   To see this mixin, open `includes/mixins/_size.scss`, and you'll find the following relevant lines:

// 尺寸快捷方式

@mixin size($width, $height) {

宽度：$width;

高度：$height;

}

@mixin square($size) {

@include size($size, $size);

}


*   The `border-radius` property is set large enough to make the icons and their backgrounds appear circular
*   The `background-color`, `color`, and `margin` properties are set
*   The underline is removed from the hover and focus states, and the background color is altered to a lighter gray

With these steps done, let's polish off the footer by adding a healthy bit of top and bottom padding, and then center aligning the content in order to move our logo to the center, above the social icons:

footer[role="contentinfo"] {

顶部填充：24px;

底部填充：36px;

文本居中；

}


The result is as follows:![Styling the footer](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00149.jpeg)

推荐的下一步

我强烈建议在将此类项目投入生产之前，至少采取一个额外的步骤。你必须花时间优化你的图片、CSS 和 JavaScript。这些步骤并不困难：

  • 压缩图片只需一点时间，并且它解决了页面脚部占用空间最大的单一原因。我已经使用了 Photoshop 的“保存到网页”进程选项，但很可能你还能挤出更多字节。在代码文件夹（Build Process Manual）中，你可以看到如何将图像压缩任务添加到你的 gulp 构建过程中。

  • 此外，我们迫切需要从scss/includes/_bootstrap.scss文件中的导入序列中删除不必要的 Bootstrap Sass 文件，然后压缩生成的main.css文件。

  • 最后，我们需要通过用仅使用我们实际使用的三个插件的压缩版本替换 Bootstrap 的全面bootstrap.min.js文件来精简我们的plugins.js文件：carousel.js、collapse.js和transitions.js。然后我们压缩最终的plugins.js文件。

结合这些步骤，可以将这个网站的足迹减少大约一半。在速度至上的时代——无论是为了用户保留还是为了 SEO 排名——这都意义重大。

此外，还有另一个非常合理的步骤你可能想要采取：我们知道触控设备用户欣赏能够通过滑动来前进和后退通过轮播的功能。

但是，对于当前的时刻，让我们停下来庆祝一下。

摘要

让我们回顾一下在本章中我们取得了哪些成果。我们通过使用 Bootstrap CLI 启动了一个新的 Bootstrap 项目，该项目由 Panini、Sass 和 Gulp 提供支持。之后，我们利用了 Bootstrap 的响应式导航栏、轮播和网格系统，并自定义了 Bootstrap 的一些 Sass 代码和混入。你还学会了如何创建自己的 Sass 文件，并将它们无缝地整合到项目中。最后但同样重要的是，你将 Font Awesome 图标整合到我们的工作流程中。最终，通过实施一个深思熟虑的文件组织方案，我们改进了网站的后期维护——这一切都没有产生代码冗余。

在积累了这些经验之后，你将能够按照自己的意愿弯曲 Bootstrap，利用其力量加速网站开发，并随心所欲地定制设计。在未来的章节中，我们将进一步扩展你的经验。然而，首先，让我们将这个设计应用到创建一个复杂的商业主页。

评估

  1. 以下哪个类将把我们的主要品牌颜色应用到按钮上？

    1. btn-primary

    2. button-primary

    3. btn

    4. bttn-primary

  2. 以下哪个是media breakup点的正确代码？

    1. .include media-breakpoint-up(md) {padding-top: 0,padding-down: 0;}

    2. @include media-breakpoint-up(md) {padding-top: 0;padding-bottom: 0;}

    3. $include media-breakpoint-up(md) {padding-up: 0,padding-bottom: 0;}

    4. &includes media-breakpoint-up(md) {padding-top: 0,padding-bottom: 0,}

  3. 哪个类会将链接浮动到右边，使其移动到更宽的空间，从而使其成为一个更具吸引力的目标？

    1. pull-xs-right

    2. pulls-xs-right

    3. pull-right

    4. pulls-xl-right

  4. 以下哪个陈述是关于使用灰色颜色在 Bootstrap 中样式化元素的正确说法？评估

    1. a 和 c

    2. 只有 c

    3. 只有 d

    4. 只有 a

  5. 在以下语法中，'?'的位置应该是什么：评估

    1. .

    2. #

    3. @

    4. $

第九章。启动商业

我们已经建立了我们的投资组合网站。现在，是时候用一些展示我们能力范围的项目来充实我们的投资组合了。让我们现在转向设计一个复杂的商业主页。

花点时间调查成功企业的主页，例如这些：

虽然每个都有自己的方法，但这些网站共同之处在于它们管理了相当大的复杂性。

我们可以通过将网站分解为以下三个类别来掌握一些常见功能，这些类别基于页面区域：

  • 横幅/页眉：这部分包含标志、带有下拉菜单的主要导航、次要或实用导航，以及登录或注册选项

  • 主要内容区域：这部分具有至少三个列的复杂布局，如果不止三个

  • 页脚：这里充满了多列的链接和信息

让我们展示我们管理这种复杂程度的能力。为此，我们将充分利用 Bootstrap 的响应式 12 列网格系统。

在中等和宽视口中查看时，以下是我们将创建的设计：

Bootstrapping Business

在狭窄的视口中，它将适应得相当多，如下面的截图所示：

Bootstrapping Business

之后，我们将执行以下步骤：

  1. 从 第 8 课 启动您的投资组合 的投资组合项目开始文件。

  2. 在桌面视图中，创建一个复杂的横幅，横幅上方有标志，右上角有实用导航。

  3. 对于较小的视口，我们将启用我们的实用选项仅在折叠的响应式导航的顶部作为图标出现。

  4. 实施商业风格的配色方案。

  5. 调整响应式和桌面版本的导航栏。

  6. 为主要内容区域和页脚区域设置复杂的多列网格。

首要任务是：让我们评估我们的项目起始文件。

评估我们的起始文件

与本书中的所有项目一样，本项目的起始文件可以从 Packt 出版网站 www.packtpub.com/support 下载。您可以在 Lesson 9/start 文件夹中找到这些文件。

这些文件是我们从第 8 课的结果的副本，启动您的投资组合。因此，我们享有以下关键组件的优势：

  • 一个完整的构建过程，包括 Sass 编译器和 Panini 模板引擎

  • Bootstrap SCSS 和 JavaScript 文件

  • Panini HTML 模板

除了这些关键资产外，我们还有一些在第 8 课启动你的投资组合中创建的自定义 Sass 修改。它们可以在以下文件中找到，这些文件位于 scss 和 scss/includes 目录中：

  • _main.scss: 这被定制以从 bower_components/bootstrap/scss 目录导入 Bootstrap 的 Sass 文件，以及 Font Awesome 字体图标和我们的自定义 Sass 文件

  • _carousel.scss: 此文件对轮播图的填充、背景和指示器进行了自定义修改

  • _footer.scss: 此文件包含布局和设计标志及社交图标样式

  • _navbar.scss: 这文件已调整了 .navbar-brand 类的填充，以便使导航栏标志能够适应

  • _page-contents.scss: 此文件包含确保具有浮动按钮的列在窄的单列布局中清除彼此的样式

  • _variables.scss: 这包含自定义的灰色版本和一些对导航栏和轮播图的变量调整

Font Awesome 字体图标包括以下内容：

  • fonts 目录中的图标字体

  • bower_components/font-awesome 目录中的 Sass 文件

  • 为了开始使用这些文件，你应在你的控制台中运行以下命令：

 bower installing 
         npm install

之后，你可以运行 npm start 或 bootstrap watch 命令来编译你的项目并开始监视浏览器中的更改。

设置设计的基本要素

我们开始修改第 8 课启动你的投资组合的结果，并最终得到以下截图所示的基本样式：

设置设计的基本要素

注意以下功能：

  • 一个包含七个主要 nav 项的复杂导航栏，每个项都有一个下拉菜单

  • 三个列中的第一个配备了轮播图，随后是标题、段落和按钮

  • 第二列和第三列，包含标题、段落和阅读更多 -> 按钮

  • 包含标志和社交图标的页脚

你将在第 8 课中我们已经使用过的元素中认出，启动你的投资组合。轮播图现在更小了——受其包含列的限制。否则，标记是相同的。

将下拉菜单添加到我们的导航栏中

Bootstrap 的 JavaScript 下拉插件使你能够轻松创建下拉菜单。你还可以将这些下拉菜单添加到你的导航栏中。

在您的文本编辑器中打开html/includes/header.html文件。注意，Gulp 构建过程使用 Panini HTML 编译器将我们的 HTML 模板编译成 HTML 页面。Panini 由 Handlebars 模板语言提供支持。在您的模板中，您可以使用辅助函数、迭代和自定义数据。在这个例子中，您将使用 Panini 的强大功能来构建带有下拉菜单的导航栏项。

首先，创建一个html/data/productgroups.yml文件，其中包含导航栏项的标题：

- Shoes 
- Clothing 
- Accessories 
- Women 
- Men 
- Kids 
- All Departments

上述代码是以 YAML 格式编写的。YAML 是一种人类可读的数据序列化语言，它从编程语言中汲取概念，从 XML 中汲取想法；您可以在以下网址了解更多信息：yaml.org/。

使用前面的数据，您可以使用以下 HTML 和模板代码来构建导航栏项：

  <ul class="nav navbar-nav navbar-toggleable-sm collapse"
  id="collapsiblecontent"> 
  {{#each productgroups}} 
    <li class="nav-item dropdown {{#ifCond this 'Shoes'}}active{{/ifCond}}"> 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
      role="button" aria-haspopup="true" aria-expanded="false"> 
      {{ this }} 
      </a> 
        <div class="dropdown-menu"> 
          <a class="dropdown-item" href="#">Action</a> 
          <a class="dropdown-item" href="#">Another action</a> 
          <a class="dropdown-item" href="#">Something else here</a> 
          <div class="dropdown-divider"></div> 
          <a class="dropdown-item" href="#">Separated link</a> 
        </div> 
    </li> 
  {{/each}} 
  </ul>

上述代码使用了一个（for）each循环来构建七个导航栏项，每个项都获得相同的下拉菜单。鞋子菜单获得活动类。Handlebars（因此也是 Panini）默认不支持条件比较。if语句只能处理单个值，但您可以添加自定义辅助函数来启用条件比较。使我们可以使用ifCond语句的自定义辅助函数可以在html/helpers/ifCond.js文件中找到。阅读我的如何为不同环境设置 Panini博客文章，在bassjobsen.weblogs.fm/set-panini-different-environments/，了解更多关于 Panini 和自定义辅助函数的信息。

下拉菜单的 HTML 代码与在getbootstrap.com/components/dropdowns/中描述的 Dropdown 插件的代码一致。

导航栏在较小屏幕尺寸时会折叠。默认情况下，下拉菜单在所有网格上看起来相同：

向我们的导航栏添加下拉菜单

设置页面标题的底部边框

创建一个新的 Sass 部分文件，并向其中添加以下 SCSS 代码，以给我们的页面标题一个清晰的边界：

header[role="banner"] { 
  border-bottom: 4px solid $gray-lighter; 
}

使用 holder.js 添加图片

另一个细节是，我使用了优秀的holder.jsJavaScript 插件来动态生成我们的轮播图的占位图。

您可以通过在控制台中运行以下命令使用 Bower 安装 holder.js 插件：

bower install holderjs --save-dev

安装插件后，您可以在Gulpfile.js中使用compile-js Gulp 任务将其与其他 JavaScript 代码链接到app.js文件中，如下所示：

gulp.task('compile-js', function() { 
  return gulp.src([ 
        bowerpath+ 'jquery/dist/jquery.min.js', 
        bowerpath+ 'tether/dist/js/tether.min.js', 
        bowerpath+ 'bootstrap/dist/js/bootstrap.min.js', 
        bowerpath+ 'holderjs/holder.min.js', // Holder.js for project
        development only 
        'js/main.js']) 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./_site/js/')); 
});

如果您检查标记，您会在页面底部附近看到我包括了holder.js脚本，就在plugins.js之前，如下所示：

<!-- Holder.js for project development only --> 
<script src="img/holder.js"></script>

在我们的最终生产网站上，我们不会使用占位图，因此将其单独链接并添加一个显眼的注释是有意义的。

在holder.js就位的情况下，我们可以方便地构建引用holder.js作为其源的图像标签。伪 URL 的其余部分指定了尺寸、颜色和填充文本，如下所示：

<img src="img/textmode:literal"    alt="Holder Image">

注意

关于holder.js的更多信息，请参阅github.com/imsky/holder的文档。

由于这些元素已经就位，特别是得益于 Bootstrap 现成的样式和行为库，我们有一个良好的起点。让我们深入了解。

首先，我们将重新定位我们的导航栏在一个更复杂的横幅设计中。

创建复杂的横幅区域

让我们从顶部开始，创建具有以下功能的复杂横幅区域：

  • 在桌面和更大视口中，标志位于导航栏上方的网站标志

  • 一个包含许多菜单项，包括下拉菜单的导航栏

  • 一个实用导航区域

  • 一个带有用户名和密码的登录表单

  • 注册选项

这里是我们希望在桌面宽度视口上达到的最终效果的草图：

创建复杂的横幅区域

在窄视图中，它将调整为以下内容：

创建复杂的横幅区域

我们将首先着手为我们的顶部标志创建一个新的布局。

在导航栏上方放置标志

在这个新设计中，我们需要在两个位置放置一个标志，用于两个上下文：

  • 对于桌面和宽屏视口，我们希望标志显示在导航栏上方

  • 对于平板和手机视口，我们希望标志在响应式导航栏内显示

多亏了 Bootstrap 的响应式实用类，我们可以做到这两点！以下是方法：

  1. 在你的编辑器中打开html/includes/header.html文件。

  2. 将标志和切换按钮移出nav元素，并用<div class="container">...</div>包裹，以将其限制在 Bootstrap 居中网格空间内。

  3. 从标志的 ig 元素中移除宽度属性。

  4. 然后，将<ul class="nav navbar-nav"></ul>也包裹在<div class="container">...</div>中。

  5. 将navbar-toggleable-sm和折叠类移动到第二个容器的 div 中。

  6. 最后，你的 HTML 代码在html/includes/header.html文件中应该如下所示：

            <header role="banner"> 
        <div class="container"> 
        <button class="navbar-toggler hidden-md-up" type="button"
        data-toggle="collapse" data-target="#collapsiblecontent"> 
        ? 
        </button> 
        <a class="navbar-brand" href="/"><img src="img/logo.png"
        alt="Bootstrappin'"></a> 
        </div>      
        <nav class="navbar navbar-full" role="navigation"> 
        <div class=  "container navbar-toggleable-sm collapse"
        id="collapsiblecontent"> 
        <ul class="nav navbar-nav"> 
        ... 
        </ul> 
        </div> 
        </nav> 
        </header>

  7. 在更改 HTML 后，你可以再次使用 Sass 的力量根据视口的宽度来设置标志的样式。在scss/includes/_header.scss文件中编辑以下 SCSS 代码：

        header[role="banner"] { 
          .navbar-brand { 
          > img { 
              width: 120px; 
              padding-left: $spacer-x; 
              @include media-breakpoint-up(md) { 
                padding-left: 0; 
                width: 180px; 
              } 
            }
          } 
        }

在前面的步骤中，使用了几个预定义的 Bootstrap 类。隐藏-md-up 辅助类隐藏了中等视口及以上的内容，并确保切换按钮仅在小型视口中可见。另一方面，navbar-toggleable-sm类仅影响小型和超小型视口。

在窄视图中，标志的宽度为 120 像素。对于中等网格和更大的网格，移除标志的左填充，并将宽度设置为 180 像素。

小贴士

回想一下，我们的原始标志图像很大，大约 900 像素宽。我们将其宽度调整为 120 像素宽，通过宽度属性（我们也可以使用 CSS 规则）来使像素更紧密，以便在视网膜屏幕上显示。

保存更改并刷新页面，你应该会看到这些结果！在中型和大型视口中，将显示较大的标志：

在导航栏上方放置标志

在小和超小视口中，将显示标志的小版本：

在导航栏上方放置标志

啊，Bootstrap 的美！

现在，让我们对我们的导航栏做一些调整。

检查和审查导航栏下拉项

该导航栏及其七个项目和子菜单反映了大型复杂网站的需求。

下拉菜单的标记直接取自 Bootstrap 下拉文档 getbootstrap.com/components/dropdowns/。

如果你查看我们的生成标记，你会注意到这些特殊类和属性：

  • class="dropdown" 在父 li

  • class="dropdown-toggle" 在链接上

  • attribute="data-toggle" 也适用于链接

  • class="dropdown-menu" 在子菜单 div 元素上

  • class="dropdown-item" 在每个下拉菜单项上

这里是生成的标记：

<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
  role="button" aria-haspopup="true" aria-expanded="false"> 
    Shoes 
  </a> 
  <div class="dropdown-menu"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Separated link</a> 
  </div> 
</li>

还要注意，小的下拉指示器是一个 CSS 三角形。Bootstrap 在 bower_components/bootstrap/scss/_ 中使用以下 SCSS 代码来创建这些三角形：

.dropdown-toggle { 
  // Generate the caret automatically 
  &::after { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-right: .25rem; 
    margin-left: .25rem; 
    vertical-align: middle; 
    content: ""; 
    border-top: $caret-width solid; 
    border-right: $caret-width solid transparent; 
    border-left: $caret-width solid transparent; 
  } 

  // Prevent the focus on the dropdown toggle when closing dropdowns 
  &:focus { 
    outline: 0; 
  } 
}

提示

保存更改并在浏览器中检查结果。如果您尚未运行 bootstrap watch 或 gulp 命令，现在应该运行它。您应该看到“所有部门”下拉菜单项浮动到导航栏的右手端，如下所示：


![Reviewing and checking navbar drop-down items](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00161.jpeg)Instead of modifying your HTML code, you can also use the following SCSS code to accomplish the same thing:

.nav-item:last-child {

float:right;

}


So far so good! Now, let's add our utility navigation.

添加实用导航

此项目需要实用导航，以便用户登录或注册并查看他们的购物车。

在中型、大型和超大视口中，我们将此实用导航放置在横幅区域的右上角，如下所示：

添加实用导航

在较小屏幕上，我们将在折叠导航栏的右侧显示图标：

添加实用导航

注意，折叠的导航栏有不同的颜色方案；我们稍后会讨论如何做到这一点。

现在让我们设置导航栏更改。

首先，为了在 scss/includes/_header.scss 文件中给标志留出更多空间，只为较大的视口设置顶部填充，如下所示：

header[role="banner"] { 
  .navbar-brand { 
    > img { 
      width: 120px; 
      padding-left: $spacer-x; 
      @include media-breakpoint-up(md) { 
        padding-top: $spacer-y * 3; 
        padding-left: 0; 
        width: 180px; 
      } 
    } 
  } 

Note a few things about this markup:

*   The `utility-nav` class is simply created for our use. It is not a Bootstrap-specific class and has no specific styles attached.
*   I've included Font Awesome's user and shopping cart icons and added the class of `fa-lg` to increase their size by 33 percent. See Font Awesome's documentation on this at [`fontawesome.io/examples/#larger`](http://fontawesome.io/examples/#larger).

Save the changes and inspect the results in your browser, and you should see our new `utility-nav` class appear on the right-hand side `of the` logo, as follows:![Adding utility navigation](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00164.jpeg)Now, to complete the layout and related adjustments, we need to apply some custom styles. We need a new file to manage styles for our banner area.We need to set the position of `.utility-nav` to absolute, at the top right. We'll specify `header[role="banner"]` as the context for these styles. Add the following SCSS code to the `scss/includes/_header.scss` file:

header[role="banner"] {

// 标签区域样式

.utility-nav {

position: absolute;

top: $spacer-y;

right: 0;

}

}


Now, let's refine the details as follows:

1.  Remove bullets from the unordered list.
2.  Float the list items on the left.
3.  Add padding to the link.
4.  Remove underlines from the hover effect.

The following lines will accomplish these goals:

.utility-nav {

ul {

list-style: none;

li {

float: left;

a {

    padding: 0 $spacer-x;

    @include hover {

    text-decoration: none;

    }

}

}

}

}


Save the changes and ensure that it compiles. In the preceding code, we've set the padding for the anchors to `padding: 0 $spacer-x;`. We could accomplish this by adding Bootstrap's utility classes for spacing into the HTML code.

The following HTML code also sets a padding of `$spacer-x` on the left- and right-hand sides of the `<a>` element:



Then make sure your browser window is at desktop width. You should see your `utility-nav` class take its place at the top right of the banner:

![Adding utility navigation](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00165.jpeg)

That takes care of medium viewports and larger. Now, let's address the needs of the collapsed responsive navbar.

# Making responsive adjustments

On small screens, the elements of our page header may overlap:

![Making responsive adjustments](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00166.jpeg)

We need to move the toggle to the left-hand side of our navbar. This can be done as follows:

1.  Open the `scss/includes/_header.scss` file in your editor and add the following SCSS code to it:

    ```

            header[role="banner"] {

                .navbar-toggler {

                float: left;

                }

            }

    ```js

2.  Save and compile these changes, and you'll see the navbar toggle shift to the left end of the collapsed navbar, as shown in the following screenshot:

![Making responsive adjustments](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00167.jpeg)

So far so good.

Now to address the problem of crowding by hiding the text for all devices except for screen readers on the collapsed navbar. In an uncluttered collapsed navbar, the icons will be enough to communicate the point, especially if we make the icons larger. Let's do that:

1.  In the `html/includes/_header.html` file, place `span` tags around the text within each link of our `utility-nav` class, as follows:

    ```

            <li><a href="#" ><i class="icon fa

            fa-user fa-lg"></i> <span>登录或注册</span></a></li>

            <li><a href="#" ><i class="icon fa

            fa-shopping-cart fa-lg"></i> <span>   View Cart</span></a></li>

    ```js

2.  This will give us a handle for our upcoming style adjustment.
3.  Now, in `_headers.scss`, we'll add a media query to target these `span` tags. Thanks to the power of Sass, we can nest the media query precisely where we want it to do its work. We'll use Bootstrap's `@media-breakpoint-down(sm)` mixin, setting a `max-width` query to the small breakpoint value minus one, since at this point our navbar makes the transition from collapsed to expanded. Within this media query, we'll use the `sr-only` utility class as a mixin to hide text from all devices except screen readers. (See the documentation on this class at [`getbootstrap.com/components/utilities/#screen-readers-and-keyboard-users`](http://getbootstrap.com/components/utilities/#screen-readers-and-keyboard-users).)
4.  Instead of the sr-only mixin, you can also add the `sr-only` class to your HTML. The `sr-only-focusable` mixin and `sr-only-focusable` CSS class are available to make content hidden by the the `sr-only` class visible on focus, which is useful for keyboard-only users.
5.  Here is the code snippet:

    ```

            header[role="banner"] {

            @include media-breakpoint-down(sm) {

                top: 0;

                span {

                @include sr-only;

                }

            }

            }

    ```js

6.  This will hide the text between our `span` tags, leaving us only with the icons!
7.  Now, we will increase the size of the icons and add some line height to position them vertically. We'll do this within the same media query:


    header[role="banner"] {

    @include media-breakpoint-down(sm) {

        top: 0;

        span {

        @include sr-only;

        }

        .icon {

        font-size: 2em;

        line-height: 1.2;

        }

    }

    }


Save your changes, run the `bootstrap watch` command if you haven't already done so, and you should see the following result:

![Making responsive adjustments](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00168.jpeg)

Take a minute to resize your browser window back and forth across the breakpoint. You should see the entire banner and navbar adjust seamlessly across the breakpoint.

If you're like me, it's hard not to be pleased with a framework that enables us to be this efficient at building such an adept and responsive interface.

Next up, we need to begin implementing the color scheme.

# Implementing the color scheme

We've been provided with a business-friendly palette of blue, red, and gray. Let's work these colors into our color variables:

1.  Open `scss/includes_variables.scss` in your editor. We'll be working at the beginning of the file, in the color variables.
2.  Let's review the range of grays we have available. If you've begun with the `chapter5/finish` files, you'll see we've carried these variables over from Lesson 8, *Bootstrapping Your Portfolio*. They served us well there, and we'll make use of them again here:

    ```

            x`

            // -------------------------

            @gray-darker:            #222; // edited

            @gray-dark:              #454545; // edited

            @gray:                   #777; // edited

            @gray-light:             #aeaeae; // edited

            @gray-lighter:           #ccc; // edited

            @gray-lightest:          #ededed; // edited

            @off-white:              #fafafa; // edited

    ```js

3.  Now, below the grays, let's fold in our new brand colors. We'll modify the value for `@brand-primary` and create a `@brand-feature` variable for red:

    ```

            @brand-primary:          #3e7dbd; // edited blue

            @brand-feature:          #c60004; // added new red

    ```js

4.  Now, let's adjust our link-hover color so that it will lighten (rather than darken) the `@brand-primary` color, which is already dark:

    ```

            // Links

            // -------------------------

            @link-color:            @brand-primary;

            @link-color-hover:      lighten(@link-color, 15%);

    ```js

5.  Finally, let's define the colors for our navbar. We'll create two sets of variables the `-xs-` variables for the small screens and the `-md-` variables for the larger screens:

// Navbar

$navbar-xs-color: $body-color;

$navbar-xs-bg: #fff;

$navbar-md-color: $gray-lightest;

$navbar-md-bg: $brand-primary;

// Navbar links

$navbar-xs-color: $navbar-xs-color;

$navbar-xs-hover-color: $navbar-xs-color;

\(navbar-xs-hover-bg: darken(\)navbar-xs-bg, 5%);

$navbar-xs-active-color: $navbar-xs-color;

$navbar-xs-disabled-color: $navbar-xs-hover-bg;

$navbar-md-color: $navbar-md-color;

$navbar-md-hover-color: $navbar-md-color;

\(navbar-md-hover-bg: darken(\)navbar-md-bg, 5%);

$navbar-md-active-color: $navbar-md-color;

$navbar-md-disabled-color: $navbar-md-hover-bg;


Having set up these fundamental color variables, we're ready to work on our navbar.

# Styling the collapsed navbar

While still in `_navbar.less`, search for `// Navbar`, which will take you to the navbar variables. Note that most of the standard values specified here will affect both the collapsed responsive navbar for small viewports and the expanded navbar for wider viewports.

We want the background, text, and link colors for the collapsed responsive navbar to remain largely consistent with the default values but then change to our blue background and a light text color for medium and larger viewports.

We'll develop a responsive color scheme to accomplish the preceding color changes based on the viewport.

Open the `scss/includes/_navbar.scss` file and edit the default values for the small viewport as follows:

// responsive color scheme

.navbar {

background-color: $navbar-xs-bg;

color: $navbar-xs-color;

.nav-link

{

@include hover-focus-active {

background-color: $navbar-xs-hover-bg;

}

}

}


As you can see, we'll use the `-xs-` variables now. For medium and large viewports—where our navbar stretches out horizontally below the logo—we want our navbar to take on the blue color. Using Bootstrap's media query mixins again, we can change the colors for the larger viewports, as follows:

// responsive color scheme

.navbar {

background-color: $navbar-xs-bg;

color: $navbar-xs-color;

.nav-link

{

@include hover-focus-active {

background-color: $navbar-xs-hover-bg;

}

}

@include media-breakpoint-up(md) {

background-color: $navbar-md-bg;

color: $navbar-md-color;

.nav-link

{

color: $navbar-md-color;

@include hover-focus-active {

    background-color: $navbar-md-hover-bg;

}

}

}

}


## Customizing the drop-down menus

We will use the power of Sass again to customize the drop-down menus for smaller screens. Edit the following code in the `scss/includes/_navbar.scss` file:

@include media-breakpoint-down(sm) {

.navbar {

.nav-item + .nav-item {

margin-left: 0;

}

.dropdown {

position: initial;

}

.dropdown-menu {

position: initial;

z-index: initial;

float: initial;

border: initial;

border-radius: initial;

}

}

}


In the preceding code, we've used Bootstrap's media query mixins to reset the styles for screens smaller than 768 pixels. The initial value the initial value of a property to an element. So the preceding code sets the position to again and removes the float, border, and border-radius, and the drop-down menu will look like a "normal" list now:

![Customizing the drop-down menus](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00169.jpeg)

Fantastic! Now we can address the horizontal navbar.

# Styling the horizontal navbar

When you move your mouse over the navbar links, you'll find that the hover background color of the link is smaller than the height of the navbar:

![Styling the horizontal navbar](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00170.jpeg)

You can solve this issue by applying padding on the links instead of the navbar. Use the following SCSS code in the file to change the padding:

.navbar {

@include media-breakpoint-up(md) {

padding-top: 0;

padding-bottom: 0;

}

.nav-link

{

padding: $spacer;

@include media-breakpoint-only(md) {

padding: \(spacer-y (\)spacer-x / 2);

}

}

}


Now your navbar links should look like the following screenshot:

![Styling the horizontal navbar](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00171.jpeg)

And finally, let's transform the text to upper case, reduce its size a bit, and make it bold. In `_navbar.scss`, add these highlighted lines:

.nav-link

{

padding: $spacer;

@include media-breakpoint-up(md) {

text-transform: uppercase;

font-size: 82%;

font-weight: bold;

}

}


This will yield the following result:

![Styling the horizontal navbar](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00172.jpeg)

Our banner and navbar are complete!

# Enabling Flexbox support

Bootstrap 4 comes with optional flexbox support. You can simply enable flexbox support by declaring `$enable-flex: true;` in the `scss/includes/_variables` file. If you do so, you'll have clear the floats of the container of the navbar because of we've implement flexbox support for it. You can clear the floats by adding the following SCSS code to the file:

header[role="banner"] {

// header container do not use the flexbox layout, so floats have to be cleared

@if $enable-flex {

.container {

@include clearfix();

}

}

}


Now it's time to move on to the main content of our page.

# Designing a complex responsive layout

Let's imagine we've emerged from client meetings with a plan to organize the home page content in three tiers, ranked by importance.

In medium and wide viewports, this content will be laid out in three columns, as shown in the following screenshot:

![Designing a complex responsive layout](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00173.jpeg)

In a narrow viewport, these will be laid out one after another, in a single vertical column:

![Designing a complex responsive layout](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00174.jpeg)

And in a small and medium `tablet-width` viewport, we'll arrange the content in two side-by-side columns, with the third tier of content laid out beneath it as a horizontal row, as shown in the following screenshot:

![Designing a complex responsive layout](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00175.jpeg)

To get us started, I've provided the basic markup for three equal columns. Let's review what we have and then adapt it to the needs of this design. We'll begin with the three-column layout for medium and wide viewports.

## Adjusting the large and extra-large layout

Currently, in large and extra-large viewports, our three columns are equal in width, font size, button size, and color. As a result, the presentation lacks visual hierarchy, as seen in the following screenshot:

![Adjusting the large and extra-large layout](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00176.jpeg)

We can take significant strides by adjusting column width, font size, button size, and color to establish a clearer hierarchy between these tiers of content. Let's do that. We'll start by adjusting column widths:

1.  In `html/pages/index.html`, search for the `section` tag for the primary content:

    ```

        <section class="content-primary col-md-4">

    ```js

2.  Note that the `col-md-4` class sets the width of this column to one-third of the width of the parent element, beginning at the small viewport width (768 pixels and up).
3.  We want to save the three-column layout for the large and extra-large viewports (992 pixels and up), and we want this first column to be wider than the others.
4.  Edit the `col-md-4` class to read `col-lg-5`, as follows:

    ```

    <section class="content-primary col-lg-5">

    ```js

5.  This will set this column to 5/12 width with the medium viewport and larger.
6.  Now search and find the opening `section` tags for the next two columns and adjust the column classes to `col-lg-4` and `col-lg-3` respectively:

...


Save, refresh, and you'll see the desired visual hierarchy in the width of our columns:

![Adjusting the large and extra-large layout](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00177.jpeg)

You might have noticed that the headings in the middle of the secondary and tertiary columns are not clearing the buttons above them. Let's adjust these, as well as our buttons and font sizes after adjusting the medium layout.

## Adjusting the medium layout for tablet-width viewports

First notice that the navbar is too small for the number of items on the medium layout. The items render into two rows, as follows:

![Adjusting the medium layout for tablet-width viewports](https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/cmpl-btsp/img/00178.jpeg)

To get the items on a single row again, you may reduce the margin and padding of the navbar items or change the collapsing point of the navbar.

First, try the margin and padding solution; you can use the power of Sass again. Open the file in your editor and add the following SCSS code:

.navbar {

@include media-breakpoint-only(md) {

.nav-item + .nav-item {

margin-left: 0; }

}

.nav-link

{

padding: $spacer;

@include media-breakpoint-only(md) {

padding: \(spacer-y (\)spacer-x / 2);

}

}

}


Notice that I've wrapped the code in the `media-breakpoint-only()` mixin. The `media-breakpoint-only()` mixin works just like the media-breakpoint-up and media-breakpoint-down mixins you've seen before, but only targets a single grid by setting both the min-width and max-width for the media query.

Consider the following SCSS code, for example:

@include media-breakpoint-only(md) {

padding: \(spacer-y (\)spacer-x / 2);

}


The preceding SCSS code compiles into CSS code similar to the following:

@media (min-width: 768px) and (max-width: 991px) {

.navbar .nav-link {

padding: 1rem 0.5rem;

}

}


A `media-breakpoint-between()` mixin is available too. The `media-breakpoint-between()` mixin enables you to target a range of grids between two breakpoints. The `@include media-breakpoint-only(sm,md){}` call targets both small and medium grids.

### Note

You may have noticed that your file contains a lot of media queries now. Sass does not merge media queries, so the compiled CSS code contains a lot of media queries too. Merging the same CSS media query rules into one media query rule may be a performance improvement for your CSS code. The css-mqpacker node package can process your CSS code pack's same CSS media query rules into one media query rule.

You can run the package with the gulp-postcss package just like the autoprefixer plugin. More information about css-mqpacker and how to integrate it in your Gulp build process can be found at the following URL: [`www.npmjs.com/package/css-mqpacker`](https://www.npmjs.com/package/css-mqpacker)

A `media-breakpoint-between()` mixin is available too. The `media-breakpoint-between()` mixin enables you to target a range of grids between two breakpoints. The `@include media-breakpoint-only(sm,md){}` call targets both the small and medium grids.

Alternatively, you may change the collapsing point of the navbar. First, open the html/includes/header.html file and change the appearance of the navbar toggler as follows:

<button class="navbar-toggler hidden-lg-up" type="button"

data-toggle="collapse" data-target="#collapsiblecontent">

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