ASP-NET-MVC-和-Bootstrap-全-

ASP.NET MVC 和 Bootstrap（全）

原文：Bootstrap for ASP.NET MVC - Second Edition

协议：CC BY-NC-SA 4.0

零、前言

Twitter Bootstrap，简称 Bootstrap，是互联网上领先的开源 CSS/HTML 和 JavaScript 框架。推出后不久，它就成为 GitHub 上最受欢迎的项目。它如此受欢迎，以至于微软在他们的 Build 2013 会议上宣布，Visual Studio 2013 中的所有 web 应用项目模板都将默认使用 Twitter Bootstrap。

Bootstrap 如此流行的一个主要原因是，它允许开发人员(其中许多人在用户界面设计方面出了名的糟糕)用相对较少的努力来构建美观的网站。Bootstrap 还提供了一个丰富的生态系统，包括免费和商业模板、第三方组件、工具以及一个活跃和有用的社区。

使用 CSS 框架和 Bootstrap，特别是 ASP.NET MVC 是一个自然的选择。Bootstrap 负责排版、表单布局和用户界面组件，这允许开发人员专注于他们擅长的事情——编写代码。这一点对于不一定有内部设计师的小型开发公司尤其有价值。

.NET Core 是一个全新的令人兴奋的框架。它可以用来开发各种应用，而不仅仅是 web 应用。它承诺能够针对不同的平台，如 Linux 和 Mac，以及更小的部署空间。ASP.NET Core 是建立在.NET Core，是对 ASP.NET 平台的改写.NET 开发人员已经知道很多年了。

这本书涵盖了什么

ASP.NET MVC 的 Bootstrap Bootstrap 您创建一个功能齐全的 ASP.NET MVC 网站，使用 Bootstrap 的布局和用户界面。

第 1 章、ASP.NET Core 和 Bootstrap 4 入门，向您介绍 Bootstrap 4 发行版中的文件，创建一个空的 ASP.NET 站点，并介绍如何使用 Bower 和 glow。

第 2 章、使用 Bootstrap CSS 和 HTML 元素，检查所有各种 Bootstrap CSS 和 HTML 元素，如何将它们包含在您的 ASP.NET MVC 项目中，以及如何配置和使用它们的各种选项。

第三章、使用自举组件，让你熟悉自举导航栏、按钮组、提醒，并给你介绍卡片。

第 4 章、使用 Bootstrap JavaScript 组件，指导您创建级联下拉菜单、模态对话框和手风琴。

第 5 章、创建 MVC Bootstrap Helper 和 Tag Helper，教你创建 Bootstrap MVC helper 以及 ASP.NET Core 引入的 Tag Helper。

第 6 章、将 Bootstrap HTML 模板转换为可用的 ASP.NET MVC 项目，转换一个开源 HTML 模板，并准备好与 ASP.NET MVC 一起使用。

第 7 章、使用带有 Bootstrap 的 jQuery 数据表插件 4 ，演示如何使用带有 Bootstrap 和 ASP.NET 的强大 jQuery 数据表插件来显示表格数据。

第 8 章、使用 Visual Studio 代码创建 Bootstrap 4 ASP.NET MVC 站点，向您展示如何使用免费的 Visual Studio 代码编辑器创建 ASP.NET 项目。

附录、Bootstrap 资源，给你一个互联网上可用的 Bootstrap 资源列表。

这本书你需要什么

为了充分利用这本书，您需要 Visual Studio 2015 和现代浏览器。所有示例都已经过 Visual Studio 2015、谷歌 Chrome 和 Mozilla Firefox 的测试。这本书将有益于那些具有 ASP.NET MVC 开发的入门级到高级经验，以及 Bootstrap 有限经验的人。

这本书是给谁的

这本书是为 ASP.NET MVC 开发人员准备的，他们想知道如何将 Bootstrap 合并到他们的项目中。ASP.NET MVC 开发人员也可以从涵盖高级主题的章节中受益，例如创建助手和使用 jQuery 数据表插件。如果你对 ASP.NET MVC 和 Bootstrap 的经验有限，这本书可以作为这些技术的入门书。

惯例

在这本书里，你会发现许多区分不同种类信息的文本样式。以下是这些风格的一些例子和对它们的意义的解释。

文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、伪 URL、用户输入和 Twitter 句柄如下所示:“双击 Visual Studio 中解决方案资源管理器内的project.json文件”

代码块设置如下:

public void ConfigureServices(IServiceCollection services) 
         { 
            services.AddMvc(); 
         }

任何命令行输入或输出都编写如下:

npm install -g yo grunt-cli generator-aspnet bower 

新名词和重要词语以粗体显示。您在屏幕上看到的单词，例如菜单或对话框中的单词，出现在如下文本中:“从新 ASP.NET Core 网络应用中选择空项目模板(.NET Core) 项目对话框窗口，点击确定

注

警告或重要提示会出现在这样的框中。

类型

提示和技巧是这样出现的。

读者反馈

我们随时欢迎读者的反馈。让我们知道你对这本书的看法——你喜欢或不喜欢什么。读者反馈对我们来说很重要，因为它有助于我们开发出你真正能从中获益的标题。要向我们发送一般反馈，只需给 feedback@packtpub.com 发电子邮件，并在邮件主题中提及书名。如果你对某个主题有专业知识，并且对写作或投稿感兴趣，请参见我们位于www.packtpub.com/authors的作者指南。

客户支持

现在，您已经自豪地拥有了一本书，我们有许多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以从https://github.com/Pietervdw/bootstrap-for-aspnetmvc或您在http://www.packtpub.com的账户下载本书的示例代码文件。如果您在其他地方购买了这本书，您可以访问http://www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。

您可以按照以下步骤下载代码文件:

1. 使用您的电子邮件地址和密码登录或注册我们的网站。
2. 将鼠标指针悬停在顶部的 SUPPORT 选项卡上。
3. 点击代码下载&勘误表。
4. 在搜索框中输入图书名称。
5. 选择要下载代码文件的书籍。
6. 从您购买这本书的下拉菜单中选择。
7. 点击代码下载。

下载文件后，请确保使用最新版本的解压缩文件夹:

• 视窗系统的 WinRAR / 7-Zip
• zipeg/izp/un ARX for MAC
• 适用于 Linux 的 7-Zip / PeaZip

我们还有来自 https://github.com/PacktPublishing/丰富的书籍和视频目录的其他代码包。看看他们！

下载本书的彩色图片

我们还为您提供了一个 PDF 文件，其中包含本书中使用的截图/图表的彩色图像。彩色图像将帮助您更好地理解输出中的变化。您可以从http://www . packtpub . com/sites/default/files/downloads/BootstrapforASPNETMVC _ color images . pdf下载此文件。

勘误表

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

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

盗版

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

请联系我们在 copyright@packtpub.com 的链接到可疑的盗版材料。

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

问题

如果你对这本书的任何方面有问题，你可以联系我们在 questions@packtpub.com，我们将尽最大努力解决这个问题。

一、ASP.NET Core 和 Bootstrap 4 入门

作为开发人员，当使用 HTML 和 CSS 时，我们会发现很难从头开始创建好看的用户界面。当开发人员具有开发 Windows 窗体应用的丰富经验时，这一点尤其困难。微软推出了网络表单，以消除构建网站的复杂性，并简化从窗口表单到网络的切换。这反过来又使得网络表单开发人员，甚至是窗口表单开发人员，很难转向 ASP.NET MVC。Bootstrap 是一组风格化的组件、插件和布局网格，负责处理繁重的工作。自 2013 年以来，微软已经将 Bootstrap 包含在所有 ASP.NET MVC 项目模板中。

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

• Bootstrap 分发中包含的文件
• 如何创建一个空的 ASP.NET 站点并启用 MVC 和静态文件
• 使用 Bower 添加 Bootstrap 文件
• 自动编译 Bootstrap 萨斯文件使用大口
• 安装附加图标集
• 如何创建引用 Bootstrap 文件的布局文件

Bootstrap 分发中包含的文件

为了熟悉 Bootstrap 分发版中的文件，您需要下载它的源文件。撰写本文时，Bootstrap 4 还在 Alpha 中，其源文件可以从http://v4-alpha.getbootstrap.com下载。

Bootstrap 样式表

不要被css文件夹内的文件数量吓到。该文件夹包含四个.css文件和两个.map文件。我们只需要在我们的项目中包含bootstrap.css文件，Bootstrap 样式就可以应用到我们的页面中。bootstrap.min.css文件只是上述文件的缩小版本。对于我们将要创建的项目，可以忽略.map文件。这些文件被用作一种调试符号(类似于 Visual Studio 中的.pdb文件)，它允许开发人员实时编辑他们的预处理器源文件，这超出了本书的范围。

Bootstrap JavaScript 文件

js文件夹包含两个文件。所有 Bootstrap 插件都包含在bootstrap.js文件中。bootstrap.min.js文件只是上述文件的缩小版本。在将文件包含在项目中之前，请确保您拥有对 jQuery 库的引用，因为所有 Bootstrap 插件都需要 jQuery。

Bootstrap 字体/图标

Bootstrap 3 使用字体在 Bootstrap 站点中显示各种图标和字形。Bootstrap 4 将不再附带铭文，但您仍然可以选择手动包含它或包含您自己的图标。以下两个图标集是磷脂的良好替代品:

• 字体牛逼，可从http://fontawesome.io/获得
• GitHub 的 Octicons，可从https://octicons.github.com/获得

Bootstrap 源文件

在开始使用 Bootstrap 之前，您首先需要下载 Bootstrap 源文件。在撰写本文时，Bootstrap 4 处于版本 4 Alpha 3。向项目中添加 Bootstrap 时，您有几个选择。您可以下载编译后的 CSS 和 JavaScript 文件，也可以使用许多包管理器将 Bootstrap Sass 源安装到项目中。

在本章中，您将使用 Bower 向项目中添加 Bootstrap 4 源文件。

注

有关 Bootstrap 4 Alpha 安装源的完整列表，请访问http://v4-alpha.getbootstrap.com/getting-started/download/。

CSS 预处理器

CSS 预处理器处理用预处理语言(如 LESS 或 Sass)编写的代码，并将其转换为标准 CSS，而标准 CSS 又可以由任何标准网络浏览器进行解释。CSS 预处理器通过添加允许变量、混合和函数的特性来扩展 CSS。

使用 CSS 预处理器的好处是它们不受 CSS 的任何限制。CSS 预处理器可以为您提供更多的功能和对样式表的控制，并允许您编写更可维护、灵活和可扩展的 CSS。

CSS 预处理器还可以帮助减少 CSS 的数量，并帮助管理大型复杂的样式表，随着大小和复杂性的增加，这些样式表可能变得越来越难维护。

本质上，像 Less 和 Sass 这样的 CSS 预处理器支持对样式表的编程控制。

Bootstrap 将他们的源文件从 Less 移动到了 Sass 版本 4。Less 和 Sass 非常相似，因为它们共享相似的语法以及诸如变量、混合、部分和嵌套等特性。

Less 受到了 Sass 的影响，后来，Sass 在采用类似 CSS 的块格式时受到了 Less 的影响，这对于 Less 来说非常有效。

创建一个空的 ASP.NET MVC 站点并手动添加 Bootstrap

Visual Studio 2015 Update 3 中的默认 ASP.NET 5 项目模板当前将 Bootstrap 3 添加到项目中。为了在您的 ASP.NET 项目中使用 Bootstrap 4，您需要创建一个空的 ASP.NET 项目，并手动添加 Bootstrap 4 文件。

要创建使用 Bootstrap 4 的项目，请完成以下过程:

1. 在 Visual Studio 2015 中，从文件菜单中选择新建 | 项目或使用快捷键 Ctrl + Shift + N 。

2. From the New Project dialog window, select ASP.NET Core Web Application (.NET Core), which you'll find under Templates | Visual C# | Web.

   

3. Select the Empty project template from the New ASP.NET Core Web Application (.NET Core) Project dialog window and click on OK.

   

启用 MVC 和静态文件

前面的步骤将创建一个空白的 ASP.NET Core 项目。按原样运行项目只会在浏览器中显示一个简单的 Hello World 输出。为了让它服务于静态文件并启用 MVC，我们需要完成以下步骤:

1. 在 Visual Studio 的解决方案资源管理器中双击project.json文件。

2. 将以下两行添加到依赖项部分，并保存project.json文件:

           "Microsoft.AspNetCore.Mvc": "1.0.0", 
           "Microsoft.AspNetCore.StaticFiles": "1.0.0" 
   
   

3. 您应该会在 Visual Studio 解决方案资源管理器中看到一个黄色通知，其中包含一条消息，说明它正忙于恢复包。

4. 打开Startup.cs文件。要为项目启用 MVC，请将ConfigureServices方法更改为以下内容:

           public void ConfigureServices(IServiceCollection services) 
            { 
               services.AddMvc(); 
            } 
   
   

5. 最后，将Configure方法更新为以下代码:

            public void Configure(IApplicationBuilder app, IHostingEnvironment 
            env, ILoggerFactory loggerFactory) 
             { 
                loggerFactory.AddConsole(); 
   
                if (env.IsDevelopment()) 
                 { 
                    app.UseDeveloperExceptionPage(); 
                 } 
   
                 app.UseStaticFiles(); 
   
                 app.UseMvc(routes => 
                 { 
                    routes.MapRoute( 
                    name: "default", 
                    template: "{controller=Home}/{action=Index}/{id?}"); 
                 }); 
              }  
   
   

6. 前面的代码将允许记录和提供静态文件，如图像、样式表和 JavaScript 文件。它还将设置默认的 MVC 路线。

创建默认的路线控制器和视图

创建空的 ASP.NET Core 项目时，默认情况下不会创建默认控制器或视图。在前面的步骤中，我们已经创建了一个默认路由到主控制器的索引操作。为了做到这一点，我们首先需要完成以下步骤:

1. 在 Visual Studio 解决方案资源管理器中，右键单击项目名称，并从上下文菜单中选择添加 | 新文件夹。

2. 命名新文件夹Controllers。

3. 添加另一个名为Views的文件夹。

4. 右键单击Controllers文件夹，选择添加 | 新项目...从上下文菜单中选择。

5. Select MVC Controller Class from the Add New Item dialog, located under .NET Core | ASP.NET, and click on Add. The default name when adding a new controller will be HomeController.cs:

   

6. 接下来，我们需要在Views文件夹中为HomeController添加一个子文件夹。右键单击Views文件夹，从上下文菜单中选择添加 | 新文件夹。

7. 命名新文件夹Home。

8. 右键单击新创建的Home文件夹，选择添加 | 新项目...从上下文菜单中选择。

9. Select the MVC View Page item, located under .NET Core | ASP.NET; from the list, make sure the filename is Index.cshtml and click on the Add button:

   

10. Your project layout should resemble the following in the Visual Studio Solution Explorer:

![Creating the default route controller and view](https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/boots-aspdn-mvc-2e/img/image_01_005.jpg)

使用 Bower 添加 Bootstrap 4 文件

借助 ASP.NET 5 和 Visual Studio 2015，微软提供了将 Bower 用作客户端包管理器的能力。Bower 是 web 框架和库的包管理器，在 web 开发社区中已经非常流行。

注

您可以通过访问http://bower.io/了解更多关于 Bower 的信息，并搜索它提供的套餐。

微软之所以决定允许客户端依赖使用除 NuGet 之外的 Bower 和包管理器，是因为它已经有了如此丰富的生态系统。

注

不要害怕！NuGet 不会走的。您仍然可以使用 NuGet 安装库和组件，包括 Bootstrap 4！

要将 Bootstrap 4 源文件添加到项目中，您需要执行以下步骤:

1. 右键单击 Visual Studio 解决方案资源管理器中的项目名称，然后选择添加 | 新项目...。

2. Under .NET Core | Client-side, select the Bower Configuration File item, make sure the filename is bower.json and click on Add, as shown here:

   

3. 如果尚未打开，双击bower.json文件将其打开，并将 Bootstrap 4 添加到依赖项数组中。该文件的代码应该如下所示:

           { 
              "name": "asp.net", 
              "private": true, 
              "dependencies": { 
              "bootstrap": "v4.0.0-alpha.3" 
              } 
           }  
   
   

4. 保存bower.json文件。

5. 保存bower.json文件后，Visual Studio 会自动将依赖项下载到项目的wwwroot/lib文件夹中。在 Bootstrap 4 的情况下，它也依赖于 jQuery 和 Tether 。您会注意到 jQuery 和 Tether 也作为 Bootstrap 依赖项的一部分被下载。

6. After you've added Bootstrap to your project, your project layout should look similar to the following screenshot:

   

使用大口编译 Bootstrap 文件

添加 Bootstrap 4 时，您会注意到bootstrap文件夹包含一个名为dist的子文件夹。在dist文件夹中，有现成的 Bootstrap CSS 和 JavaScript 文件，如果您不想更改任何默认的 Bootstrap 颜色或属性，可以按原样使用。

但是，因为还添加了源 Sass 文件，这为您定制 web 应用的外观和感觉提供了额外的灵活性。例如，基本 Bootstrap 分布的默认颜色是灰色；如果您想将所有默认颜色更改为蓝色，查找并替换 CSS 文件中对颜色的所有引用将是一项乏味的工作。

例如，如果您打开位于wwwroot/lib/bootstrap/scss的_variables.scss文件，您会注意到以下代码:

$gray-dark:                 #373a3c !default; 
$gray:                      #55595c !default; 
$gray-light:                #818a91 !default; 
$gray-lighter:              #eceeef !default; 
$gray-lightest:             #f7f7f9 !default; 

我们不会在本书中过多讨论关于 Sass 的细节，但是上面代码中名称前面的$表示这些是用于编译最终 CSS 文件的变量。本质上，在编译 Sass 文件时，更改这些变量的值会将颜色更改为我们指定的新值。

注

要了解更多关于萨斯的信息，请前往 http://sass-lang.com/。

添加吞咽 npm 包

我们需要将gulp和gulp-sass节点包添加到我们的解决方案中，以便能够使用大口执行操作。为此，您需要使用 npm 。

注

npm 是 Node.js 运行时环境的默认包管理器。你可以在https://www.npmjs.com/了解更多。

要将gulp和gulp-sass npm包添加到您的ASP.NET项目中，请完成以下步骤:

1. 在 Visual Studio 解决方案资源管理器中右键单击您的项目名称，然后选择添加 | 新项目...从项目上下文菜单中选择。

2. Find the npm Configuration File item, located under .NET Core | Client-side. Keep its name as package.json and click on Add.

   

3. 如果尚未打开，双击新添加的package.json文件，并将以下两个依赖项添加到文件内的devDependencies数组:

           "devDependencies": { 
             "gulp": "3.9.1", 
             "gulp-sass": "2.3.2" 
           } 
   
   

这将为您的项目添加版本 3.9.1 的gulp包和版本 2.3.2 的gulp-sass包。在撰写本文时，这些是最新版本。您的版本号可能不同。

启用大口-萨斯编译

默认情况下，Visual Studio 不会在不安装扩展的情况下将 Sass 文件编译为 CSS，但是我们可以使用 Glow 来启用它。

注

glaugh 是一个 JavaScript 工具包，用于在构建过程中触发事件时，通过一系列流程流式传输客户端代码。grave 可用于自动化和简化开发和重复任务，例如:

• Minify CSS(微型 fy CSS)
• JavaScript 和图像文件，重命名文件
• 组合 CSS 文件

在http://gulpjs.com/了解更多关于大口的信息。

在您可以使用 glaw 将您的 Sass 文件编译为 CSS 之前，您需要完成以下任务:

1. 通过在解决方案资源管理器中右键单击项目名称并选择添加 | 新项目，向您的项目添加新的吞咽配置文件...从上下文菜单中选择。项目位置为.NET Core | 客户端。

2. Keep the filename as gulpfile.js and click on the Add button.

   

3. 将gulpfile.js文件内的代码改为如下:

           var gulp = require('gulp');
           var gulpSass = require('gulp-sass'); 
           gulp.task('compile-sass', function () {
             gulp.src('./wwwroot/lib/bootstrap/scss/bootstrap.scss')   
             .pipe(gulpSass()) .pipe(gulp.dest('./wwwroot/css')); 
             });
   

上一步的代码首先声明我们需要大口和大口-萨斯包，然后创建一个名为编译-萨斯的新任务，该任务将编译位于/wwwroot/lib/bootstrap/scss/bootstrap.scss的萨斯源文件，并将结果输出到/wwwroot/css文件夹。

运行吞咽任务

随着gulpfile.js的正确配置，您现在可以运行您的第一个大口任务来编译 Bootstrap 萨斯到 CSS。通过完成以下步骤来完成此操作:

右键单击 Visual Studio 解决方案资源管理器中的gulpfile.js，并从上下文菜单中选择任务运行器资源管理器。

您应该会看到在任务节点下列出的gulpfile.js中声明的所有任务。如果没有看到列出的任务，点击位于任务运行器浏览器窗口左侧的刷新按钮。

要运行编译-sass 任务，右键单击它并从上下文菜单中选择运行。

grave 将编译 Bootstrap 4 Sass 文件，并将 CSS 输出到指定的文件夹。

将大口任务绑定到 Visual Studio 事件

右键单击任务运行器资源管理器中的每个任务，为了执行每个任务，可能需要很多手动步骤。幸运的是，Visual Studio 允许我们将任务绑定到 Visual Studio 中的以下事件:

• 构建前
• 构建后
• 干净的
• 项目打开

例如，如果我们想在构建项目之前编译 Bootstrap 4 Sass 文件，只需从 Visual Studio 任务运行器资源管理器的绑定上下文菜单中选择【构建前的 T0】:

Visual Studio 将在gulpfile.js顶部添加以下一行代码，告诉编译器在构建项目之前运行任务:

/// <binding BeforeBuild='compile-sass' /> 

安装字体牛逼

Bootstrap 4 不再与磷脂图标集捆绑在一起。但是，您的 Bootstrap 和其他项目有许多免费的替代方案。字体 Awesome 是一个非常好的替代方案，它提供了 650 个图标供你使用，并且是免费的商业用途。

注

通过访问https://fortawesome.github.io/Font-Awesome/了解更多关于字体牛逼的信息。

您可以手动添加对 Font Awesome 的引用，但是由于我们已经在项目中设置好了所有内容，最快的选择是使用 Bower 简单地安装 Font Awesome，然后使用 glow 将其编译到 Bootstrap 样式表中。为此，请遵循以下步骤:

1. 打开bower.json文件，该文件位于您的项目路线中。如果您在 Visual Studio 解决方案资源管理器中没有看到该文件，请单击解决方案资源管理器工具栏上的显示所有文件按钮。

2. 将font-awesome作为依赖项添加到文件中。bower.json文件的完整列表如下:

            { 
              "name": "asp.net", 
              "private": true, 
              "dependencies": { 
              "bootstrap": "v4.0.0-alpha.3", 
              "font-awesome": "4.6.3" 
              } 
            } 
   
   

3. Visual Studio 将下载 Font Awesome 源文件，并在项目内部的wwwroot/lib/文件夹中添加一个font-awesome子文件夹。

4. 将位于wwwroot/font-awesome下的fonts文件夹复制到wwwroot文件夹。

5. 接下来，打开位于wwwroot/lib/bootstrap/scss文件夹中的bootstrap.scss文件，并在文件末尾添加以下一行:

            $fa-font-path: "/fonts"; 
           @import "../../font-awesome/scss/font-awesome.scss";  
   
   

6. 通过任务运行器浏览器运行编译-sass 任务，重新编译 Bootstrap sass。

前面的步骤将在您的 Bootstrap CSS 文件中包含 Font Awesome，这反过来将使您能够在项目中使用它，包括这里演示的标记:

<i class="fa fa-pied-piper-alt"></i>

创建 MVC 布局页面

在 ASP.NET MVC 项目中使用 Bootstrap 4 的最后一步是创建一个布局页面，该页面将包含所有必要的 CSS 和 JavaScript 文件，以便在页面中包含 Bootstrap 组件。要创建布局页面，请执行以下步骤:

1. 在Views文件夹中添加一个名为Shared的新子文件夹。

2. 在Shared文件夹中添加一个新的 MVC 视图布局页面。该项目可在中找到.NET Core |服务器端类别的添加新项目对话框。

3. Name the file _Layout.cshtml and click on the Add button:

   

4. 使用当前项目布局，将以下 HTML 添加到_Layout.cshtml文件中:

   <!DOCTYPE html> 
           <html lang="en"> 
             <head> 
               <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>@ViewBag.Title</title> 
               <link rel="stylesheet" href="~/css/bootstrap.css" /> 
             </head> 
            <body> 
              @RenderBody() 
   
               <script src="~/lib/jquery/dist/jquery.js"></script> 
               <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
            </body> 
           </html> 
   
   

5. 最后，在名为 _ ViewStart.cshtml的Views文件夹中添加一个新的 MVC 视图开始页面。_ViewStart.cshtml文件用于指定所有视图共享的公共代码。

6. 将以下 Razor 标记添加到_ViewStart.cshtml文件中:

           @{ 
               Layout = "_Layout"; 
           } 
   
   

7. 在前面的标记中，使用萨斯源文件和大口生成的 Bootstrap CSS 文件的引用被添加到文件的<head>元素中。在<body>标签中，@RenderBody方法使用 Razor 语法调用。

8. 最后，在文件的底部，就在关闭</body>标记之前，添加了对 jQuery 库和 Bootstrap JavaScript 文件的引用。请注意，在 Bootstrap JavaScript 文件之前，必须始终引用 jQuery。

内容交付网络

您也可以从内容交付网络 ( CDN 中引用 jQuery 和 Bootstrap 库。当添加对最广泛使用的 JavaScript 库的引用时，这是一个很好的方法。如果用户已经访问了使用相同 CDN 中相同库的站点，这将允许您的站点加载得更快，因为库将缓存在他们的浏览器中。

为了从 CDN 中引用 Bootstrap 库和 jQuery 库，请将<script>标记更改为以下内容:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 

注

你可以从https://github.com/Pietervdw/bootstrap-for-aspnetmvc下载本书的示例代码文件。

互联网上有许多社区发展网络；这里列出了一些更受欢迎的选项:

• maxcdn:https://www . maxcdn . com/
• 谷歌托管图书馆:https://developers.google.com/speed/libraries/
• cloudflare:https://www . cloudflare . com/
• Amazon cloudfront:https://AWS . Amazon . com/cloudfront/

总结

在本章中，您学习了如何创建一个空的 ASP.NET 项目，以及如何使用 Bower 添加 Bootstrap 4 源文件。还向您介绍了如何使用大口来执行任务，例如将 Sass 文件编译为 CSS。

在下一章中，您将了解 Bootstrap 的 CSS 和 HTML 元素，并学习如何在网站的设计和布局中使用它们。

二、使用 Bootstrap CSS 和 HTML 元素

Bootstrap 提供了广泛的 HTML 元素和 CSS 类，以及一个高级网格系统来帮助布局您的网页设计。这些类和元素包括帮助排版、代码格式化、表格和表单布局的实用程序。

所有 CSS 类和 HTML 元素与移动优先的流体网格系统相结合，使开发人员能够快速轻松地构建直观的网络界面，而不必担心实现较小设备屏幕响应和用户界面元素样式的具体细节。

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

• 自举网格系统
• Bootstrap 表和按钮
• 布局不同的 Bootstrap 表
• 启用 ASP.NET MVC 脚手架模板
• 在 Bootstrap 中使用映像，并将映像配置为响应

自举网格系统

2015 年，谷歌表示“在包括美国和日本在内的 10 个国家中，在移动设备上进行的谷歌搜索比在计算机上进行的要多”。这意味着用移动设备浏览你网站的人可能比传统台式电脑多。

Bootstrap 网格系统是移动优先的，这意味着它被设计为针对具有较小显示器的设备，然后随着显示器尺寸的增加而增长。它使用 12 列布局，每个媒体查询范围有不同的层。

Bootstrap 网格组件

将 Bootstrap 网格系统想象成类似于传统的 HTML 表。它主要由三个部分组成:

• 容器
• 行
• 列

容器

使用 Bootstrap 网格系统需要容器，容器用于包装和居中页面内容，并为布局指定适当的宽度。顾名思义，它充当网格行和列的容器，是一个标准的<div>元素，类名为.container，表示固定宽度，或者.container-fluid表示全宽度。例如:

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

固定宽度.container类名将在每个响应断点处改变元素的最大宽度，而.container-fluid类名将始终将元素宽度设置为 100%。

行

考虑到 Bootstrap 网格系统，保持表的相似性，行类似于表中的行。每行最多可包含 12 列，并且只允许列包含内容。一行是一个简单的<div>元素，类名为.row，在一个<div>元素中有一个.container类名或.container-fluid。容器中一个简单行的示例如下所示:

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

列

Bootstrap 网格中的列用于将一行划分为已定义的部分，一行不能超过 12 列。色谱柱尺寸有五层，用于根据设备的屏幕尺寸调整尺寸:

• 特大号
• 大型
• 中等
• 小的
• 特别小

这五层用于创建响应断点，该断点又用于指定不同设备大小的布局。下表解释了不同的层:

| **类名** | **设备类型** | **最小宽度** | | `col-xs-*` | 纵向电话 | < 34 em | | `col-sm-*` | 风景中的手机 | 34 em | | `col-md-*` | 药片 | 48 em | | `Col-lg-*` | 桌面 | 62 em | | `Col-xl-*` | 高分辨率桌面 | 75 em |

如前所述，Bootstrap 行可以分为 12 列。布局网页时，请记住所有列的总和应为 12。为了说明这一点，请考虑以下 HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3" style="background-color:green;"> 
            <h3>green</h3> 
        </div> 
        <div class="col-md-6" style="background-color:red;"> 
            <h3>red</h3> 
        </div> 
        <div class="col-md-3" style="background-color:blue;"> 
            <h3>blue</h3> 
        </div> 
    </div> 
</div> 

在前面的代码中，我们有一个容器<div>元素和一个子行<div>元素。行 div 又有三列。您会注意到其中两列的类名为.col-md-3，一列的类名为.col-md-6 。加起来就是 12。

前面的代码将在所有中型和更高的设备上运行良好。为了在分辨率较小的设备上保留前面的布局，您需要组合各种 CSS 网格类。例如，要让我们的布局在平板电脑、手机、中型和大型桌面显示器上工作，请将 HTML 更改为以下内容:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"    
     style="background-color:green;"> 
            <h3>green</h3> 
        </div> 
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"           
         style="background-color:red;"> 
            <h3>red</h3> 
        </div> 
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"           
         style="background-color:blue;"> 
            <h3>blue</h3> 
        </div> 
    </div> 
</div> 

通过在div元素中添加.col-xs-*和.col-sm-*类名，我们将确保我们的布局在各种设备分辨率下都是一样的。

Bootstrap HTML 元素

Bootstrap 提供了一系列不同的 HTML 元素，这些元素已经设计好并可以使用。这些要素包括:

• 桌子
• 小跟班
• 形式
• 形象

Bootstrap 表

Bootstrap 为 HTML 表格提供了默认样式，并提供了一些自定义其布局和行为的选项。当生成列表视图时，默认的 ASP.NET MVC 框架会自动将.table类名添加到表格元素中。

启用 MVC 框架

在前一章中，我们创建了一个空的 ASP.NET Core 项目。为了启用内置的 Visual Studio 脚手架，因为新的 ASP.NET 的方法是只添加您需要的依赖项，我们必须通过完成以下任务手动将所需的依赖项添加到项目中:

1. 在 Visual Studio 中打开您在第 1 章、ASP.NET Core 和 Bootstrap 4 中创建的项目。

2. 在项目的根文件夹中找到project.json文件，双击它进行编辑。

3. 将以下依赖项添加或更新到文件内部的依赖项数组中:

           "Microsoft.AspNetCore.Mvc": "1.0.0", 
           "Microsoft.AspNetCore.StaticFiles": "1.0.0", 
           "Microsoft.AspNetCore.Razor.Tools": { 
             "version": "1.0.0-preview2-final", 
             "type": "build" 
            }, 
           "Microsoft.VisualStudio.Web.CodeGeneration.Tools": { 
             "version": "1.0.0-preview2-final", 
             "type": "build" 
            }, 
           "Microsoft.VisualStudio.Web.CodeGenerators.Mvc": { 
            "version": "1.0.0-preview2-final", 
            "type": "build" 
            } 
   
   

4. 接下来，将以下内容添加到project.json文件中的工具阵列中:

            "Microsoft.VisualStudio.Web.CodeGeneration.Tools": { 
               "version": "1.0.0-preview2-final", 
               "imports": [ 
                "portable-net45+win8" 
                 ] 
               } 
   
   

5. The added dependencies and tools will enable the MVC-specific scaffolding templates to Visual Studio. If successful, you should see a New Scaffolded Item... entry in the Add context menu of the Visual Studio Solution Explorer. Here is a screenshot to illustrate the new menu item:

   

搭建 MVC 列表视图页面

要构建自动包含 Bootstrap 表的 MVC 视图，请执行以下步骤:

1. 在项目中创建新文件夹Models。

2. 在项目的Models文件夹中创建一个名为ProductModel.cs的新视图模型类。这个类将包含六个属性，其代码如下:

           public class ProductModel 
           {public int Id { get; set; } 
           public string Name { get; set; } 
           public decimal UnitPrice { get; set; } 
           public int UnitsInStock { get; set; } 
           public bool Discontinued { get; set; } 
           public string Status { get; set; } 
           } 
   
   

3. 接下来，添加一个新的空ProductsController，并且只给它添加一个动作结果，称为Index。控制器的文件名应该是ProductsController.cs，并且应该在Controllers文件夹中创建。该类的代码如下:

           public class ProductsController : Controller 
           { 
               public IActionResult Index() 
            { 
                var model = new List<ProductModel>(); 
                var product1 = new ProductModel { Name = "Chai", 
                UnitPrice = 18, UnitsInStock = 35, Discontinued = false,
                Id = 1, Status = "active" }; 
                var product2 = new ProductModel { Name = "Chang",
                UnitPrice =19, UnitsInStock = 17, Discontinued = false,
                Id = 2, Status = "success" }; 
                var product3 = new ProductModel { Name = "Aniseed Syrup", 
                UnitPrice = 10, UnitsInStock = 13, Discontinued = false,
                Id = 3, Status = "info" }; 
                var product4 = new ProductModel { Name = "Pavlova",
                UnitPrice =17, UnitsInStock = 29, Discontinued = false,
                Id = 4, Status = "warning" }; 
                var product5 = new ProductModel { Name = "Carnarvon Tigers",
                UnitPrice = 62, UnitsInStock = 42, Discontinued = true,
                Id = 5, Status = "danger" }; 
                model.AddRange(new[] { product1, product2, product3, product4, 
                product5 });  
                return View(model); 
             } 
           } 
   
   

前面的代码初始化了一个新的列表对象，称为model，包含ProductViewModel类的集合。使用样本产品数据创建了五个新的ProductViewModel对象，然后将其添加到model列表中。model名单随后被传递给了视图。

类型

不要对为 MVC 启用脚手架所花费的工作量感到沮丧。这些步骤仅在创建空的 ASP.NET 项目时需要。默认的 MVC 项目模板将自动添加所有必需的代码配置和依赖项。但是，请记住，在编写本文时，默认的 MVC 项目仍然使用 Bootstrap 3。

要构建包含 Bootstrap 表的视图，Bootstrap 表包含我们在Index操作中创建的产品列表，请完成以下步骤:

1. 在项目的Views文件夹中创建新的子文件夹Products。

2. 右键单击新添加的Products文件夹，选择添加|查看...。

3. In the Add | View... dialog windows, set the following field values as shown in the following screenshot:

   

4. 单击添加按钮，Visual Studio 将构建一个包含 Bootstrap 表的视图，该 Bootstrap 表的列标题包含ProductModel类的属性名称。

5. 默认的 ASP.NET MVC 框架将生成一个基本的<table>元素，类名为.table。我们将通过添加表格标题元素 ( <thead>)来更改默认生成的标记，该元素将用于定义表格的列标题。

6. 该元素后面将跟随一个表体元素 ( <tbody>)。表体元素将包含实际的行数据。生成的标记如下所示:

           <table class="table"> 
               <thead> 
                   <tr> 
                     <th> 
                       @Html.DisplayNameFor(model => model.Discontinued) 
                     </th> 
                     <th> 
                       @Html.DisplayNameFor(model => model.Name) 
                     </th> 
                     <th> 
                       @Html.DisplayNameFor(model => model.Status) 
                     </th> 
                     <th> 
                       @Html.DisplayNameFor(model => model.UnitPrice) 
                     </th> 
                     <th> 
                       @Html.DisplayNameFor(model => model.UnitsInStock) 
                     </th> 
                     <th></th> 
                   </tr> 
                </thead> 
                <tbody> 
                   @foreach (var item in Model) 
                    { 
                     <tr> 
                      <td> 
                       @Html.DisplayFor(modelItem => item.Discontinued) 
                      </td> 
                       <td> 
                         @Html.DisplayFor(modelItem => item.Name) 
                       </td> 
                       <td> 
                         @Html.DisplayFor(modelItem => item.Status) 
                       </td> 
                       <td> 
                         @Html.DisplayFor(modelItem => item.UnitPrice) 
                       </td> 
                       <td> 
                         @Html.DisplayFor(modelItem => item.UnitsInStock) 
                       </td> 
                       <td> 
                     <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | 
                     <a asp-action="Details" asp-route-id="@item.Id">Details</a> | 
                     <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> 
                       </td> 
                       </tr> 
                    } 
               </tbody> 
           </table> 
   
   

在前面的标记中，注意<table>元素的类名被设置为table。当您运行项目并导航到产品控制器时(例如，打开此视图)，您的表应该使用 Bootstrap 表样式进行样式设置，如下图所示:

设置 Bootstrap 表的样式

Bootstrap 提供了额外的类，通过这些类，您可以将表设置为所需的外观。要反转表格的颜色，只需将<table>元素的类名更改为.table table-inverse。例如，下面的表元素<table class="table table-inverse">，将产生下面的表:

您还可以选择将表格标题<thead>元素的外观更改为更亮或更暗的颜色。将<thead>元素的类别更改为.thead-inverse将导致标题使用当前 Bootstrap 主题的反色(在默认 Bootstrap 样式的情况下，颜色更深)。

要将 Bootstrap 主题的默认颜色用于表格标题，只需将<thead>元素的类名设置为.thead-default，这将导致表格的标题使用 Bootstrap 主题的默认颜色，在默认 Bootstrap 主题的情况下，该颜色为浅灰色，如下所示:

要创建带边框的表格，请将.table-bordered添加到其类名中，例如:

<table class="table table-bordered"> 

要创建一个表格，其中每一个奇数行用不同于基本颜色的另一种颜色突出显示，请将表格的类名更改为.table table-striped，如下所示:

<table class="table table-striped"> 

最后，Bootstrap 还为您提供了在表上启用悬停状态的选项。这意味着用户将光标悬停在其上的行将被突出显示。为此，将表类更改为.table table-hover，例如:

<table class="table table-hover"> 

可以将所有不同的类名组合起来，创建一个带有悬停的斑马纹带边框的表，如以下标记所示:

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

在您的浏览器中，结果将类似于以下内容:

类型

您可以在http://v4-alpha.getbootstrap.com/content/tables/阅读更多关于 Bootstrap 表的信息。

Bootstrap 上下文表类

Bootstrap 提供了额外的类，您可以使用这些类来设置表的行或单元格的样式。将下列类名之一添加到 HTML 表格的<td>或<tr>元素中，会以灰色、绿色、蓝色、橙色或红色突出显示它。这些颜色分别代表以下内容:

• .table-active
• .table-success
• .table-info
• .table-warning
• .table-danger

当然，您也可以将这些样式动态地应用到您的 MVC 视图中。ProductModel类有一个Status属性，它可能是五个上下文 Bootstrap 类之一。通过将<tr>元素的类设置为该属性，可以根据行的数据动态更改表中行的颜色，如以下标记所示:

<tbody> 
    @foreach (var item in Model) 
    { 
        <tr class="table-@item.Status"> 
            <td> 
                @Html.DisplayFor(modelItem => item.Discontinued) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Name) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Status) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.UnitPrice) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.UnitsInStock) 
            </td> 
            <td> 
               <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | 
               <a asp-action="Details" asp-route-id="@item.Id">Details</a> | 
               <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> 
            </td> 
        </tr> 
    } 
</tbody> 

在前面的代码中，您会注意到表行的类被设置为table-@item.status。这将根据我们为status属性指定的映射突出显示行，如下图所示:

反应灵敏且更小的桌子

要创建单元格填充减半的较小表格，请将<table>元素的类设置为.table table-sm，如以下代码片段所示:

<table class="table table-sm"> 

要将表格更改为在小型设备上水平滚动的响应表格，请将<table>元素的类别设置为.table table-responsive，例如:

<table class="table table-responsive"> 

这种变化仅在分辨率小于 768 像素的设备上可见，但在更大的显示器上看不到差异。

Bootstrap 按钮

Bootstrap 提供了各种颜色和尺寸的按钮。核心按钮有五种颜色和四种尺寸可供选择。按钮的颜色和大小是使用其class属性应用的。以下是用于设置按钮大小的类别列表:

• btn btn-default btn-xs
• btn btn-default btn-sm
• btn btn-default
• btn btn-default btn-lg

要创建从极小到大的四个白色/默认按钮，您需要实现以下 HTML 标记:

<div class="row"> 
    <!-- Standard button --> 
    <button type="button" class="btn btn-default btn-xs">Default Extra Small</button> 
    <button type="button" class="btn btn-default btn-sm">Default Small</button> 
    <button type="button" class="btn btn-default">Default</button> 
    <button type="button" class="btn btn-default btn-lg">Default Large</button> 
</div> 

按钮颜色也由类名指定。以下是可用颜色类别名称的列表:

• btn-default
• btn-primary
• btn-success
• btn-info
• btn-warning

按钮的范围如下图所示:

轮廓按钮

Bootstrap 4 引入了一种新的按钮样式，称为轮廓按钮。要将其应用于按钮，只需将.btn-*-outline类添加到<button>元素中。例如，下面的代码创建了一个主(蓝色)轮廓按钮:

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

上述代码将生成以下 Bootstrap 按钮:

表单布局和元素

表单构成了大多数业务应用的一大部分，因此，对 web 应用中的所有表单应用统一的样式不仅在视觉上令人愉悦，而且还为用户提供了更友好的界面。Bootstrap 提供了一系列 CSS 样式，使您能够创建视觉上吸引人的表单。

垂直/基本形式

Bootstrap 中的基本表单总是以垂直方式显示其内容，这意味着表单<input>元素的标签显示在它们的上方。使用 Bootstrap 4，<fieldset>元素没有任何边框、填充或边距，通过将<fieldset>元素的类设置为，它们可以用于将输入分组。form-group。表单元素也可以通过将它们放在类别为.form-group的<div>元素中进行分组。

在接下来的 HTML 标记中，将使用新的 ASP.NET Core 标签助手创建一个包含两个 Bootstrap 表单输入元素和一个提交按钮的 HTML 表单。请注意，创建了两个表单组，一个使用<fieldset>元素，另一个使用<div>元素:

<div class="container"> 

    <form asp-controller="Account" asp-action="Login" method="post"> 

        <fieldset class="form-group"> 
            <label asp-for="Username">Username</label> 
            <input asp-for="Username" class="form-control" placeholder=
             "Enter your username"/> 
        </fieldset> 

        <div class="form-group"> 
            <label asp-for="Password">Password</label> 
            <input asp-for="Password" class="form-control" placeholder=
             "Enter your password"/> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 

    </form> 

</div> 

该表单在您的浏览器中看起来像下面的屏幕截图:

内嵌表单

内联窗体是其元素相互对齐的窗体。内联表单仅适用于视口宽度大于或等于 768 像素的设备。为了让屏幕阅读器能够阅读您的表单，最好总是包含表单元素的标签。

如果您希望隐藏表单元素的标签，请将其标签的类别设置为.sr-only。在下面的代码中，我们将使用登录表单并将其<form>元素的类设置为。form-inline。还要注意标签不可见，因为它们的.sr-only class名称:

<div class="container"> 

    <h1>Log in - Basic/Vertical Form</h1> 

    <form asp-controller="Account" asp-action="Login" method="post"> 

        <fieldset class="form-group"> 
            <label asp-for="Username">Username</label> 
            <input asp-for="Username" class="form-control" placeholder=
             "Enter your username"/> 
        </fieldset> 

        <div class="form-group"> 
            <label asp-for="Password">Password</label> 
            <input asp-for="Password" class="form-control" placeholder=
             "Enter your password"/> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 

    </form> 

</div> 

这将在浏览器中呈现以下表单:

基于网格的表单

如果您需要对 Bootstrap 表单的布局进行更多控制，可以使用预定义的网格类。使用 Bootstrap 3，如果你想创建一个水平表单，你应该给<form>标记一个类名。形式-水平。为了创建一个水平的 Bootstrap 4 表单，您需要将.row类添加到.form-group<div> 或<fieldset>元素中，并使用.col-*类名来指定表单控件和标签大小。

若要垂直对齐表单组件的标签，请将标签的类别设置为.form-control-label。在下面的代码中，与之前相同的登录表单被创建为水平对齐的表单:

<div class="container"> 

    <h1>Log in - Horizontal/Grid Form</h1> 

    <form asp-controller="Account" asp-action="Login" method="post"> 

        <fieldset class="form-group row"> 
            <label asp-for="Username" class="col-sm-3 form-control-label">
             Username</label> 
            <div class="col-sm-9"> 
                <input asp-for="Username" class="form-control" 
                 placeholder="Enter your username" /> 
            </div> 
        </fieldset> 

        <div class="form-group row"> 
            <label asp-for="Password" class="col-sm-3 form-control-label">
             Password</label> 
            <div class="col-sm-9"> 
                <input asp-for="Password" class="form-control" 
                 placeholder="Enter your password" /> 
            </div> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 

    </form> 

</div> 

生成的 HTML 表单看起来类似于下面的截图:

Bootstrap 映像

通过将图像的类别属性设置为.img-fluid，可以使图像具有响应性。这将通过将图像的最大宽度设置为 100%并将高度设置为自动来相对于其父元素缩放图像。

您还可以选择用圆角、圆形或外边框来塑造图像。这是通过将<img>元素的类设置为以下 Bootstrap 类之一来实现的:

• img-rounded
• img-circle
• img-thumbnail

在下图中，我们显示了员工列表及其图片。员工列表可以从数据库中检索并传递给视图:

实现上述结果的代码如下，可以在本章附带的示例项目中查看:

@model IEnumerable<Chapter2.Models.EmployeeViewModel> 
<div class="container"> 
    <h2>Employees</h2> 

    <div class="row"> 
        @foreach (var item in Model) 
        { 
            <div class="col-md-4"> 
                <img src="@Url.Content("~/img/employees/" + item.Id +
                   ".png")" 
                 alt="@item.Name" class="img-circle img-responsive"> 
                <h3> 
                    @item.Name<small> @item.JobTitle</small> 
                </h3> 
                <p>@item.About</p> 
            </div> 
        } 
    </div> 

</div> 

在前面的代码中，我们遍历了模型中的每个雇员项，并使用Id属性作为文件名呈现了一个<img>元素。每个<img>元素的类属性被设置为。img-circle把图像画成圆形。

自举数字

如果需要显示带有标题的图像或内容，可以使用<figure>元素。<figure>元素是 HTML5 规范的一部分，并不特定于 Bootstrap 4。然而，Bootstrap 4 确实提供了一些帮助类来适当地设置<figure>元素的样式。

例如，下面的 HTML 标记将创建一个包含图像和标题的<figure>元素:

<div class="row"> 
    <div class="col-md-12"> 
        <figure class="figure"> 
            <img src="@Url.Content("~/img/bulb.png")" class="figure-img 
             img-fluid img-rounded" alt="Light bulb"> 
            <figcaption class="figure-caption"> 
                This is a public domain image, available from 
            <code>http://publicdomainarchive.com</code> 
            </figcaption> 
        </figure> 
    </div> 
</div> 

浏览器中上述标记的结果将类似于下面的屏幕截图:

总结

在本章中，您已经探索了如何使用 Bootstrap 网格和表单类来布局各种元素。您还看到了如何启用 MVC 框架，以及如何在我们的项目中加入响应性的 Bootstrap 图像和图形。

在下一章中，您将发现各种 Bootstrap 组件，包括 Bootstrap 导航栏、输入组、进度条和警报，以及如何在您的 ASP.NET MVC 项目中实现它们。

三、使用 Bootstrap 组件

Bootstrap 提供了十几个组件，例如输入组、下拉菜单、导航、警报和图标。通过在 web 应用中使用这些组件，您可以为用户提供一致且易于使用的界面。

Bootstrap 组件本质上是由各种现有的 Bootstrap 元素组合而成的，添加了许多独特的类名，并代表了许多网站上使用的许多常见隐喻。

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

• 使用 Bootstrap 导航栏
• 如何实现按钮组和下拉菜单
• 探索不同的输入组
• 使用不同的 nav(nav bar、药丸等)
• 实现警报、进度条和徽章
• 卡片介绍

Bootstrap 导航栏

Bootstrap 导航栏是大多数使用 Bootstrap 框架的站点上使用的组件之一。导航条在你的网站中起着导航标题的作用，在使用 BootstrapCollapse plugin时，它会在只显示图标菜单的较小设备上折叠。它非常适合包括网站品牌和导航。

基本适航

基本导航栏由网站徽标或品牌名称、导航菜单和在较小设备上切换行为的选项组成。一个基本的 Bootstrap 导航栏可能类似于这样:

前面的导航栏包含一个包含站点徽标的<a>元素，类名为.navbar-brand。它还包含一个<ul>元素，其类名被设置为.nav navbar-nav。每个<li>子元素的类名设置为.nav-item。此处列出了创建导航栏所需的完整 HTML 标记:

<nav class="navbar navbar-full navbar-dark bg-primary"> 
    <a class="navbar-brand" href="#"> 
        <img src="~/img/bootstraplogo.png" alt="Logo"/> 
    </a> 
    <ul class="nav navbar-nav"> 
        <li class="nav-item active"> 
            <a class="nav-link" asp-controller="Home"
             asp-action="Index">Home</a> 
        </li> 
        <li class="nav-item"> 
            <a class="nav-link" href="#">About</a> 
        </li> 
        <li class="nav-item"> 
            <a class="nav-link" href="#">Products</a> 
        </li> 
        <li class="nav-item"> 
            <a class="nav-link" href="#">Contact</a> 
        </li> 
    </ul> 
</nav> 

响应式导航条

Bootstrap 使用Collapse库来允许导航栏在较小的设备上做出响应。您可能已经注意到一个汉堡菜单，它隐藏了从移动设备访问大多数现代网站时通常可见的菜单项:

为了实现上一个屏幕截图中所示的所需菜单，您需要将 navbar 标记更改为以下内容:

<nav class="navbar navbar-full navbar-dark bg-primary"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navCollapse"> 
        ☰ 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="navCollapse"> 
        <a class="navbar-brand" href="#"> 
            <img src="~/img/bootstraplogo.png" alt="Logo" /> 
        </a> 
        <ul class="nav navbar-nav"> 
            <li class="nav-item active"> 
                <a class="nav-link" asp-controller="Home" 
                 asp-action="Index">Home</a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" href="#">About</a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" href="#">Products</a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" href="#">Contact</a> 
            </li> 
        </ul> 
    </div> 
</nav> 

正如前面代码中突出显示的，为了显示折叠时切换导航栏项目的按钮，添加了一个名为.navbar-toggler hidden-sm-up的<button>元素。

请注意，按钮上显示的图标是一个 Font Awesome 图标，只有当您按照第 1 章、中的说明将 Font Awesome 添加到您的项目中时，该图标才会起作用。ASP.NET Core 和 Bootstrap 4 。

其余菜单项被包装在一个名为.collapse navbar-toggleable-xs的<div>元素中。

通过组合.navbar-toggler和.navbar-toggleable-*类名，您可以指定要在哪个设备上显示内容。

类型

请放心，Bootstrap 团队正在积极致力于改进和增强 Bootstrap 的所有功能，而大多数问题应该会在 Bootstrap 4 的最终版本发布后尽快得到解决。您可以在 GitHubhttps://github.com/twbs/bootstrap/issues/上看到 Bootstrap 4 的开放问题列表。

带下拉菜单的导航栏

在许多情况下，您希望在主菜单项下显示附加的子菜单。例如，在下面的截图中，我们将产品类别列表显示为产品菜单的子菜单:

前面的导航栏使用与第一个导航栏相同的标记创建，但是“产品”菜单项的类名更改为.nav item dropdown，<li>元素中的<a>元素接收到的类名为. nav-link dropdown-toggle。“产品”菜单项的 HTML 标记如下:

<li class="nav-item dropdown"> 
    <a class="nav-link dropdown-toggle" data-toggle="dropdown"  href="#" role="button" 
       aria-haspopup="true" aria-expanded="false"> 
        Products 
    </a> 
    <div class="dropdown-menu" aria-labelledby="Products"> 
        <a class="dropdown-item" href="#">Beverages</a> 
        <a class="dropdown-item" href="#">Condiments</a> 
        <a class="dropdown-item" href="#">Seafood</a> 
    </div> 
</li> 

Navbar 配色方案

Bootstrap 4 允许您使用<nav>元素的.navbar-*和.bg-*类名的简单组合来设置导航栏的主题。例如，在下面的截图中，我们创建了两个导航栏，一个带有蓝色背景，另一个带有红色背景:

通过在导航条<nav>元素中添加.bg-primary或.bg-danger来实现前面的导航条颜色。

<nav class="navbar navbar-dark bg-primary"> 
<nav class="navbar navbar-light bg-danger">  

您也可以通过设置background-color CSS 属性为导航栏应用自定义颜色。例如，下面的截图是通过使用下面的 HTML 标记实现的:

<nav class="navbar navbar-light bg-inverse" style="background-color: #8361B7;"> 

Bootstrap 提供了四种基本的颜色样式，您可以使用它们来设计导航栏的样式:

• bg-success - Green
• bg-warning - Orange
• bg-info - Light Blue
• bg-danger - Red

列出组

列表组是灵活的组件，可以显示简单的元素列表，也可以与其他元素组合，创建包含自定义内容的复杂列表。例如，我们将创建一个示例搜索页面，在 Bootstrap 列表组中显示搜索结果。

首先完成以下步骤:

1. 给你的项目添加一个名为SearchController.cs的新控制器。

2. 将Index动作改为如下:

           public IActionResult Index(string query) 
           { 
               ViewBag.SearchQuery = query; 
               var products = GetProducts(); 
               if (!string.IsNullOrEmpty(query)) 
               { 
                 var results = products.Where(p => p.Name.Contains(query)); 
                 return View(results); 
               } 
               return View(products); 
           } 
   
   

3. 上述代码使用GetProducts方法检索所有产品的列表。如果query参数包含一个值，它将过滤产品列表并返回结果。如果查询参数不包含任何值，它将返回所有产品。

4. GetProducts方法的代码如下:

   private List<ProductModel> GetProducts() 
           { 
               var model = new List<ProductModel>(); 
               var product1 = new ProductModel { Name = "Chai", UnitPrice = 18, 
               UnitsInStock = 35, Discontinued = false, Id = 1, 
               Status = "active" }; 
               var product2 = new ProductModel { Name = "Chang", UnitPrice = 19, 
               UnitsInStock = 17, Discontinued = false, Id = 2,
               Status = "success" }; 
               var product3 = new ProductModel { Name = "Aniseed Syrup", UnitPrice 
               = 10, UnitsInStock = 13, Discontinued = false, Id = 3, 
               Status = "info" }; 
               var product4 = new ProductModel { Name = "Pavlova", UnitPrice = 17,
               UnitsInStock = 29, Discontinued = false, Id = 4, 
               Status = "warning" }; 
               var product5 = new ProductModel { Name = "Carnarvon Tigers", 
               UnitPrice = 62, UnitsInStock = 42, Discontinued = true, Id = 5, 
               Status = "danger" }; 
               model.AddRange(new[] 
               { product1, product2, product3, product4, product5 }); 
               return model; 
            } 
   
   

5. 接下来，在名为Search的Views文件夹中创建新的子文件夹，并向其中添加名为Index.cshtml的新视图。

6. 将视图的 HTML 更改为以下内容:

   @model IEnumerable<Chapter3.Models.ProductModel> 
            <div class="container" style="padding-top: 30px;"> 
              <h1> 
               Product search results 
               <small> 
               @if (ViewBag.SearchQuery != null) 
               {<text>Results for your search term: </text> @ViewBag.SearchQuery 
               } 
               </small> 
              </h1> 
              <ul class="list-group"> 
              @foreach (var item in Model) 
               { 
                 <li class="list-group-item"> 
                 <span class="label label-default label-pill pull-xs-right">
                   @item.UnitsInStock</span> 
                   @item.Name 
                 </li> 
                } 
              </ul> 
              </div> 
   
   

7. In the preceding markup, the product items are loaded into an unordered list element <ul> as anchor <li> elements. Each <li> element's class name should be set to .list-group-item. The view should look like the following screenshot inside your browser:

   

徽章

徽章用于突出显示项目。根据应用的类型，您通常会看到徽章来指示新项目或未读项目的数量。我们在产品搜索结果页面上使用徽章来指示当前库存的单位数量:

<li class="list-group-item"> 
    <span class="tag tag-default tag-pill pull-xs-right">@item.UnitsInStock</span> 
    @item.Name 
</li> 

向元素添加徽章就像添加<span>元素并将其类名设置为 .tag一样简单。您还会注意到，您可以使用默认的 Bootstrap 上下文类来设置徽章的颜色。例如，要将徽章颜色更改为红色，请将.tag-default类名更改为.tag-danger。

媒体对象

媒体对象组件可用于构建分层样式列表，如博客评论或推文。在下面的示例应用中，当用户搜索员工时，我们将使用它返回搜索结果视图。我们的模型将有一个'ReportsTo'字段，指示其他员工向哪个员工报告；媒体对象组件将是视觉上指示这一点的理想选择。

位于SearchController中搜索员工并将结果返回给视图的方法如下:

public IActionResult SearchEmployees(string query) 
{ 
    ViewBag.SearchQuery = query; 
    var employees = GetEmployees(); 
    if (!string.IsNullOrEmpty(query)) 
    { 
        var results = employees.Where(p => p.Name.Contains(query)); 
        return View(results); 
    } 
    return View(employees); 
} 

前面的代码将使用GetEmployees方法检索员工列表，如果查询参数不为空，则返回符合搜索条件的员工，并将所有员工传递给视图。

GetEmployees方法的代码如下:

private List<EmployeeViewModel> GetEmployees() 
{ 
    var vicePresident = new EmployeeViewModel 
    { 
        Id = 2, 
        Name = "Andrew Fuller", 
        JobTitle = "Vice President, Sales", 
        ReportsTo = null 
    }; 

    var reportingEmployees = new List<EmployeeViewModel> 
    { 
        new EmployeeViewModel { Id = 1, Name = "Nancy Davolio",JobTitle = 
        "Sales Representative", ReportsTo = 2}, 
        new EmployeeViewModel { Id = 3, Name = "Janet Leverling", JobTitle =
        "Sales Representative", ReportsTo = 2 }, 
        new EmployeeViewModel { Id = 4, Name = "Laura Callahan", JobTitle =
        "Inside Sales Coordinator", ReportsTo = 2 } 
    }; 

    vicePresident.ReportingEmployees = reportingEmployees; 
    var employees = new List<EmployeeViewModel> { vicePresident }; 

    return employees; 
} 

员工搜索结果视图使用媒体对象组件来设置员工信息的样式并显示员工照片。视图的标记如下:

@model IEnumerable<Chapter3.Models.EmployeeViewModel> 
<div class="container"> 
        <h1> 
            Employees Results <small>Results for your search term: 
            "@ViewBag.SearchQuery"</small> 
        </h1>     
    @foreach (var item in Model) 
    { 
        <div class="media"> 
            <div class="media-left"> 
                <a href="#"> 
                    <img class="media-object" src="@Url.Content("~/img 
                     /employees/" + @item.Id + ".png")" alt="@item.Name" 
                     width="64" height="64"> 
                </a> 
            </div> 
            <div class="media-body"> 
                <h4 class="media-heading">@item.Name</h4> 
                @item.About 
                @foreach (var emp in @item.ReportingEmployees) 
                { 
                    <div class="media"> 
                        <a class="media-left" href="#"> 
                            <img class="media-object" src="@Url.Content("~/img
                             /employees/" + @emp.Id + ".png")" alt="@emp.Name" 
                             width="64" height="64"> 
                        </a> 
                        <div class="media-body"> 
                            <h4 class="media-heading">@emp.Name</h4> 
                            @emp.JobTitle 
                        </div> 
                    </div> 
                } 
            </div> 
        </div> 
    } 
</div> 

媒体对象组件由类名为.media、media-heading和media-body的元素组合而成。.media-object类名用于表示图像、视频或音频等媒体对象。生成的视图应该类似于下面的截图:

面包屑

面包屑是网页设计中常用的比喻，用来向用户指示他们在导航树中的当前位置。它类似于 Windows 资源管理器中的文件路径。面包屑是具有许多子导航级别的网站的理想选择，它们允许用户在不同的父页面和子页面之间导航。

在下面的标记中，我们将使用 Razor 和 HTML 的组合来构建面包屑组件，用户可以使用该组件导航回主页或管理页面:

<ol class="breadcrumb"> 
    <li class="breadcrumb-item"><a href="#">Home</a></li> 
    <li class="breadcrumb-item"><a href="#">Search</a></li> 
    <li class="breadcrumb-item active">Employees</li> 
</ol> 

前面的标记包含一个有序列表<ol>元素，类名为.breadcrumb。面包屑的每个子元素都作为列表项<li>元素添加，类名为.breadcrumb-item。为了向用户指示面包屑的最后一级是活动页面，我们将其<li>元素的类名设置为.active。访问该页面时，前面代码的结果将类似于下面的屏幕截图:

分页

分页用于将内容(通常是列表)分成单独的页面。例如，当构建列表视图时，默认的构建模板会生成一个表，其中包含传递到视图的集合中每个项目的一行。这对于少量数据来说没问题，但是如果列表包含数百个项目，您的页面将需要很长时间来加载。理想情况下，您希望将列表视图拆分为每页 5 到 10 个可管理的项目。

在这本书的第一版中，我们使用了PagedList.Mvc NuGet 包来使使用 Bootstrap 3 的分页更加容易。这个包不再维护，但是在 NuGet 上有一个名为X.PagedList的嵌入式替换库。

不幸的是，两个 NuGet 包都不能工作，因为它们依赖于从 ASP.NET Core 中移除的System.Web。在下面的例子中，我们将使用一个名为cloudscribe.Web.Pagination的开源库，使用 Bootstrap 4 创建一个分页列表。

要创建分页列表，请执行以下步骤:

1. Open the project.json file, and add the following to the dependencies section: "cloudscribe.Web.Pagination": "1.0.2-*" Visual Studio will download the required dependencies. Next, open the ProductController.cs class file, add a new action called Index, and change its code to the following:

           public IActionResult Index(int? page)
            {
             int pageSize = 10;
             var currentPageNum = page.HasValue ? page.Value : 1;
             var offset = (pageSize * currentPageNum) - pageSize;
             var model = new ProductPagingViewModel();
             model.Products = GetProducts()
             .Skip(offset)
             .Take(pageSize).OrderBy(p=>p.Name)
             .ToList();
            model.Paging.CurrentPage = currentPageNum;
            model.Paging.ItemsPerPage = pageSize;
            model.Paging.TotalItems = GetProducts().Count;
            return View(model);
            }
   

   

   在前面的代码中，创建了一个名为Index 的新动作方法，它接受一个名为page的整数参数。此参数用于指示用户当前正在查看列表的哪一页。Name物业检索并订购产品清单。

   pageSize变量用于设置每页应显示的项目数。然后产品列表作为ProductPagingViewModel返回。ProductPaginViewModel的代码如下:

             public class ProductPagingViewModel 
             { 
               public ProductPagingViewModel() 
               { 
                   Paging = new PaginationSettings(); 
               } 
   
               public string Query { get; set; } = string.Empty; 
   
               public List<ProductModel> Products { get; set; } = null; 
   
               public PaginationSettings Paging { get; set; } 
             } 
   
   

2. Next, open the Startup.cs file and add the following code to the ConfigureServices method:

              services.AddCloudscribePagination();
   

   如果项目的View文件夹还没有包含_ViewImports.cshtml文件，请添加该文件，并将其内容更改为以下内容:

           @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
           @addTagHelper "*, cloudscribe.Web.Pagination"  
   
   

3. 您需要添加前面的代码，因为TagHelpers是选择加入的。TagHelpers在第 5 章、创建 MVC Bootstrap 助手和标签助手中讨论。

4. 向Views\Product文件夹添加一个名为Index.cshtml的新视图。

5. Add the following to the Index.cshtml file:

           @model Chapter3.Models.ProductPagingViewModel 
   
           <div class="container" style="padding-top: 10px;"> 
               <h1> 
                   Products  
               </h1> 
   
               <table class="table table-striped table-bordered"> 
                   <thead> 
                   <tr> 
                       <th> 
                           Product Name 
                       </th> 
                       <th> 
                           Unit Price 
                       </th> 
                       <th> 
                           Units in Stock 
                       </th> 
                       <th> 
                           Discontinued 
                       </th> 
                   </tr> 
                   </thead> 
                   <tbody> 
                   @foreach (var item in Model.Products) 
                   { 
                       <tr class="@item.Status"> 
                           <td>@item.Name</td> 
                           <td>@item.UnitPrice</td> 
                           <td>@item.UnitsInStock</td> 
                           <td>@item.Discontinued</td> 
                       </tr>} 
                   </tbody> 
               </table> 
               <div> 
                   <cs-pager cs-paging-pagesize="@Model.Paging.ItemsPerPage" 
                             cs-paging-pagenumber="@Model.Paging.CurrentPage" 
                             cs-paging-totalitems="@Model.Paging.TotalItems" 
                             cs-pagenumber-param="page" 
                             cs-show-first-last="true" 
                             cs-suppress-empty-nextprev="true" 
                             cs-suppress-inactive-firstlast="true" 
                             cs-first-page-text="First" 
                             cs-last-page-text="Last" 
                             cs-pager-li-current-class="active" 
                             cs-pager-li-non-active-class="disabled">
                   </cs-pager> 
               </div> 
           </div> 
   
   

   在前面的 HTML/Razor 标记中，视图的模型被声明为包含一系列ProductModel对象的ProductPaginViewModel对象。

   在<table>元素的底部，一个自定义的TagHelper被用来为表格呈现分页。TagHelper是之前添加的cloudscribe.Web.Pagination库的一部分。

创建cloudscribe.Web.Pagination库是为了支持 Bootstrap 3。为了使它能够与 Bootstrap 4 一起工作，您可以通过以下步骤直接更改库的源代码:

1. 在 Visual Studio 解决方案资源管理器中打开位于cloudscribe.Web.Pagination项目内部的PagerTagHelper.cs文件。

2. 在Process方法中定位下面一行。应该在 211 号线:

           var li = new TagBuilder("li"); 
   
   

3. Bootstrap 4 分页组件要求其<li>元素的类名为.page-link。通过在上一步提到的行下面添加下面一行来改变这一点:

           li.AddCssClass("page-item"); 
   
   

4. Bootstrap 4 还要求用于分页的<a>元素的类名为.page-link。为了使PagerTagHelper与 Bootstrap 4 一起工作，请在Process方法(第 224 行)中更改以下代码:

           var a = new TagBuilder("a"); 
           a.AddCssClass("page-link"); 
   
   

5. 您不需要更改Cloudscribe.Web.Pagination库的源代码，也可以通过在页面中添加以下 JavaScript 代码来实现分页组件的正确 Bootstrap 4 样式:

           $(document).ready(function () { 
               $('ul.pagination > li').addClass('page-item'); 
               $('li.page-item > a').addClass('page-link'); 
               $('li.active').empty(); 
               $('li.active').append('<a class="page-link" href="#">' +                  @Model.Paging.CurrentPage + ' <span class="sr-only">(current)</span>
           </a>'); 
           }); 
   
   

剩下要做的就是构建项目，并在浏览器中打开产品控制器的页面操作。您应该会看到一个分页表，其中包含一个 Bootstrap 4 风格的分页组件，该组件被分成多个页面，每个页面包含五个产品:

输入组

输入组是向用户提供有关您期望他们在特定表单元素中输入的数据的附加信息的另一种方式。Bootstrap 提供了在输入元素之前或之后添加部分的类。这些部分可以包含文本或图标。

要创建一个文本输入元素来指示用户我们需要他们在字段中输入电话号码，我们将使用以下标记:

@model Chapter3.Models.PersonModel 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-6"> 
            <label asp-for="Phonenumber" class="col-md-4 control-label">
            </label> 
            <div class="input-group"> 
                <span class="input-group-addon" id="PhoneNumber">
                <i class="fa fa-phone"></i></span> 
                <input asp-for="Phonenumber" class="form-control"
                 placeholder="Phone number"/> 
            </div> 
        </div> 
    </div> 
</div> 

前面标记的结果将是一个文本输入元素，其左侧有一个灰色部分，内部有一个电话图像，如下图所示:

类型

Bootstrap 4 发行版中不包含 Font Awesome。第 1 章、ASP.NET Core 与 Bootstrap 4 入门，详细介绍如何将其添加到项目中。

您还可以创建在文本输入的右侧对齐的输入组，这些输入组包含文本而不是图像。例如，下面的标记创建了一个文本输入字段，向用户指示只需要电子邮件地址的第一部分，最后一部分将自动追加:

<div class="row"> 
    <div class="col-md-6"> 
        <label asp-for="Email" class="col-md-4 control-label"></label> 
        <div class="input-group"> 
            <input asp-for="Email" class="form-control" placeholder="Email
             address" /> 
            <span class="input-group-addon" id="Email">@@northwind.com</span> 
        </div> 
    </div> 
</div> 

前面标记的结果在浏览器中看起来像下面的图像:

您也可以使用以下代码创建一个两边都有灰色部分的文本输入:

<div class="row"> 
    <div class="col-md-6"> 
        <label asp-for="Salary" class="col-md-4 control-label"></label> 
        <div class="input-group"> 
            <span class="input-group-addon">$</span> 
            <input type="text" class="form-control"> 
            <span class="input-group-addon">.00</span> 
        </div> 
    </div> 
</div> 

在前面的代码中，我们创建了一个文本输入，其灰色部分左侧带有美元符号，右侧灰色部分包含 .00 。这将向用户表明我们期望一个整数，并且系统总是期望零小数:

按钮下拉

当您需要一个可以执行多个相关操作的按钮时，按钮下拉菜单非常有用。例如，您可以有一个保存记录的保存按钮，但您也希望给用户一个选项来保存记录，并自动显示一个新的空表单来创建另一个记录。当用户需要创建多个相同类型的记录时，这将对他们有利。

例如，下面的代码在表单内创建一个按钮dropdown菜单，该菜单将创建一个带有两个附加操作的保存按钮:

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" 
     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        Save 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
        <button class="dropdown-item" type="submit">Save &amp; New</button> 
        <div class="dropdown-divider"></div> 
        <button class="dropdown-item" type="button">Duplicate</button> 
    </div> 
</div> 

在您的浏览器中，结果将如下所示:

警报

警报组件用于向用户提供视觉反馈。这可用于向用户提供记录已保存的确认消息、出错的警告消息或基于系统事件的信息消息。

Bootstrap 提供四种不同风格的警报。例如，以下标记生成绿色、蓝色、橙色和红色警告框:

<div class="alert alert-success" role="alert"> 
    <strong>Success!</strong> You have successfully saved the file. 
</div> 
<div class="alert alert-info" role="alert"> 
    <strong>Info.</strong> Something has just happened. 
</div> 
<div class="alert alert-warning" role="alert"> 
    <strong>Warning!</strong> The file size is too big. 
</div> 
<div class="alert alert-danger" role="alert"> 
    <strong>Danger!</strong> The file could not be saved 
</div> 

警告框在浏览器中应该类似于下图:

一个dismissible提醒是一个可以通过用户点击右上角的小 X 图标关闭的提醒。为了创建可消除的警报，您必须加载警报插件或 Bootstrap JavaScript 库，将.alert-dismissable类名添加到警报<div>，并将警报的关闭按钮的类设置为.close。下面的 HTML 标记说明了如何创建可消除的警报:

<div class="alert alert-danger alert-dismissible fade in" role="alert"> 
    <button type="button" class="close" data-dismiss="alert"
     aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
    </button> 
    <strong>Something went wrong!</strong> You can close this alert when done. 
</div> 

进度条

进度条是一个比喻，与传统的桌面和网络开发一起使用，为用户提供任务或动作进度的视觉反馈。Bootstrap 提供了许多不同风格的进度条。

基本进度条

基本 Bootstrap 进度条显示纯蓝色进度条。Bootstrap 4 使用 HTML 5 <progress>元素，类名为.progress，来显示进度条。以下标记生成一个基本进度条，最大值为100，当前值为50:

<progress class="progress" value="50" max="100"></progress> 

标记的结果如下图所示:

上下文进度条

您可以使用相同的按钮和警报样式类来生成不同颜色的进度条。这是通过将进度条的类名设置为下列之一来实现的:

• progress progress-success
• progress progress-info
• progress progress-warning
• progress progress-danger

结果如下图所示:

条纹和动画进度条

要生成具有渐变条纹效果的进度条，请将.progress progress-striped类名添加到<progress>元素中:

<progress class="progress progress-striped progress-danger" value="75" max="100"></progress> 

结果如下图所示:

要添加给人进度条上的条纹正在移动的印象的动画效果，只需向其父级<progress>元素添加一个.progress-animated类:

<progress class="progress progress-striped progress-danger progress-animated" value="75" max="100"></progress> 

卡片

使用 Bootstrap 4，井、面板和缩略图已被卡片取代。卡片是多种内容的灵活容器。它包括页眉、页脚和颜色的自定义选项。

包含图像、标题和文本内容的 Bootstrap 卡组件示例如下图所示:

生成 Bootstrap 卡所需的标记如下:

<div class="card"> 
    <img class="card-img-top" src="~/img/skyline.jpg" alt="Card image cap"> 
    <div class="card-block"> 
        <h4 class="card-title">Chicago Skyline</h4> 
        <p class="card-text">Chicago Skyline At Night from Hotel 71 on Wacker
         Drive.</p> 
        <a href="http://publicdomainarchive.com/free-stock-photos-chicago-
         skyline-night-hotel-71-wacker-drive/" 
           class="btn btn-primary">Visit Source</a> 
    </div> 
</div> 

总结

在本章中，我们探讨了许多不同的 Bootstrap 组件，以及如何在您的 ASP.NET MVC 项目中使用它们。我们还研究了可以帮助创建分页列表的外部库。

在下一章中，我们将通过研究如何使用 Bootstrap JavaScript 插件为您的站点添加更多的交互性来深入研究 Bootstrap 组件。

四、使用 Bootstrap JavaScript 组件

Bootstrap 的 JavaScript 特性都建立在 jQuery 库的基础上，要么提供全新的功能，要么扩展现有 Bootstrap 组件的功能。

插件可以通过简单地向页面元素添加数据属性来使用，但是如果需要，它们也可以提供丰富的编程 API。

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

• 使用下拉菜单并创建级联下拉菜单
• 如何使用模态对话框
• 用选项卡分隔视图中的内容
• 如何实现工具提示和弹出窗口
• 如何使用手风琴组件
• 使用旋转木马创建幻灯片

数据属性与编程应用编程接口

Bootstrap 提供了完全通过 HTML 标记使用插件的能力。这意味着为了使用大多数插件，您不需要编写一行 JavaScript。使用数据属性是推荐的方法，并且应该是使用 Bootstrap 插件时的首选。

例如，要让一个alert元素成为dismissible，您将向一个button或anchor元素添加data-dismiss="alert"属性，如以下代码所示:

<div class="alert alert-danger"> 
    <button data-dismiss="alert" class="close" type="button">×</button> 
    <strong>Warning</strong> Shuttle launch in t-minus 10 seconds. 
</div> 

您还可以选择通过 JavaScript 使用编程 API 执行相同的操作。以下代码使用 jQuery 在用户点击按钮时关闭特定的alert元素:

<button class="close" type="button" onclick="$('#myalert').alert('close')">×</button> 

类型

为了使用 Bootstrap 插件，您需要在项目中包含bootstrap.js或bootstrap.min.js文件。这个文件包含所有的 Bootstrap 插件，但是如果你不打算在你的项目中使用每个插件，你可以选择下载一个定制的版本。在撰写本文时，这些包括重新启动、仅网格和 Flexbox 构建。

级联下拉

您可以使用dropdown插件将drop-down菜单添加到几乎任何 Bootstrap 组件中。级联 drop-down菜单是一个drop-down菜单，根据在另一个drop-down菜单中选择的值更新其数据。要添加级联drop-down菜单，请执行以下步骤:

1. 在 Visual Studio 中，将名为DropdownController.cs的新控制器添加到您的Controllers文件夹中。

2. 在Index操作中，添加以下代码，该代码将创建一个经理列表，并加载所选经理的报告员工列表:

           public IActionResult Index(int id = 2) 
           { 
               var managers = new List<EmployeeModel>(); 
               var vicePresident = new EmployeeModel { Id = 2, Name = "Andrew 
               Fuller", JobTitle = "Vice President, Sales", ReportsTo = null }; 
               var salesManager = new EmployeeModel { Id = 5, Name = 
               "Steven Buchanan", JobTitle = "Sales Manager", ReportsTo = null }; 
               managers.Add(vicePresident); 
               managers.Add(salesManager); 
   
               ViewBag.Managers = managers; 
               var model = GetEmployees(id); 
               return View(model); 
           } 
   
   

3. GetEmployees方法只返回一个EmployeeModel及其下属员工的子集合。方法代码如下:

           private EmployeeModel GetEmployees(int id = 2) 
           { 
               if (id == 2) 
               { 
                   var vicePresident = new EmployeeModel { Id = 2, Name = 
                   "Andrew Fuller", JobTitle = "Vice President, Sales", 
                   ReportsTo = null }; 
                   var vicePresidentEmployees = new List<EmployeeModel> 
                   { 
                       new EmployeeModel { Id = 1, Name = "Nancy Davolio",
                       JobTitle = "Sales Representative", ReportsTo = 2}, 
                       new EmployeeModel { Id = 3, Name = "Janet Leverling",                      JobTitle = "Sales Representative", ReportsTo = 2 }, 
                       new EmployeeModel { Id = 4, Name = "Laura Callahan",                      JobTitle = "Inside Sales Coordinator", ReportsTo = 2 } 
                   }; 
                   vicePresident.ReportingEmployees = vicePresidentEmployees; 
                   return vicePresident; 
               } 
   
               var salesManager = new EmployeeModel { Id = 5, Name =
               "Steven Buchanan", JobTitle = "Sales Manager", ReportsTo = null }; 
               var salesManagerEmployees = new List<EmployeeModel> 
               { 
                   new EmployeeModel { Id = 1, Name = "Michael Suyama",
                   JobTitle = "Sales Representative", ReportsTo = 5 }, 
                   new EmployeeModel { Id = 3, Name = "Robert King", 
                   JobTitle = "Sales Representative", ReportsTo = 5 },
                   new EmployeeModel { Id = 4, Name = "Anne Dodsworth", 
                   JobTitle = "Inside Sales Coordinator", ReportsTo = 5 } 
               }; 
               salesManager.ReportingEmployees = salesManagerEmployees; 
   
               return salesManager; 
           } 
   
   

4. 接下来，在Views\Dropdown文件夹中添加一个名为Index.cshtml的新视图。

5. 视图将只包含两个 Bootstrapdrop-down按钮。一个显示经理列表，另一个显示经理的下属员工列表。经理列表将通过ViewBag对象传递，员工列表将从传递到视图的模型中读取。视图的 HTML 标记如下:

           <div class="container"> 
             <h1 id="heading">Cascading dropdown</h1> 
               <form> 
                <div class="form-group row"> 
                   <label class="col-sm-2 form-control-label">Manager</label> 
                     <div class="col-sm-10"> 
                       <div class="btn-group"> 
                         <button type="button" class="btn btn-danger"         
                          id="selectedManager">@Model.Name</button> 
                         <button type="button" class="btn btn-danger dropdown-                        toggle" data-toggle="dropdown" aria-haspopup="true" 
                          aria-expanded="false"> 
                           <span class="sr-only">Toggle Dropdown</span> 
                         </button> 
                         <div class="dropdown-menu" id="managerlist"> 
                           @foreach (var manager in ViewBag.Managers) 
                           { 
                               <a class="dropdown-item" href="#"         
                               data-id="@manager.Id">@manager.Name</a> 
                           } 
                       </div> 
                   </div> 
               </div> 
           </div> 
           <div class="form-group row"> 
               <label class="col-sm-2 form-control-label">Employee</label> 
               <div class="col-sm-10"> 
                   <div class="btn-group"> 
                       <button type="button" class="btn btn-primary">
                        Select Employee</button> 
                       <button type="button" class="btn btn-primary dropdown-                      toggle" data-toggle="dropdown" aria-haspopup="true"                       aria-expanded="false"> 
                           <span class="sr-only">Toggle Dropdown</span> 
                       </button> 
                       <div class="dropdown-menu" id="employees"> 
                           @foreach (var employee in Model.ReportingEmployees) 
                           { 
                               <a class="dropdown-item" href="#"
                                data-id="@employee.Id">@employee.Name</a> 
                           } 
                       </div> 
                   </div> 
               </div> 
           </div> 
       </form> 
   </div> 
   
   

6. 为了用所选经理的报告员工列表更新员工的dropdown按钮，您需要在页面中添加以下 JavaScript:

           <script type="text/javascript"> 
               $('#managerlist a').on('click', function () { 
                   var $this = $(this); 
                   var managerId = $this.data('id'); 
                   $("#selectedManager").text($this.text()); 
   
                   $.ajax({ 
                       type: 'GET', 
                       dataType: 'html', 
                       url: '@Url.Action("GetReportingEmployees", "Dropdown")', 
                       data: { id: managerId } 
                   }).done(function (data) { 
                       $('#employees').replaceWith(data); 
                   }); 
               }); 
           </script> 
   
   

7. 前面的 JavaScript 将通过其data-id属性获取所选管理器的 ID 值。接下来，它将对Dropdown控制器中的GetReportingEmployees动作进行 AJAX 调用。

8. The GetReportingEmployees method in the Dropdown controller will return a partial view result containing the list of reporting employees. The code for the method is as follows:

           public PartialViewResult GetReportingEmployees(int id) 
           { 
               var model = GetEmployees(id); 
               return PartialView("_employees", model.ReportingEmployees); 
           } 
   
   

   注

   部分视图使您能够在另一个视图或父视图中呈现内容或子视图。

9. 您需要在名为_employees.cshtml的Views\Dropdown文件夹中添加一个新的局部视图，以使前面的代码生效。视图的 HTML 标记如下所示:

           @model IEnumerable<Chapter4.Models.EmployeeModel>
            <div class="dropdown-menu" id="employees">
            @foreach (var employee in Model)
            {
             <a class="dropdown-item" href="#"         
             data-id="@employee.Id">@employee.Name</a>
            }
            </div>
   

10. 前面的 HTML/Razor 标记在员工列表中循环，通过模型传入，并用数据创建一个新的dropdown按钮。

前面步骤的结果应该是类似于下面屏幕截图的视图:

模态对话框

模式用于提供弹出对话框样式元素，该元素可用于向用户提供信息，甚至允许用户在模式内完成表单。Bootstrap 模式本质上由三部分组成:页眉、正文和页脚。您可以将任何标准的 HTML 标记放在模态的body元素中，包括标准文本甚至是嵌入的 YouTube 视频。

一般来说，始终将模态标记放在视图内部的顶层位置，视图的顶部或底部是放置模态标记的最佳位置。

为了在点击按钮时显示模式，您可以设置 Bootstrap 按钮的data-toggle和data-target属性。例如，在下面的 HTML 标记中，按钮的data-toggle属性被设置为模式，其data-target属性被设置为employeeModal:

<div class="row"> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle=
        "modal" data-target="#employeeModal"> 
        Show Employee Modal 
    </button> 
</div> 

data-target属性应该包含模态<div>元素的标识。包含模态的<div>元素应该有一个modal类名:

<div class="modal fade" id="employeeModal" tabindex="-1" role="dialog" aria-labelledby="Employee Information" 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">Andrew Fuller</h4> 
            </div> 
            <div class="modal-body"> 
                <p> 
                    Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981\. 
                    He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales 
                    manager in January 1992 and to vice president of sales in March 1993\. Andrew is a member of the Sales Management Roundtable, 
                    the Seattle Chamber of Commerce, and the Pacific Rim Importers Association. 
                </p> 
            </div> 
            <div class="modal-footer"> 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
                <button type="button" class="btn btn-primary">Send Email</button> 
            </div> 
        </div> 
    </div> 
</div> 

前面的 HTML 标记的结果应该类似于下面的截图:

模态大小和动画

Bootstrap 模式有三种标准大小。如果您想要大模态或小模态，请将.modal-lg或.modal-sm类名添加到带有.modal-dialog类的<div>元素中，如下图所示:

<div class="modal-dialog modal-lg"> 
<div class="modal-dialog modal-sm"> 

默认情况下，模式在页面上显示时具有淡入过渡效果。这是通过将.fade类名添加到带有.modal类名的<div>元素中来实现的。这里有一个例子:

<div class="modal fade" role="dialog" > 

如果你想显示模态而不是淡入页面，只需删除.fade类名。

标签

选项卡提供了一个选项，可以将内容拆分为不同的页面。当您有一个特别大的表单想要拆分成一个逻辑分组时，这是一个理想的组件。例如，当您编辑员工的记录时，您可能希望从他们的背景历史中分离出他们的基本信息，如下图所示:

Bootstrap 标签分为两部分。首先需要指定用户点击标签时要显示的标签名称和对应<div>元素的 ID。这是通过创建一个标准的无序列表<ul>元素来完成的，其中标签名作为子列表项<li>。<ul>元素的类必须设置为nav nav-tabs或nav nav-pills，如以下 HTML 标记所示:

<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
        <a class="nav-link active" data-toggle="tab" href="#info" 
         role="tab">Employee Info</a> 
    </li> 
    <li class="nav-item"> 
        <a class="nav-link" data-toggle="tab" href="#background"
         role="tab">Background</a> 
    </li> 
</ul> 

您可以通过将<li>元素的data-toggle属性设置为tab或pill并将<ul>元素的类别设置为nav-pills来使用选项卡或药丸导航。这里有一个例子:

<ul class="nav nav-pills" role="tablist"> 

在您的浏览器中，结果将如下图所示:

要指定选项卡的内容，创建一个新的<div>元素，并将其类别设置为.tab-content。在父级<div>元素中为每个标签创建一个<div>元素，并将每个标签的<div>元素的类设置为。tab-pane如下:

<div class="tab-content"> 
    <div class="tab-pane active" id="info" role="tabpanel"> 
        <fieldset class="form-group"> 
            <label asp-for="Name" class="col-md-2 control-label"></label> 
            <input asp-for="Name" class="form-control" /> 
        </fieldset> 
        <fieldset class="form-group"> 
            <label asp-for="JobTitle" class="col-md-2 control-label"></label> 
            <input asp-for="JobTitle" class="form-control" /> 
        </fieldset> 
    </div> 
    <div class="tab-pane" id="background" role="tabpanel"> 
        <textarea asp-for="About" rows="3" class="form-control"></textarea> 
    </div> 
</div> 

在前面的标记中，我们创建了两个选项卡，并通过将其类设置为.active将active选项卡设置为info选项卡。

您也可以使用 jQuery 激活特定的页面。要在页面加载后立即激活background选项卡，请使用以下代码:

$(document).ready(function () { 
    $('.nav-tabs a[href="#background"]').tab('show'); 
}); 

工具提示

Bootstrap 的工具提示插件是 Jason Frame 的jQuery.tipsy插件的更新版本。工具提示可用于为用户提供关于页面上特定内容的附加信息标签，或者提供对表单元素中预期输入的洞察。

Bootstrap 4 使用第三方tether库进行定位。您必须包括系绳库，以便在 Bootstrap 程序 4 中使用工具提示。要安装和使用 Tether 库，请完成以下步骤:

1. 打开bower.json文件，该文件位于项目的根文件夹中。如果在 Visual Studio 解决方案资源管理器中没有看到该文件，请单击解决方案资源管理器工具栏上的显示所有文件按钮。

2. 在bower.json文件中，将以下内容添加到依赖项列表中:

           "tether": "1.1.1" 
   
   

3. Visual Studio 应该开始将tether库下载到项目中的wwwroot\lib\tether文件夹。

4. 接下来，要在您的站点页面上包含Tether库，请打开项目的_Layout.cshtml文件，该文件位于Views\Shared文件夹中，并在包含bootstrap.js脚本的行之前添加以下突出显示的行:

           <script src="~/lib/jquery/dist/jquery.js"></script> 
           <script src="~/lib/tether/dist/js/tether.js"></script> 
           <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
   
   

5. 要在任何元素上使用tooltip，向其添加data-toggle="tooltip"属性。您可以通过将data-placement属性设置为以下值之一来指定tooltip的位置:top、bottom、left和right。

6. 最后，设置data-original-title属性的值，以指定应该在tooltip内部显示什么文本。

7. tooltips的一个警告是，由于性能问题，data-应用编程接口是选择加入的，这意味着您必须手动初始化插件。为此，请将以下 JavaScript 添加到您的页面中:

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

8. The preceding code finds all elements whose data-toggle attribute is set to tooltip and initializes the tooltip plugin for these elements. The result will look similar to the following screenshot in your browser:

   

波波弗斯

弹出窗口类似于工具提示，因为它们可以为用户提供关于元素的附加信息，但是它们旨在显示更多的内容，因为弹出窗口还允许您显示标题。

弹出窗口的定义方式类似于弹出窗口，通过向元素添加data-toggle、data-placement、data-content和title属性。当用户点击锚点<a>元素时，以下标记会显示一个弹出窗口:

<a data-content="The protagonist of Franz Kafka's short story The Metamorphosis" data-placement="bottom"  data-toggle="popover" href="#" >Gregor Samsa</a> 

将data-toggle属性设置为popover指定插件需要显示弹出窗口。data-content属性包含将在弹出窗口中显示的内容，data-original-title属性设置弹出窗口的标题。data-placement属性指示弹出窗口的位置，支持四个值，即top、bottom、left和right。

您也可以通过设置data-trigger属性的值来指定显示弹出窗口的触发器。当用户单击或悬停在元素上时，或者当元素有焦点时，可以触发弹出窗口。您还可以指定应该手动激活触发器。data-trigger属性的四个选项是click、hover、focus和manual。

和工具提示一样，data-应用编程接口是一个选择加入，所以你需要手动初始化 popover 插件。在下面的代码中，使用 jQuery，我们将在一个页面上找到所有属性设置为popover的元素，并为每个元素初始化 popover 插件:

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

popover 插件将在您的浏览器中显示类似于以下屏幕截图的内容:

手风琴/折叠组件

手风琴组件最出名的可能是常见问题页面，或者需要将大量内容分解成可管理部分的页面。手风琴由许多面板组组成。每个面板组又有一个标题和正文元素。

折叠效果是通过使用 Bootstrap 折叠插件创建的，该插件允许您使用 JavaScript 切换页面中的内容。

要在我们的项目中使用手风琴组件，请执行以下步骤:

1. 为了允许面板在用户点击标题时折叠，我们需要在面板标题元素内的锚点<a>元素中添加一个data-toggle属性，并将其值设置为折叠。

2. 我们还需要通过将data-parent属性的值设置为父面板组的 ID 来指定面板的父元素。接下来，将anchor元素的href属性设置为包含内容的<div>元素的标识。

3. 最后，我们还需要将面板主体元素的类设置为.panel-collapse collapse。在下面的代码中，我们将创建一个包含两个面板组的折叠组件。第一个面板组将在页面加载时自动可见，因为我们将它的类别设置为.panel-collapse collapse in，如下所示:

           <div class="row">         
            <div id="accordion" role="tablist" aria-multiselectable="true"> 
             <div class="panel panel-default"> 
              <div class="panel-heading" role="tab" id="headingOne"> 
               <h4 class="panel-title"> 
                <a data-toggle="collapse" data-parent= "#accordion" 
                href="#collapseOne" aria-expanded="true" 
                aria-controls="collapseOne"> 
                 How do I order from you? 
                 </a> 
                 </h4> 
                 </div> 
                 <div id="collapseOne" class="panel-collapse collapse in"
                 role="tabpanel" aria-labelledby="headingOne"> 
                 Aliquam erat volutpat. Fusce diam neque, facilisis eu arcu               eu, vestibulum scelerisque ex. Aenean varius ornare libero at               rutrum. Nulla dapibus metus vel velit finibus, in tincidunt eros
                ornare. Sed quis dictum risus. Donec ut orci pulvinar, tincidunt 
                ipsum a, dapibus lectus. Proin dictum feugiat metus nec 
                porttitor. Proin sed diam eget lectus maximus imperdiet ac 
                consequat mauris.  
                 </div> 
               </div> 
               <div class="panel panel-default"> 
                 <div class="panel-heading" role="tab" id="headingTwo"> 
                   <h4 class="panel-title"> 
                     <a class="collapsed" data-toggle="collapse"                 
                      data-parent="#accordion" href="#collapseTwo"         
                      aria-expanded="false" aria-controls="collapseTwo"> 
                       Do you ship internationally? 
                     </a> 
                    </h4> 
                   </div> 
                <div id="collapseTwo" class="panel-collapse collapse"
                 role="tabpanel" aria-labelledby="headingTwo"> 
                 Fusce tortor massa, ullamcorper sit amet ligula non, suscipit
                 eleifend nisi. Aenean dolor purus, rhoncus a ante nec, tempor                dapibus ex. Morbi nec pulvinar urna. Maecenas mollis consectetur 
                 leo, at ullamcorper elit fermentum vel. Donec arcu neque, varius 
                 quis nibh nec, aliquet elementum lacus. Interdum et malesuada 
                 fames ac ante ipsum primis in faucibus. Vestibulum et rhoncus
                 nisl. Mauris egestas posuere elit nec varius.  
                 </div> 
                </div> 
             </div> 
           </div> 
   
   

手风琴看起来应该类似于以下图像，其中显示了折叠的手风琴和展开的手风琴:

转盘组件

转盘组件是一个用户界面元素，您将在许多网站上看到它。它本质上是一个循环播放不同元素的幻灯片，通常是图像。转盘组件应该包含在类名称为carousel的<div>元素和值为carousel的data-ride属性中。要在项目中使用转盘组件，请执行以下步骤:

1. 转盘组件由有序列表元素<ol>组成，该元素在浏览器中呈现为小圆圈，并指示当前活动的幻灯片。该元素的标记如下:

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

2. 接下来，需要创建另一个类名为carousel-inner的<div>元素。该元素将包含实际的幻灯片及其内容。以下标记用一张幻灯片创建了这样一个元素:

           <div class="carousel-inner" role="listbox"> 
               <div class="carousel-item active"> 
                   <img src="~/img/slide1.jpg" alt="Slide no.1"> 
               </div> 
               <div class="carousel-item"> 
                   <img src="~/img/slide2.jpg" alt="Slide no.2"> 
               </div> 
               <div class="carousel-item"> 
                   <img src="~/img/slide3.jpg" alt="Slide no.3"> 
               </div> 
           </div> 
   
   

3. 最后，要在转盘的两侧添加箭头，以向用户指示他们可以导航到下一张幻灯片，请向父<div>元素添加以下标记:

           <a class="left carousel-control" href="#carousel" 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" role="button"           data-slide="next"> 
               <span class="icon-next" aria-hidden="true"></span> 
               <span class="sr-only">Next</span> 
           </a> 
   
   

4. 每张幻灯片应显示的持续时间可通过data-interval属性设置。在下面的标记中，我们将幻灯片之间的间隔设置为10秒:

           <div id="carousel" class="carousel slide" data-ride="carousel" 
           data-interval="10000"> 
   
   

5. 与所有其他插件一样，您也可以选择初始化插件并使用 JavaScript 设置其选项。在下面的代码中，我们将初始化转盘并将幻灯片之间的间隔设置为10秒:

           $(function () { 
               $('#carousel').carousel({ 
                   interval: 10000 
               }); 
           }); 
   
   

6. You also have an option to add a caption to each slide in the carousel by adding a <div> element with a class name of .carousel-caption to the .carousel-item element, as illustrated in the following code:

           <div class="carousel-item"> 
              <img src="~/img/slide3.jpg" alt="Slide no.3"> 
                <div class="carousel-caption"> 
                    <h3>A rainy day</h3> 
                      <p>Rain against a windscreen.</p> 
                 </div> 
            </div>
   

   请看下面的截图:

   

总结

在本章中，我们研究了各种 Bootstrap JavaScript 插件，如何初始化它们，以及如何使用data- API 或编程 JavaScript 方法设置它们的选项。

在下一章中，我们将探讨如何创建自己的 ASP.NET MVC 助手和标签助手，以减少创建大量 Bootstrap 元素和组件时必须编写的 HTML 标记的数量。

五、创建 MVC Bootstrap 助手和标签助手

ASP.NET Core 允许开发人员通过创建静态或扩展方法来创建他们自己的 HTML 助手方法。本质上，HTML 帮助器只是一个返回 HTML 字符串的方法。

HTML 助手使您能够在多个页面上使用相同的公共标记块，并使页面中的代码和标记更容易阅读和维护。这促进了可重用代码的使用，开发人员也可以对他们的助手方法进行单元测试。

ASP.NET Core 还引入了一个新的概念，叫做标签助手，其目的类似于 HTML 助手。标签助手不是传统的 HTML 助手的替代品，而是为开发人员提供了一种生成更清晰的 HTML 标记的替代方法。

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

• 内置的 ASP.NET Core HTML 和标签助手概述
• 使用静态方法创建 HTML 助手
• 使用扩展方法创建 HTML 帮助器
• 创建自关闭助手
• 创建标签助手

内置 HTML 助手

HtmlHelper是一种在视图中呈现 HTML 内容的方法。它旨在允许开发人员跨多个页面重用一个公共的 HTML 标记块。

ASP.NET MVC 提供了一系列标准的、现成的 HTML 助手。例如，要为具有标识和名称属性CustomerName的文本框生成 HTML，请使用以下代码:

<input type="text" name="CustomerName" id="CustomerName"> 

您应该使用TextBox助手，如图所示:

@Html.TextBox("CustomerName") 

大多数内置的 HTML 助手都提供了几个重载版本。例如，要创建一个文本框并显式设置其名称和值属性，您应该使用以下重载的TextBox助手方法:

@Html.TextBox("CustomerName"","Northwind Traders") 

大多数内置助手还提供了为通过传入匿名类型生成的元素指定 HTML 属性的选项。在下面的示例中，我们将创建一个文本框，并使用重载方法之一设置其style属性:

@Html.TextBox("CustomerName","Northwind Traders", new { style="background-color:Blue;" }) 

类型

你可以从http://bit.ly/MVCFormHelpers阅读更多关于 ASP.NET MVC 中可用的标准 HTML 助手。

内置标签助手

标签助手是 ASP.NET MVC 核心引入的一个新特性；它们的目的类似于 HTML 助手，但它们提供了传统 HTML 助手的替代语法。目前，ASP.NET MVC 核心提供了一系列内置的标签助手；例如，对于一个标识为CustomerName且名称属性为CustomerName的文本框，请考虑以下 HTML:

<input type="text" name="CustomerName" id="CustomerName" class="form-control"> 

要使用标记帮助器和通过模型传递给视图的数据生成前面的 HTML 标记，可以使用以下内容:

<input asp-for="CustomerName" class="form-control" /> 

正如您所看到的，标记助手提供了更清晰的语法，也将使设计者更容易理解页面标记，而不必知道任何 Razor 语法。

类型

您可以在http://bit.ly/TagHelpers了解更多关于标签助手的信息。

【HTML 帮助器和标签帮助器的区别

标签助手被附加到您的 Razor 视图中的 HTML 元素上，可以帮助您编写比传统的 HTML 助手更清晰、更容易阅读的标记。另一方面，HTML 助手是作为在 Razor 视图中与 HTML 混合的方法调用的。

Visual Studio 在编写 HTML 助手时还提供了最低限度的智能感知支持，因为 HTML 助手方法的参数都是字符串。例如，在下面的代码中，LabelFor和TextBoxFor HTML Helper 方法用于为模型属性创建标签和文本框:

<div class="form-group"> 
    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) 
    <div class="col-md-10"> 
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) 
    </div> 
</div> 

因为类在 C#中是一个保留字，所以在前面的代码中您会注意到，为了给标签和文本框指定一个 CSS 类名，您必须追加@符号。对于熟悉 HTML、CSS 和 JavaScript，但不熟悉 C#或 Razor 的前端设计人员来说，代码将非常难以阅读和解释。

另一方面，Visual Studio 的智能感知为标记助手编写所有标记。例如，前面显示的相同代码可以使用标记助手以下列方式编写:

<div class="form-group"> 
    <label asp-for="Email" class="col-md-2 control-label"></label> 
    <div class="col-md-10"> 
        <input asp-for="Email" class="form-control" />         
    </div> 
</div> 

前面的标记很容易被前端设计者读取，因为它使用了一个标准的 HTML 元素，但是元素包含asp-属性。尽管asp-属性仍然使用字符串作为它们的值，但是 Visual Studio 使用智能感知来帮助编写标签助手的所有标记。

使用静态方法创建 HTML 助手

在 ASP.NET MVC 中创建一个助手最简单的方法是@helper指令。不幸的是，@helper指令从新的 ASP.NET MVC 核心中删除了，因为它对其他 Razor 特性施加了太多的限制。

幸运的是，通过完成以下步骤，我们仍然能够使用静态方法创建一个 HTML 帮助器:

1. 在项目的根文件夹中创建一个名为Helpers的新文件夹。

2. 在此文件夹中添加一个名为Enums.cs的新类。这个文件将包含我们项目的所有枚举器。

3. 将以下代码添加到Enums.cs文件中:

           public class Enums 
           { 
               public enum ButtonStyle 
               { 
                   Default, 
                   Primary, 
                   Secondary, 
                   Success, 
                   Info, 
                   Warning, 
                   Danger 
               } 
   
               public enum ButtonSize 
               { 
                   Large, 
                   Small, 
                   ExtraSmall, 
                   Normal 
               } 
           } 
   
   

4. 在Helpers文件夹中创建新的静态类ButtonHelper.cs。

5. 向ButtonHelper类添加一个名为Button的方法，并向其中添加以下代码:

           public static HtmlString Button(string caption, Enums.ButtonStyle 
           style, Enums.ButtonSize size) 
           { 
               if (size != Enums.ButtonSize.Normal) 
               { 
                   return new HtmlString( 
                       $"<button type="button" class=
                     "btn btn-{style.ToString().ToLower()} 
                      btn-{ToBootstrapSize(size)}">{caption}</button>"); 
               } 
               return new HtmlString( 
                   $"<button type="button" class="btn 
                   btn-{style.ToString().ToLower()}">{caption}</button>"); 
           }
   

6. 最后，添加另一个名为ToBootstrapSize的方法:

           private static string ToBootstrapSize(Enums.ButtonSize size) 
           { 
               string bootstrapSize = string.Empty; 
               switch (size) 
               { 
                   case Enums.ButtonSize.Large: 
                       bootstrapSize = "lg"; 
                       break; 
   
                   case Enums.ButtonSize.Small: 
                       bootstrapSize = "sm"; 
                       break; 
   
                   case Enums.ButtonSize.ExtraSmall: 
                       bootstrapSize = "xs"; 
                       break; 
               } 
               return bootstrapSize; 
           } 
   
   

我们之前创建的Button方法接受三个参数来设置按钮的标题、大小和样式。我们使用了在Enums.cs文件中声明的枚举值来列出按钮的可用大小和样式，这使得开发人员不必为每个按钮记住精确的 Bootstrap 类名。

Button方法返回一个HtmlString对象，表示一个 HTML 编码的字符串，不需要再次编码。如果我们简单地返回一个普通的字符串对象，实际的 HTML 将在视图中呈现，而不是按钮。

ToBootstrapSize方法基本上将ButtonSize值转换为代表按钮大小的有效 Bootstrap 类名。

在视图中使用静态方法助手

为了使用我们之前创建的静态方法帮助器，请打开您打算在其中使用它的视图，并向其中添加以下 Razor 标记:

<div class="row"> 
    @ButtonHelper.Button("Large Danger Button", Enums.ButtonStyle.Danger, Enums.ButtonSize.Large) 
</div> 
<div class="row"> 
    @ButtonHelper.Button("Normal Info Button", Enums.ButtonStyle.Info, Enums.ButtonSize.Normal) 
</div> 
<div class="row"> 
    @ButtonHelper.Button("Small Secondary Button", Enums.ButtonStyle.Secondary, Enums.ButtonSize.Small) 
</div> 

结果将类似于下面的截图:

使用扩展方法创建助手

如果我们希望我们的助手以类似于内置的 ASP.NET MVC HTML 助手的方式工作，我们需要创建一个扩展方法。扩展方法是一种用于向现有类添加新方法的技术。

注

扩展方法是向现有类添加附加功能的非常强大和直观的方法，可以在许多方面帮助您。您可以在http://bit.ly/ExtMethods上阅读更多关于 MSDN 扩展方法的信息。

我们将通过完成以下步骤来创建HtmlHelper类的扩展方法，该类由视图的 HTML 属性表示:

1. 首先，在项目根目录的Helpers文件夹中添加一个名为ButtonExtensions.cs的新类文件。

2. 将类别类型更改为static。扩展方法需要在静态类中声明。

3. 向类中添加一个名为BootstrapButton的新方法。方法的第一个参数指示扩展扩展了哪个类，并且必须在前面加上this关键字。

4. 其余参数将用于指定按钮的标题、样式和大小。该方法的代码如下:

           public static IHtmlContent BootstrapButton(this IHtmlHelper helper, 
           string caption, Enums.ButtonStyle style, Enums.ButtonSize size) 
           { 
               if (size != Enums.ButtonSize.Normal) 
               { 
                   return new HtmlString(string.Format("<button type="button" 
                   class="btn btn-{0} btn-{1}">{2}</button>",         
                   style.ToString().ToLower(), ToBootstrapSize(size), caption)); 
               } 
               return new HtmlString(string.Format("<button type="button" 
               class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), 
               caption)); 
            } 
   
   

BootstrapButton方法与我们之前创建的ButtonHelper类中的Button方法相同，除了它是IHtmlHelper接口的扩展。

在视图中使用扩展方法助手

由于BootstrapButton方法是一种扩展方法，使用它需要打开视图并向其中添加以下标记:

@using Chapter5.Helpers 
<div class="row"> 
    @Html.BootstrapButton("My Button", Enums.ButtonStyle.Info, Enums.ButtonSize.Normal) 
</div> 

请注意，我们正在使用标准的 HTML Helper 来调用BootstrapButton方法。

创建自关闭助手

自关闭助手是可以包含 HTML 和 Razor 标记的助手。内置的@Html.BeginForm()帮助器就是这种帮助器类型的一个例子。

为了创建这种类型的 HTML Helper，我们需要创建一个实现IDisposable接口的 Helper 类。使用IDisposable接口，我们可以在处置对象时编写元素的结束标记。

Bootstrap Alert组件是这种助手的一个很好的候选。要创建助手，我们必须完成以下步骤:

1. 在项目的Helpers文件夹中创建一个名为Alerts的新子文件夹。

2. 打开Enums.cs文件，添加一个名为AlertStyle的新项目:

           public enum AlertStyle 
           { 
               Default, 
               Primary, 
               Success, 
               Info, 
               Warning, 
               Danger 
           } 
   
   

3. 在Alerts文件夹中添加一个名为Alert.cs的新类文件。

4. 向名为_writer :

           private readonly TextWriter _writer; 
   
   

   的类中添加一个新的私有只读TextWriter对象字段

5. 为Alert类创建一个接受三个参数的构造函数。第一个是对IHtmlHelper界面的引用，第二个指定提醒的标题，第三个表示提醒的样式。

6. 将以下代码添加到Alert类的构造方法中:

           public Alert(IHtmlHelper helper, string title, 
           Enums.AlertStyle style = Enums.AlertStyle.Success) 
           { 
               _writer = helper.ViewContext.Writer; 
               var alertDiv = new TagBuilder("div"); 
               alertDiv.AddCssClass("alert"); 
               alertDiv.AddCssClass("alert-" + style.ToString().ToLower()); 
               alertDiv.Attributes.Add("role", "alert"); 
               alertDiv.TagRenderMode = TagRenderMode.StartTag; 
               var strong = new TagBuilder("strong"); 
               strong.InnerHtml.Append(title); 
               string html = ToString(alertDiv) + ToString(strong); 
               _writer.Write(html); 
           } 
   
   

在这段代码中，我们将_writer字段设置为IHtmlHelper界面的ViewContext属性的Writer属性。通过利用这个属性，我们将能够向当前视图写入 HTML。

然后，我们使用TagBuilder对象构建alert元素的 HTML 标记，最后，将结果发送到_writer对象进行输出。请注意，为了将TagBuilder输出到字符串，我们使用了一个名为ToString的方法。ToString方法的代码如下:

public static string ToString(Microsoft.AspNetCore.Html.IHtmlContent content) 
{ 
    var writer = new System.IO.StringWriter(); 
    content.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default); 
    return writer.ToString(); 
} 

类名为alert的<div>元素将在Alert类的Dispose方法中关闭，该方法通过以下方式实现:

public void Dispose() 
{ 
    _writer.Write("</div>"); 
} 

接下来，在Helpers\Alerts文件夹中添加一个名为AlertHelper.cs的新文件。

Add the following code to the AlertHelper class: 
public static class AlertHelper 
{ 
    public static Alert Alert(this IHtmlHelper html, string title, Enums.AlertStyle style = Enums.AlertStyle.Success) 
    { 
        return new Alert(html, title, style); 
    } 
} 

在视图中使用自动关闭辅助工具

为了使用我们之前在视图中创建的助手，我们将使用 C# using关键字。using关键字限制了对象的范围，并且与IDisposable界面配合良好。本质上，一旦助手完成了它的 HTML 输出渲染，Dispose方法将被自动调用，从而关闭最后一个<div>元素标签。

要在视图中使用帮助器，请使用以下标记:

@using Chapter5.Helpers.Alerts 
<div class="row"> 
    @using (Html.Alert("Title", Enums.AlertStyle.Success)) 
    { 
        <p>Hello World</p> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    } 
</div> 

助手将生成所需的 HTML，以便在浏览器中显示以下面板:

创建 Bootstrap 按钮标签帮助器

标签助手是 ASP.NET MVC 核心的新成员，可以用来生成 HTML 标记。标记助手的语法类似于传统的 HTML 元素，但仍在服务器上处理。

虽然传统的 HTML 帮助器仍然可用，但是标记帮助器是一种替代语法，如果不是替代语法的话。

要创建将生成 Bootstrap 按钮的自定义标记助手，请完成以下步骤:

1. 将名为TagHelpers的新文件夹添加到您的项目中。

2. 在TagHelpers文件夹中创建新类BootstrapButtonTagHelper。

3. 将BootstrapButtonTagHelper改为从TagHelper类继承，该类是Microsoft.AspNetCore.Razor.TagHelpers包的内置类。

4. 为了使用TagHelper类，在BootstrapButtonTagHelper类的顶部添加以下内容:

           using Microsoft.AspNetCore.Razor.TagHelpers; 
   
   

5. 接下来，向类中添加两个名为Color和Style的属性。这两个属性的数据类型将被设置为两个名为BootstrapColor和BootstrapStyle的枚举。

           public string Color { get; set; } 
           public string Size { get; set; } 
   
   

6. 最后，覆盖TagHelper类的Process方法，并将其代码改为如下:

           public override void Process(TagHelperContext context, 
           TagHelperOutput output) 
           { 
               output.TagName = "button"; 
               output.Attributes.Clear(); 
               output.Attributes.Add("class", "btn btn-" + Color + " btn-"
                + Size); 
           }  
   
   

Process方法的代码将把output对象的TagName属性设置为button，并根据在Color和Size属性中设置的值，向生成的<button>元素添加必要的 Bootstrap 按钮类。

您会注意到 Attributes集合中的Add 方法被用来将类名添加到元素中。

类型

自定义 MVC 标签助手的一个非常好的例子，它包含大量的代码示例(如果有点过时的话)，由 Daniel Kuon 创建，可在 GitHub 上的https://github.com/daniel-kuon/TagHelperExtensions获得。

使用 Bootstrap 按钮标签助手

完成创建标记帮助器的步骤后，可以通过以下步骤在视图中使用它:

1. 为了在所有视图中使用标签助手，您需要打开Views文件夹中的_ViewImports.cshtml文件。如果Views文件夹不包含_ViewImports.cshtml文件，则创建一个新文件。

2. 将以下内容添加到_ViewImports.cshtml文件中:

           @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" 
           @addTagHelper "*, Chapter5"  
   
   

@addTagHelper指令允许所有视图使用标签助手。前面代码的第一行将添加所有内置的 ASP.NET MVC 标签助手；第二个将包括所有在Chapter5项目中声明的 Tag Helpers。所有文件默认继承_ViewImports.cshtml，这将默认为所有视图启用文件中声明的标记助手。

要在视图中使用标记助手，请打开一个视图并向其中添加以下内容:

<bootstrap-button color=" danger" size="sm">My Button</bootstrap-button>   

通过指定颜色和大小属性，前面的语句将生成一个红色的 Bootstrap 小按钮。标签助手按照惯例工作，使用 ASP.NET 团队所说的烤肉串案例。例如，我们的助手被称为BootstrapButtonTagHelper，这意味着，要在您的视图中使用它，您只需删除文件的Tag Helper部分，并在每个大写字母之间添加一个减号，例如bootstrap-button。

同样的规则也适用于在标记帮助器中声明的属性，您还会注意到每个属性都是您可以在视图中设置的属性。

创建 Bootstrap 警报标签助手

要创建比前面的示例稍微高级一点的 Bootstrap 警报标签帮助器，请执行以下步骤:

1. 在TagHelpers文件夹中创建新类BootstrapAlertTagHelper。

2. 更改类以从TagHelper继承。

3. 将名为Dismissable的布尔属性和名为Color的string属性添加到类:

            public bool Dismissable { get; set; } 
           public string Color { get; set; } 
   
   

4. 接下来，覆盖ProcessAsync方法，如下图所示:

           public override async Task ProcessAsync(TagHelperContext context, 
          TagHelperOutput output) 
           { 
               output.TagName = "div"; 
               output.Attributes.Add("class","alert alert-" + Color); 
               output.Attributes.Add("role", "attribute"); 
               if (Dismissable) 
                   output.PostContent.SetHtmlContent( 
               $"<button type="button" class="close" data-dismiss="alert">
               <span aria-hidden="true">&times;</span></button>"); 
   
               var content = await output.GetChildContentAsync(true); 
           } 
   
   

根据在Color属性中设置的值，前面的代码将创建一个新的<div>元素，并将其类设置为alert和alert-*。它将检查Dismissable属性是否设置为true，如果是，则使用PostContent.SetHtmlContent方法调用一个<button>元素到内容的末尾。

使用 Bootstrap 报警标签助手

要在视图中使用 Bootstrap 警报标签帮助器，请使用以下命令:

<div class="row"> 
   <bootstrap-alert color=" danger" dismissable="true"> 
       <strong>An error occurred</strong> Dismiss me to continue. 
   </bootstrap-alert> 
</div> 

前面的助手代码将生成一个red/dangerBootstrap 警告，该警告也是不可消除的。帮助器中指定的任何 HTML 内容都将在 Bootstrap 警报中呈现。

总结

在本章中，您探讨了如何使用 HTML 助手和标记助手来减少视图中的标记数量。您还学习了如何编写助手，使不熟悉 Bootstrap 框架的开发人员能够使用助手将样式化组件添加到他们的视图中。

在下一章中，您将深入研究如何使用 Bootstrap 4 样式和布局生成样式正确的脚手架视图。

六、将 Bootstrap HTML 模板转换成可用的 ASP.NET MVC 项目

使用 Bootstrap 的一个主要好处是互联网上有各种各样的资源。网络开发社区已经接受了 Bootstrap，你会发现大量关于使用 Bootstrap 的有价值的模板、片段和建议。

通过结合预先设计的 Bootstrap 模板和 ASP.NET MVC，您可以节省大量时间，而不必担心网站布局或设计。

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

• 我们为什么使用预建的 HTML 模板，以及它们将如何节省时间
• 构建主布局
• 添加特定的页面视图
• 在视图中包含图表

使用预构建的 HTML 模板

众所周知，大多数开发人员不一定是好的设计师。我们更喜欢在后端工作，构建出色的性能和智能软件，有时，我们倾向于将用户界面视为事后的想法。

通过使用预先设计的 HTML Bootstrap 模板，我们可以为用户提供由专业设计师设计的直观且设计良好的用户界面。如果设计是基于 Bootstrap，开发人员已经熟悉了大部分的 CSS 类名、组件和插件，并且不需要重新学习任何东西。

网络提供各种免费和优质的 Bootstrap 模板。主题森林(www.themeforest.net)提供了一系列令人难以置信的不同高级网站风格和设计。

使用 Bootstrap 4，Bootstrap 团队还提供官方主题，您可以购买。每个主题都提供了一整套工具和示例，可以作为项目的良好起点。

注

Bootstrap 主题可用于构建仪表板、营销页面和各种网络应用。它们的价格极具竞争力，可从http://themes.getbootstrap.com购买。

对于本章中的示例，我们将使用 Bootstrap Zero(www . Bootstrap Zero . com/Bootstrap-template/Bootstrap-4-Admin-Dashboard)提供的免费 Bootstrap 4 Admin Dashboard 模板。Bootstrap 4 管理仪表板模板是一个使用 Bootstrap 4 的基本管理主题，非常适合后端管理或更复杂风格的网络应用。主题如下图所示:

在我们使用模板构建 ASP.NET MVC 网站之前，我们需要通过完成以下步骤来下载源文件:

1. 导航到http://www . bootstrapzero . com/bootstrap-template/bootstrap-4-admin-dashboard，点击下载按钮，下载包含所有必需的 HTML、CSS 和 JavaScript 文件的 zip 存档。
2. 将文件解压缩到本地硬盘上的文件夹中；您会注意到归档包含以下文件夹:
   • css
   • js
3. 该档案还包含一个index.html HTML 文件，该文件说明了模板的各种页面和组件布局，您可以将其用作设计项目布局的起点。

创建 ASP.NET MVC 项目

要创建新的 ASP.NET MVC 项目，请执行以下步骤:

1. In Visual Studio, create a new ASP.NET Core Web Application project, as shown in the following screenshot:

   

2. In the New ASP.NET Core Web Application dialog, select the Empty template under the ASP.NET Core Templates and click on the OK button:

   

3. Visual Studio 将创建一个默认的空 MVC 项目。右键单击项目内的wwwroot文件夹，导航至添加|新文件夹。创建以下两个文件夹:

   • css
   • js

4. 将 Bootstrap 4 管理仪表板模板css文件夹中的styles.css文件添加到项目中wwwroot文件夹内的css文件夹中。

5. 将位于 Bootstrap 4 管理仪表板模板的js文件夹中的scripts.js文件复制到项目的wwwroot文件夹中的js文件夹。

6. 接下来，在名为Controllers和Views的项目根目录下添加两个文件夹。

7. 接下来，为了启用 MVC 特性，如工具和标记助手，打开project.json文件，并将以下内容添加到依赖项和工具列表中:

           "dependencies": {
            "Microsoft.NETCore.App": {
            "version": "1.0.0",
            "type": "platform"
            },
            "Microsoft.AspNetCore.Diagnostics": "1.0.0",
            "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
            "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
            "Microsoft.Extensions.Logging.Console": "1.0.0",
            "Microsoft.AspNetCore.Mvc": "1.0.0",
            "Microsoft.AspNetCore.StaticFiles": "1.0.0",
            "Microsoft.AspNetCore.Mvc.TagHelpers": "1.0.0",
            "Microsoft.AspNetCore.Razor.Tools": {
            "version": "1.0.0-preview2-final",
            "type": "build"
            },
            "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
            "version": "1.0.0-preview2-final",
            "type": "build"
            },
            "Microsoft.VisualStudio.Web.CodeGenerators.Mvc": {
            "version": "1.0.0-preview2-final",
            "type": "build"
            }
            },
           "tools": {
            "Microsoft.AspNetCore.Server.IISIntegration.Tools":
            "1.0.0-preview2-final",
            "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
            "version": "1.0.0-preview2-final",
            "imports": [
            "portable-net45+win8"
            ]
            }}
   

8. 保存project.json文件时，Visual Studio 会自动将所有需要的依赖项添加到项目中。

9. 在项目根目录下打开Startup.cs文件，更改ConfigureService方式启用 MVC，如下图:

           public void ConfigureServices(IServiceCollection services) 
           { 
               services.AddMvc(); 
           } 
   
   

10. 启用静态文件，并通过更改Configure方法指定默认路由，如以下代码所示:

```cs
        public void Configure(IApplicationBuilder app) 
        { 
            app.UseIISPlatformHandler(); 
            app.UseStaticFiles(); 
            app.UseMvc(routes => 
            { 
                routes.MapRoute( 
                    name: "default", 
                    template: "{controller=Home}/{action=Index}/{id?}"); 
            }); 
        } 

```

创建主布局

您已经添加了为项目创建主布局文件所需的 CSS 和 JavaScript 文件。接下来，您需要创建一个主控制器和一个主布局文件。为此，请完成以下步骤:

1. 通过右键单击名为HomeController的新空控制器并选择添加|新项目，将其添加到Controllers文件夹中...。

2. 从项目列表中选择 MVC 控制器类，点击添加按钮。

3. 接下来，右键单击项目中的Views文件夹，导航至添加 | 新文件夹。命名文件夹Shared。

4. 右键单击新创建的Shared文件夹，导航至添加 | 新项目...

5. 在项目项列表中选择 MVC 查看布局页面并将文件名保留为_Layout.cshtml，点击添加。

6. 打开 Bootstrap 4 管理仪表板模板源文件中的index.html文件，并将其内容复制到_Layout.cshtml文件中。

7. 更改<head>标签，以引用正确文件夹中的styles.css文件夹，如以下代码所示:

           <head> 
               <meta charset="utf-8"> 
               <title>Bootstrap 4 Dashboard</title> 
               <meta name="description" content="A admin dashboard theme that will 
                   get you started with Bootstrap 4." /> 
               <meta name="viewport" content="width=device-width, 
                   initial-scale=1.0"> 
   
               <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap
                   /4.0.0-alpha/css/bootstrap.min.css" /> 
               <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/
                   font-awesome.min.css" rel="stylesheet" /> 
               <link rel="stylesheet" href="~/css/styles.css" /> 
           </head> 
   
   

8. 更新结束

9. 接下来，您会注意到页面被划分为不同的元素:

   • 包含站点导航菜单的<nav>类
   • 一个 ID 为main的<div>
   • * 一个名为.col-md-9 col-lg-10 main的<div>

10. 保持<nav>和<div>标签的标识为main不变，用@RenderBody()方法替换<div class="col-md-9 col-lg-10 main">元素中的所有标记。

11. 接下来，在Views文件夹的根目录下添加一个名为_ViewStart.cshtml的新文件。为了使所有视图都能使用新的布局文件，将其内容更改为:

```cs
        @{
         Layout = "_Layout";
         }
```

12. 主布局现已完成；接下来，您需要在主控制器中为Index动作添加一个视图。

为家庭控制器添加视图

您需要为家庭控制器的Index动作创建一个视图，以便测试模板。完成以下步骤来完成此操作:

1. 打开HomeController.cs文件，如果HomeController类还没有包含索引操作方法，则添加它，如下所示:

           public IActionResult Index() 
           { 
               return View(); 
           } 
   
   

2. 接下来，右键单击Views \ Home文件夹并添加 | 新项目...从上下文菜单中选择。

3. Select MVC View Page from the list of project items, make sure the name is Index.cshtml, and click on Add:

   

4. 打开新创建的Index.cshtml文件，将其标记改为如下:

           <p class="hidden-md-up"> 
               <button type="button" class="btn btn-primary-outline btn-sm" 
                data-toggle="offcanvas"><i class="fa fa-chevron-left"></i>         
           Menu</button> 
           </p> 
           <h1 class="display-1 hidden-xs-down"> 
               Bootstrap 4 Dashboard 
           </h1> 
           <p class="lead">(with off-canvas sidebar, based on BS v4 alpha)</p> 
           <div class="row"> 
               <div class="col-md-3 col-sm-6"> 
                   <div class="card card-inverse card-success"> 
                       <div class="card-block bg-success"> 
                           <div class="rotate"> 
                               <i class="fa fa-user fa-5x"></i> 
                           </div> 
                           <h6 class="text-uppercase">Users</h6> 
                           <h1 class="display-1">134</h1> 
                       </div> 
                   </div> 
               </div> 
               <div class="col-md-3 col-sm-6"> 
                   <div class="card card-inverse card-danger"> 
                       <div class="card-block bg-danger"> 
                           <div class="rotate"> 
                               <i class="fa fa-list fa-4x"></i> 
                           </div> 
                           <h6 class="text-uppercase">Posts</h6> 
                           <h1 class="display-1">87</h1> 
                       </div> 
                   </div> 
               </div> 
               <div class="col-md-3 col-sm-6"> 
                   <div class="card card-inverse card-info"> 
                       <div class="card-block bg-info"> 
                           <div class="rotate"> 
                               <i class="fa fa-twitter fa-5x"></i> 
                           </div> 
                           <h6 class="text-uppercase">Tweets</h6> 
                           <h1 class="display-1">125</h1> 
                       </div> 
                   </div> 
               </div> 
               <div class="col-md-3 col-sm-6"> 
                   <div class="card card-inverse card-warning"> 
                       <div class="card-block bg-warning"> 
                           <div class="rotate"> 
                               <i class="fa fa-share fa-5x"></i> 
                           </div> 
                           <h6 class="text-uppercase">Shares</h6> 
                           <h1 class="display-1">36</h1> 
                       </div> 
                   </div> 
               </div> 
           </div>  
   
   

5. Run the project, and you should see the home view and layout in your browser:

   

添加不同的页面视图

接下来，通过完成以下步骤，您将创建一个显示两张卡的自定义视图，一张显示简单的 Bootstrap 表单，另一张显示图像:

1. 向项目的Controllers文件夹中添加一个名为FormsController.cs的新的空 MVC 控制器类。

2. 新的控制器类应该已经包含了一个Index动作方法。

3. 接下来，在Views文件夹中添加一个名为Forms的新文件夹。

4. 在新创建的Forms文件夹中添加一个新的 MVC 查看页面，称为Index.cshtml。

5. 将以下标记添加到视图中:

           <div class="row"> 
               <h1>Forms</h1> 
               <div class="col-md-3"> 
                   <form> 
                       <div class="card card-success" style="max-width: 20rem;"> 
                           <div class="card-header"> 
                               First Panel with simple form 
                           </div> 
                           <div class="card-block"> 
                               <fieldset class="form-group"> 
                                   <label for="fullName">Full name</label> 
                                   <input type="text" class="form-control" 
                                   id="fullName" placeholder="Your full name"> 
                               </fieldset> 
                               <fieldset class="form-group"> 
                                   <label for="bio">Full name</label> 
                                   <textarea class="form-control" id="bio" 
                                    rows="3"></textarea> 
                               </fieldset> 
                           </div> 
                           <div class="card-footer"> 
                               <button type="submit" class="btn btn-danger">
                           Save</button> 
                           </div> 
                       </div> 
                   </form> 
               </div>  
               <div class="col-md-3"> 
                   <div class="card card-primary" style="max-width: 20rem;"> 
                       <div class="card-header"> 
                           Second card 
                       </div> 
                       <div class="card-block"> 
                           <img src="http://placehold.it/265x150"/> 
                       </div>              
                   </div> 
               </div> 
           </div> 
   
   

6. 最后，您需要更改左侧导航菜单，以包含指向您刚刚添加的视图的链接。为此，请完成以下步骤:

7. 打开Views\Shared文件夹内的_Layout.cshtml文件。

8. 在文件里面找到下面一行代码:

           <li class="nav-item"><a class="nav-link" href="#">Reports</a></li> 
   
   

9. 将前一行改为:

           <li class="nav-item"><a class="nav-link" asp-controller="Forms"         
           asp-action="Index">Forms</a></li> 
   
   

10. In the preceding code, the asp-* Tag Helpers were used to specify the controller and action for the <a> element. When the user clicks on the Forms menu item, they will be shown the form view you created earlier.

![Adding different page views](https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/boots-aspdn-mvc-2e/img/image_06_006.jpg)

向视图添加图表

通过在视图中添加图表，您可以为用户提供丰富的体验，并让他们能够全面了解系统的重要信息。

向项目中添加图表和图形时，有许多选项；一些最流行的图表组件如下:

• 谷歌图表:https://developers.google.com/chart/
• 图表. js:http://www.chartjs.org/
• moris . js:http://morrissjs . github . io/Morris . js/
• flot:http://www.flotcharts.org/

将谷歌图表添加到视图

谷歌提供了丰富的图表应用编程接口，功能强大，易于使用，而且免费。他们还提供了一个互动的图库，展示了他们的各种图表。

要将谷歌图表添加到主控制器的索引视图，请完成以下步骤:

1. 在 Visual Studio 解决方案资源管理器中，双击Views\Home文件夹中的Index.cshtml文件。

2. 向视图中添加一个新的 Bootstrap 行，它将作为 Google 图表的容器:

           <div class="row"> 
               <div class="col-md-6 col-sm-6" id="piechart">         
               </div> 
           </div> 
   
   

3. 在页面底部添加对谷歌图表库以及本地 JavaScript 文件的引用:

           @section scripts{ 
               <script type="text/javascript" src="https://www.gstatic.com/charts        /loader.js"></script> 
               <script src="~/js/home.index.js"></script> 
           } 
   
   

4. 接下来，在wwwroot\js文件夹中添加一个名为home.index.js的新 JavaScript 文件。

5. 将以下代码添加到home.index.js文件中，该文件将加载谷歌图表应用编程接口，并指定一旦加载该应用编程接口就运行的回调函数的名称:

           google.charts.load('current', { 'packages': ['corechart'] }); 
           google.charts.setOnLoadCallback(generateChart); 
   
   

6. 接下来，在文件中创建名为generateChart的函数:

           function generateChart() { 
               var data = new google.visualization.DataTable(); 
               data.addColumn('string', 'Products'); 
               data.addColumn('number', 'Sales'); 
               data.addRows([ 
                 ['Tofu', 30], 
                 ['Chai', 10], 
                 ['Chocolade', 20], 
                 ['Ipoh Coffee', 40] 
               ]); 
   
               var options = { 
                   'title': 'Quarterly Sales', 
                   'width': 600, 
                   'height': 300, 
                   is3D: true, 
                   colors: ['#d9534f', '#f0ad4e', '#5bc0de', '#5cb85c'] 
               }; 
   
               var chart = new google.visualization.PieChart($('#piechart')[0]); 
               chart.draw(data, options); 
           } 
   
   

generateChart函数中的代码创建了一个新的DataTable类，该类表示一个二维值表，并通过调用addColumn方法向其中添加了两个名为Products和Sales的列。使用addRows方法，将包含产品名称和售出产品总数的四行数据添加到DataTable类中。

接下来，声明一个名为 options 的新对象，其中包含 Google 图表的选项。在这些选项中，指定了图表的标题颜色、尺寸和颜色。将is3D选项设置为真将生成具有 3D 效果的图表。

声明了一个新的饼图，并设置了它的容器元素，在本例中是一个带有piechart的id元素。最后调用draw方法绘制图表。

运行项目时，视图应类似于下图:

使用谷歌图表进行服务器端数据处理

在前面的例子中，用于饼图的数据是在 JavaScript 文件中声明的。这种方法适用于静态数据，但在大多数情况下，您可能希望从数据源(如数据库)读取用于生成图表的数据。

为此，请完成以下步骤:

1. 打开位于Controllers文件夹中的HomeController.cs文件。

2. 添加一个名为SalesPerSalesPerson的新方法，它将返回一个 JsonResult，如下所示:

           [HttpPost] 
           public JsonResult SalesPerSalesPerson() 
           { 
               List<object> data = new List<object>(); 
               data.Add(new string[] { "Product", "Sales" }); 
               data.Add(new object[] { "Robert King",530}); 
               data.Add(new object[] { "Nancy Davolio", 1012 }); 
               data.Add(new object[] { "Laura Callahan", 810 }); 
               data.Add(new object[] { "Janet Leverling", 738 }); 
               return Json(data); 
           } 
   
   

3. 在SalesPerSalesPerson方法中，声明了一个新的List对象。安讯士名称以及每个销售人员的数据作为string数组添加。这些信息也可能是从数据库中读取的。

4. 接下来，打开Views\Home文件夹中的Index.cshtml文件，并在文件中添加以下 HTML/Razor 标记:

           <div class="col-md-6 col-sm-6" id="barchart"                         
           data-dataurl="@Url.Action("SalesPerSalesPerson","Home")" 
           </div> 
   
   

5. 请注意，将使用<div>元素的data-dataurl属性来将返回图表数据的动作的网址传递给 JavaScript 函数。

6. 打开home.index.js文件，添加barChart JavaScript 函数:

           function barChart() { 
               var barChart = $('#barchart'); 
               var dataUrl = barChart.data('dataurl'); 
               $.post(dataUrl, function (d) { 
                   var data = google.visualization.arrayToDataTable(d); 
                   var chart = new google.visualization.BarChart(barChart[0]); 
   
                   var options = { 
                       'title': 'Sales per Representative', 
                       'width': 600, 
                       'height': 300 
                   }; 
                   chart.draw(data,options); 
               }); 
           } 
   
   

7. 接下来，创建一个新的generateChart函数，作为谷歌图表应用编程接口的回调函数:

           function generateChart() { 
               pieChart(); 
               barChart(); 
           } 
   
   

8. pieChart 方法与上一个示例中使用的代码相同。

准备好所需的代码后，您就可以运行项目了，生成的视图应该包含一个饼图和一个条形图，如下图所示:

总结

在本章中，您已经学习了如何将预先设计好的 HTML 模板转换成可用的 ASP.NET MVC 项目。本章中展示的技术实际上可以应用于任何 HTML 模板，允许您构建专业设计的 web 应用，而不必自己设计布局。

在下一章中，我们将探索如何在您自己的 ASP.NET MVC 项目中包含和使用 jQuery DataTables 插件。

七、在 Bootstrap 4 中使用 jQuery 数据表插件

jQuery DataTables插件允许开发人员向任何 HTML 表格添加创新的交互控件。

它支持多种选项和广泛的扩展。ASP.NET MVC 开发人员也能够在他们自己的项目中包含这个插件。这一章的目的不仅仅是向你展示如何使用DataTables插件，也是为了说明你如何使用几乎任何带有 ASP.NET MVC 的开源 JavaScript 和 CSS 插件或框架。

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

• jQuery 概述DataTables
• 如何在你的 ASP.NET MVC 项目中包含 jQuery DataTables
• 更改 jQuery DataTables以支持 Bootstrap 4
• 用 jQuery DataTables和 ASP.NET 加载和显示数据
• 使用DataTables插件和扩展

jQuery 约会对象

DataTables 是 jQuery JavaScript 库的一个免费开源插件，由一家名为 SpryMedia Ltd .的公司设计和创建。这个插件使得向任何标准 HTML 表添加排序、过滤、分页和搜索等功能变得非常容易实现。

它还提供了各种扩展，支持类似 Excel 的功能、内联编辑和固定列等。数据表网站提供了大量的例子、博客和论坛，你可以在www.datatables.net上找到。

jQuery DataTables 插件可以通过多种方式添加到您的 ASP.NET MVC 项目中，包括 NPM、鲍尔或 DataTables 内容交付网络 ( CDN )。

向您的 ASP.NET MVC 项目添加数据表

要添加数据表插件的基本功能，需要以下两个文件:

• 第一个是jquery.dataTables.css，它包含了表格的默认 CSS 样式
• 第二个是jquery.dataTables.js，它包含用于渲染DataTables插件和添加必要功能的 JavaScript 逻辑

这两个文件都可以通过以下链接在数据表 CDN 中找到:

• https://cdn . datatable . net/1 . 10 . 11/CSS/jquery . datatable . min . CSS
• https://cdn . datatable . net/1 . 10 . 11/js/jquery . datatable . min . js

使用数据表鲍尔包

您还可以使用 Bower 添加 jQuery DataTables所需的所有 CSS 和 JavaScript 文件，以及扩展所需的所有 CSS 和 JavaScript 文件。使用 Bower 时，完成以下步骤添加 jQuery DataTables:

1. 在 Visual Studio 中，打开bower.json文件。如果在 Visual Studio 解决方案资源管理器中没有看到bower.json文件，请单击显示所有文件按钮。

2. 将以下两个包添加到文件内部的依赖列表中:

           "datatables.net": "1.10.12", 
           "datatables.net-dt": "1.10.12" 
   
   

3. datatables.net包会将 jQuery DataTables 包添加到项目的wwwroot\lib文件夹中，datatables.net-dt包会为 jQuery DataTables添加基础样式。

4. datatables.net包包含 JavaScript 文件，datatables.net-dt包将包含jQuery DataTables的 CSS/样式表。

使用 CDN

您可以从上述位置保存文件，将它们添加到项目中，或者添加对 CDN 上托管的文件的引用。后一种选择是首选方法，将有助于提高您的网站的性能。

要从 CDN 引用它，请完成以下步骤:

1. 在 Visual Studio 中，打开本书附带的示例项目，打开位于Views\Shared文件夹内的_Layout.cshtml文件。

2. 在_Layout.cshtml文件的<head>元素中，通过插入以下标记行来添加对 jQuery DataTables 样式表的引用:

           <link rel="stylesheet" type="text/css" href="//cdn.datatables.net 
           /1.10.12/css/jquery.dataTables.css"> 
   
   

3. 打开需要DataTables功能的视图，通过在视图底部添加以下代码来添加对 JavaScript 库的引用:

           @section scripts{ 
               <script type="text/javascript" language="javascript"         
               src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
               </script> 
           }  
   
   

向数据表添加 Bootstrap 数据库样式

前面提到的步骤将向视图和布局文件中添加最少的必需文件，以便为 jQuery DataTables生成基本的样式和功能。然而，默认的DataTables CSS 样式在 Bootstrap 网站中看起来有些不合适。

幸运的是，数据表项目背后的团队创建了一个特定于 Bootstrap 的 CSS 样式和 JavaScript 库，以匹配您的站点的外观。这两个文件也可以在数据表 CDN 上获得:

• https://cdn . datatable . net/1 . 10 . 12/CSS/datatable。bootstrap 4 . min . CSS
• https://cdn . datatables . net/1 . 10 . 12/js/datatables . bootstrap 4 . min . js

这两个文件的添加方式与普通DataTables CSS 和 JavaScript 文件相同。请记住，当在视图中包含特定于 Bootstrap 的DataTables JavaScript 文件时，您需要同时包含对默认DataTables JavaScript 文件和特定于 Bootstrap 的文件的引用，如以下标记所示:

@section scripts{ 
    <script type="text/javascript" language="javascript" 
      src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
     </script> 
    <script type="text/javascript" language="javascript" 
     src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap4.min.js">
    </script> 
   } 

在 jQuery 数据表中加载和显示数据

为了实现 jQuery DataTables插件，您首先需要创建一个新的视图，在一个 HTML 表中列出数据。在本例中，您将创建一个显示客户列表的视图。该列表可以从任何数据源读取，例如 SQL Server 数据库。在本例中，将使用一个简单的列表对象。

为此，请完成以下步骤:

1. 在 Visual Studio 中，将名为CustomerController.cs的新控制器类添加到Controllers文件夹中。

2. 将名为Models的新文件夹添加到项目的根目录，并向其中添加名为Customer.cs的新类。

3. Customer类将用于检索样本客户记录列表。该类的代码如下:

           public class Customer 
           { 
               public string CustomerCode { get; set; } 
               public string CompanyName { get; set; } 
               public string ContactName { get; set; } 
               public string ContactTitle { get; set; } 
               public string Address { get; set; } 
               public string City { get; set; } 
               public DateTime CreatedDate { get; set; } 
           } 
   
   

4. 接下来，打开CustomerController类，添加一个名为GetCustomers的新方法。有关GetCustomers方法的完整列表，请参考本章随附的示例项目。这个方法将简单地返回一个样本客户数据列表，如下面的代码所示:

           public List<Customer> GetCustomers() 
           { 
               var customers = new List<Models.Customer> 
               { 
                   new Models.Customer() {
                     CustomerCode = "ALFKI", 
                     CompanyName = "Alfreds Futterkiste", 
                     ContactName = "Maria Anderson", 
                     ContactTitle = "Sales Representative", 
                     Address = "Obere Str. 57", 
                     City = "Berlin", 
                     CreatedDate = new DateTime(2016,01,12) }, 
                   new Models.Customer() {
                     CustomerCode = "AROUT", 
                     CompanyName = "Around the Horn", 
                     ContactName = "Thomas Hardy", 
                     ContactTitle = "Sales Representative", 
                     Address = "120 Hanover Sq.", 
                     City = "London", 
                     CreatedDate = new DateTime(2015,10,14)}, 
                   new Models.Customer() { 
                      CustomerCode = "CHOPS", 
                      CompanyName = "Chop-suey Chinese", 
                      ContactName = "Yang Wang", 
                      ContactTitle = "Owner", 
                      Address = "Hauptstr. 29", 
                      City = "Bern", 
                      CreatedDate = new DateTime(2010,7,14)}, 
                   new Models.Customer() { 
                      CustomerCode = "EASTC", 
                      CompanyName = "Eastern Connection", 
                      ContactName = "Ann Devon", 
                      ContactTitle = "Sales Agent", 
                      Address = "35 King George", 
                      City = "London", 
                      CreatedDate = new DateTime(2015,10,15)}, 
                   ... 
               }; 
               return customers; 
           } 
   
   

5. 为了检索客户列表并将数据传递给视图，将CustomerController上的Index方法改为如下:

   public IActionResult Index() 
   { 
       var model = GetCustomers(); 
       return View(model); 
   } 
   
   

6. 接下来，在Views文件夹内创建一个名为Customer的新子文件夹。

7. 右键单击新创建的Customer文件夹，选择添加 | 新项目...从上下文菜单中选择。

8. Select MVC View Page from the list of items, name the file Index.cshtml, and click on Add, as shown in the following screenshot:

   

9. 将新添加视图的标记更改为以下内容:

           @model IEnumerable<Chapter8.Models.Customer> 
           @{ 
               Layout = "_Layout"; 
           } 
           <div class="container"> 
               <h1>Customer List</h1> 
               <div class="row"> 
                   <table id="customer-table" 
                    class="table table-striped table-bordered"> 
                       <thead> 
                       <tr> 
                           <th>Code</th> 
                           <th>Company Name</th> 
                           <th>Contact Name</th> 
                           <th>Address</th> 
                           <th>City</th> 
                           <th>Created</th> 
                       </tr> 
                       </thead> 
                       <tbody> 
                       @foreach (var customer in Model) 
                       { 
                           <tr> 
                               <td>@customer.CustomerCode</td> 
                               <td>@customer.CompanyName</td> 
                               <td>@customer.ContactName</td> 
                               <td>@customer.Address</td> 
                               <td>@customer.City</td> 
                               <td>@customer.CreatedDate.ToString("d")</td> 
                           </tr> 
                       } 
                       </tbody> 
                   </table> 
               </div> 
           </div> 
   
   

在此标记中，table-striped、table-hover和table-bordered样式已添加到其id属性已设置为customer-table的表格中。您还会注意到，列标题名称被包装在<thead>元素中，表格行被包装在<tbody>元素中。

视图的 HTML 标记现在已经准备好了。完成以下步骤，为表启用 jQuery 数据表功能:

1. 打开Views\Shared文件夹中的_Layout.cshtml文件。

2. 通过在<head>元素中添加以下标记，添加对 jQuery DataTables基础和 Bootstrap 样式表的引用:

         <link rel="stylesheet" type="text/css" href="~/css/bootstrap.css" /> 
         <link rel="stylesheet" type="text/css" href="//cdn.datatables.net    
          /1.10.11/css/dataTables.bootstrap4.min.css"> 
   
   

3. 滚动到_Layout.cshtml文件的底部，添加对 jQuery 以及 Bootstrap JavaScript 文件的引用:

           <script src="~/lib/jquery/dist/jquery.js"></script> 
           <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
   
   

4. 另外，确保在_Layout.cshtml文件的底部有一个名为脚本的部分声明:

           @RenderSection("scripts", required: false) 
   
   

5. 打开Views\Customer文件夹中的Index.cshtml文件。在文件底部添加以下代码:

           @section scripts{ 
               <script type="text/javascript" 
                 src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js">
                </script> 
               <script type="text/javascript" 
                 src="//cdn.datatables.net/1.10.11
                   /js/dataTables.bootstrap4.min.js">
               </script> 
               <script type="text/javascript"> 
                   $(document).ready(function () { 
                       $('#customer-table').DataTable(); 
                   }); 
               </script> 
           } 
   
   

在前面的步骤中，您已经添加了对DataTables样式表以及 JavaScript 文件的必要引用。您还创建了一个 jQuery 事件处理程序，一旦页面加载，它将在类名为table的所有 HTML 元素上启用 DataTable 功能。

当您运行项目并导航到客户视图时，您将看到客户列表自动分页为十个一组，并且您能够在表中搜索和排序数据，如下图所示。表的默认 Bootstrap 4 样式也得到正确应用:

数据表插件

jQuery DataTables 提供了很多内置特性和灵活性，但是如果您希望添加自己的特性或者需要额外的灵活性，它确实提供了插件架构。

注

这些只是数据表库可用的一些插件。要查看可用插件的完整列表，请访问https://datatables.net/plug-ins/index

日期排序

由于各种不同的日期格式，日期排序有时会非常具有挑战性。幸运的是，jQuery DataTables提供了一个使用Moment.js JavaScript 库对日期字段进行排序的灵活解决方案。

注

Moment.js 是一个免费的开源库，可以很容易地在 JavaScript 中显示、解析、操作和验证日期。你可以在http://momentjs.com/阅读更多关于 Moment.js 图书馆的信息。

要在上一示例中使用的Created Date列上启用日期排序，请完成以下步骤:

1. 打开Views\Customer文件夹内的Index.cshtml文件。

2. 通过在Index.cshtml文件的末尾添加以下代码，将moment.js库包含在您的视图中。请务必将其添加到dataTables.bootstrap.min.js文件之后:

           <script type="text/javascript" 
             src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js">        </script> 
   
   

3. 接下来，通过在moment.js文件后添加以下行，将DataTables排序插件添加到视图中:

           <script type="text/javascript" src="//cdn.datatables.net/plug-
           ins/1.10.11/sorting/datetime-moment.js"></script> 
   
   

4. 最后，更改视图中的 JavaScript 代码，初始化时刻排序库。您可以通过将其作为参数传递来指定应该排序的日期格式:

           <script type="text/javascript"> 
               $(document).ready(function () { 
                   $(document).ready(function () { 
                       $.fn.dataTable.moment('DD/MM/YYYY'); 
                       $('#customer-table').DataTable(); 
                   }); 
               }); 
           </script> 
   
   

渲染

jQuery DataTables 呈现插件可以用来改变数据在表中的显示方式。为了将数据(在本例中是公司名称)限制在特定的长度，并以省略号(...)，例如，北风...，完成以下操作:

1. 打开Views\Customer文件夹内的Index.cshtml文件。

2. 通过在视图底部和 jQuery DataTables库之后添加以下内容来添加DataTables省略号数据呈现插件:

           <script type="text/javascript" src="//cdn.datatables.net/plug-
           ins/1.10.11/dataRender/ellipsis.js"></script> 
   
   

3. 更改DataTables初始化代码以使用省略号插件。targets 参数用于指定在哪个列上使用插件:

           $('#customer-table').DataTable({ 
               columnDefs: [{ 
                   targets: 1, 
                   render: $.fn.dataTable.render.ellipsis(15, true) 
               }] 
           }); 
   
   

省略号插件接受三个参数；第一个是限制显示的字符数，第二个是布尔值，指示截断是否不应出现在单词中间。最后一个布尔参数用于转义 HTML 实体。

数据表扩展

jQuery DataTables 插件提供了各种各样的扩展，可以极大地增强插件的功能。

注

要查看数据列表库所有可用扩展的列表，请参见https://datatables.net/extensions/index

ColReorder 扩展

ColReorder 扩展允许用户通过单击列标题并将其拖动到他们喜欢的位置来对表列重新排序。要为数据表启用列重新排序，请完成以下步骤:

1. 打开_Layout.cshtml文件，添加对dataTables.colReorder.css文件的引用:

           <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net        /colreorder/1.3.1/css/colReorder.bootstrap.min.css" /> 
   
   

2. 打开视图.cshtml文件，添加对DataTables colReorder扩展名 JavaScript 文件的引用:

           <script type="text/javascript" charset="utf8" src="//cdn.datatables.net
           /colreorder/1.3.1/js/dataTables.colReorder.min.js"></script> 
   
   

3. 最后，使用 jQuery，在页面加载后添加一个事件处理程序来初始化DataTables插件和 colReorder 扩展:

           $('#customer-table').DataTable({ 
               colReorder: true 
           }); 
   
   

4. When navigating to the page, you should now be able to drag and reorder the columns in the table. A blue line will be displayed when dragging a column, as illustrated in the following screenshot:

   

   类型

   请注意，扩展的所有样式表和 JavaScript 文件都是从DataTables CDN 中引用的。CDN 可在cdn.datatables.net获得

颜色按钮扩展

ColVis 扩展将一个按钮添加到数据表的顶部，单击该按钮时，会显示表中的列名列表，旁边有一个复选框。然后，用户可以取消选择他们不希望在网格中看到的列名。

要启用列可见性扩展，请执行以下步骤:

1. 打开_Layout.cshtml文件，并添加对DataTables按钮扩展:

           <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net
           /buttons/1.1.2/css/buttons.bootstrap4.min.css" /> 
   
   

   的 Bootstrap 4 特定样式表的引用

2. 打开view.cshtml文件，添加对DataTables按钮扩展名、Bootstrap 4 特定按钮扩展名以及按钮 ColVis 扩展名:

           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js">
           </script> 
           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/buttons.bootstrap4.min.js">
           </script> 
           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/buttons.colVis.min.js">
           </script> 
   
   

   的引用

3. 最后，使用 jQuery，在页面加载后添加一个事件处理程序来初始化DataTables插件和 ColVis 扩展:

           $('#customer-table').DataTable({ 
               dom: 'Bfrtip', 
               buttons: [ 
                   'colvis' 
               ] 
           }); 
   
   

最后一步中的代码使用dom参数来指定控件元素在 DOM 中的位置。对于按钮，使用字母B。当导航到视图时，您应该会看到搜索框旁边的按钮，您可以使用该按钮显示或隐藏表中的列，如下图所示:

复印和打印按钮扩展

使用相同的DataTables扩展，可以给表格添加一个工具栏，用户可以用它将表格内的数据复制到剪贴板，或者显示表格内数据的打印视图。这是一种非常简单的方法，让您的用户能够导出或打印他们的数据。

要启用表格的复制和打印功能，请执行以下步骤:

1. 打开_Layout.cshtml文件，并添加对DataTables按钮扩展:

           <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net
           /buttons/1.1.2/css/buttons.bootstrap4.min.css" /> 
   
   

   的 Bootstrap 4 特定样式表的引用

2. 接下来，打开视图并添加对DataTables按钮扩展、Bootstrap 4 特定按钮扩展、HTML 5 按钮扩展以及打印按钮扩展:

           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js">
           </script> 
           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/buttons.bootstrap4.min.js">
           </script> 
           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js">
           </script> 
           <script type="text/javascript" 
             src="//cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js">
           </script> 
   
   

   的引用

3. 最后，使用 jQuery，添加一个事件处理程序来初始化 DataTable 插件，并在页面加载后添加打印和复制按钮:

           $(document).ready(function () { 
               $('#customer-table').DataTable({ 
                   dom: 'Bfrtip', 
                   buttons: [ 
                      'copy', 'print' 
                   ] 
               }); 
           }); 
   
   

打开带有数据表的视图时，您应该会看到数据表上方有两个按钮，如下图所示:

当用户点击复制按钮时，他们会看到一条消息，通知他们表格中的行数已经被复制到他们的剪贴板:

如果用户点击打印按钮，将打开一个新的浏览器窗口，其中包含数据表中数据的打印机友好版本，并显示打印对话框:

总结

在本章中，您已经使用 jQuery DataTables插件实现了一个可排序、可搜索和可扩展的 HTML 表。您还探索了如何指定插件应该使用 Bootstrap 4 风格。这一章也应该给你信心去探索其他开源插件，并把它们整合到你自己的 ASP.NET MVC 项目中。

在下一章也是最后一章，您将了解更多关于使用免费的 Visual Studio 代码编辑器创建使用 Bootstrap 4 进行样式设计的 ASP.NET MVC 站点的信息。

八、使用 Visual Studio 代码创建 Bootstrap 4 ASP.NET MVC 站点

在他们的 Build 2015 会议期间，微软发布了一个新的轻量级代码编辑器，用于编写名为 Visual Studio Code 的网络和移动应用。这是微软迈出的重要一步，因为这标志着他们第一次向开发人员提供跨平台代码编辑器，可在 Windows、OS X 和 Linux 上运行。

随着 ASP.NET 的重大重新设计，使其成为一个开源和跨平台的框架，开发人员现在能够在 Windows、Linux 和 OS X 上创建 ASP.NET 网站。Visual Studio Code 使这变得稍微容易一点。

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

• 什么是 Visual Studio 代码？
• 安装 Visual Studio 代码
• 使用约曼搭建一个空的 ASP.NET 项目
• 使用 Bower 添加 Bootstrap 4 文件
• 使用大口编译 Bootstrap 文件
• 创建引用 Bootstrap 文件的布局文件

什么是 Visual Studio 代码？

Visual Studio Code 本质上是一个开源的、跨平台的文本编辑器。它基于电子框架，原名 Atom Shell ，这是一个让你可以使用 HTML、CSS 和 JavaScript 编写跨平台桌面应用的框架。如果你曾经使用过 GitHub 的 Atom 文本编辑器，你会发现它和 Visual Studio 代码非常相似。

注

Atom 是一个来自 GitHub 的可黑客攻击/可定制的文本编辑器。也是开源的，可以从https://atom.io/下载。

开发人员可以使用 Visual Studio 代码以 HTML、CSS 和 JavaScript 构建 web 应用，并且还支持 TypeScript 和 ASP.NET Core。它是基于文件夹而不是基于项目的，这意味着您只需要打开一个包含您的项目文件的文件夹，而不是打开一个项目文件，如.csproj。

它具有智能感知(这对于任何过去使用过 Visual Studio 的人来说都是熟悉的)，并且还支持调试和 Git 源代码控制功能。它还包括一些 Visual Studio 开发人员已经开始欣赏的功能，例如语法突出显示、自动缩进和括号匹配。Visual Studio 代码是可自定义的，因为用户可以更改主题、首选项和键盘快捷键。随着最新版本的发布，它也支持扩展，并且在https://marketplace.visualstudio.com/VSCode上已经有了广泛的扩展和主题。

安装 Visual Studio 代码

安装 Visual Studio 代码就像下载特定于您的操作系统的平台安装程序一样简单。你可以访问https://code.visualstudio.com/，网站应该会显示你使用的操作系统和下载按钮。

例如，由于我是从一台 Windows 电脑访问该网站，它会自动显示一个Windows 下载按钮:

如果您需要为 Linux 或 OS X 下载，请滚动到页面底部，然后单击相应的下载按钮:

类型

有关在 Mac OS X、Linux 或 Windows 上启动和运行 Visual Studio Code 的完整说明，请访问http://code.visualstudio.com/Docs/editor/setup。

创建一个空的 ASP.NET 项目

因为 Visual Studio Code 是基于文件夹的，而不是像 Visual Studio 那样基于项目的，所以它的菜单列表中没有文件 | 新项目选项。

使用约曼搭建项目

相反，你将使用约曼脚手架一个基本的空 ASP.NET 项目。如果尚未安装 npm，请完成以下步骤:

1. 打开一个新的命令提示符，导航到您想要创建项目的文件夹，例如C:\MyBootstrap4Site。

2. Enter the following command in the command prompt in order to install Yeoman and supporting tools:

    npm install -g yo grunt-cli generator-aspnet bower 
   
   

   安装 Yeoman 和支持工具后，请遵循以下步骤:

3. 输入以下命令，按进入启动约曼 ASP.NET 发电机:

           yo aspnet
   
   

4. Select Empty Application from the list of applications and press Enter:

   

5. 当系统提示您输入 ASP.NET 应用的名称时，键入Bootstrap4Site并按进入。

6. 约曼将为你的项目搭建脚手架，完成后会显示一条消息。接下来，通过在命令提示符下输入以下命令并按下回车键来恢复项目的任何包:

   dnu restore 
   
   

7. 保持当前命令提示符打开并启动 Visual Studio 代码。

8. 选择打开文件夹...从 Visual Studio Code 内的文件菜单中选择并选择C:\MyBootstrap4Site文件夹。

9. The project folder and files will be displayed inside the Visual Studio Code explorer.

   类型

   如果您收到错误消息dnu is not recognized，运行以下命令:dnvm upgrade。

启用 ASP.NET MVC 和静态文件

目前，该项目只是一个空的 ASP.NET 项目，运行时只会显示一条 Hello World 消息。您需要通过完成以下任务来使您的项目和 MVC 能够服务于静态文件:

1. 打开project.json文件，将dependencies和刀具阵列更改为如下:

           "dependencies": { 
               "Microsoft.NETCore.App": { 
                 "version": "1.0.0", 
                 "type": "platform" 
               }, 
               "Microsoft.AspNetCore.Diagnostics": "1.0.0", 
               "Microsoft.AspNetCore.Mvc": "1.0.0", 
               "Microsoft.AspNetCore.Razor.Tools": { 
                 "version": "1.0.0-preview2-final", 
                 "type": "build" 
               }, 
               "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", 
               "Microsoft.AspNetCore.Server.Kestrel": "1.0.0", 
               "Microsoft.AspNetCore.StaticFiles": "1.0.0", 
               "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0", 
               "Microsoft.Extensions.Configuration.Json": "1.0.0", 
               "Microsoft.Extensions.Configuration.CommandLine": "1.0.0", 
               "Microsoft.Extensions.Logging": "1.0.0", 
               "Microsoft.Extensions.Logging.Console": "1.0.0", 
               "Microsoft.Extensions.Logging.Debug": "1.0.0", 
               "Microsoft.Extensions.Options.ConfigurationExtensions": "1.0.0", 
               "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0"     
             }, 
   
             "tools": { 
               "BundlerMinifier.Core": "2.0.238", 
               "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final", 
               "Microsoft.AspNetCore.Server.IISIntegration.Tools": 
                "1.0.0-preview2-final" 
             } 
   
   

2. 接下来，为了恢复依赖关系，切换回命令提示符，输入以下命令，然后按输入键:

    dotnet restore 
   
   

3. 依赖项恢复后，切换回 Visual Studio Code，将Startup.cs类文件中的ConfigureServices方法更改为以下内容，以便启用 MVC:

           public void ConfigureServices(IServiceCollection services) 
           { 
               services.AddMvc(); 
           } 
   
   

4. 启用静态文件的服务，如图像、样式表和 JavaScript 文件。此外，通过将Startup.cs类文件中的Configure方法更改为以下内容来设置默认路线:

           public void Configure(IApplicationBuilder app) 
           { 
               app.UseStaticFiles(); 
   
               app.UseMvc(routes => 
               { 
                    routes.MapRoute( 
                          name: "default", 
                          template: "{controller=Home}/{action=Index}/{id?}"); 
               }); 
           }  
   
   

添加默认路由控制器和视图

由于创建了一个空项目，默认情况下不会创建默认控制器或视图。您已经在前面的步骤中配置了一个默认路由，为了让它工作，您需要添加一个主控制器和一个索引视图:

1. 将鼠标悬停在 Visual Studio 代码资源管理器中的文件夹名称上，然后单击新文件夹图标。

2. 命名新文件夹Controllers并添加另一个名为Views的文件夹。

3. 在新创建的Views文件夹中再创建两个名为Home和Shared的文件夹。

4. 接下来，右键单击Controllers文件夹，从上下文菜单中选择新文件。命名文件HomeController.cs.

5. 将以下代码添加到HomeController.cs文件中，该代码将为控制器创建默认的索引方法:

           using Microsoft.AspNetCore.Mvc; 
           namespace BS4App.Controllers 
           { 
               public class HomeController : Controller 
               { 
                   public IActionResult Index() 
                   { 
                       return View(); 
                   } 
               } 
           } 
   
   

6. 将名为Index.cshtml的新文件添加到Views\Home文件夹，并将其内容设置为如下:

           <h1>This is my Bootstrap 4 site. </h1> 
   
   

7. Your project layout should look similar to the following inside the Visual Studio Code Explorer:

   

使用 Bower 添加 Bootstrap 4 文件

为了在项目中使用 Bootstrap 4，首先需要添加 Bootstrap 样式表和 JavaScript 文件。在本例中，您将使用 Bower 将 Bootstrap 4 文件下载到您的本地项目中:

1. 将名为bower.json的新文件添加到项目文件夹的根目录，并将其内容设置为以下内容，以便将 Bootstrap 4 作为依赖项添加:

           { 
             "name": "ASP.NET", 
             "private": true, 
             "dependencies": { 
               "bootstrap": "4.0" 
             } 
           } 
   
   

2. 为了下载任何 Bower 依赖项，您需要在您的项目文件夹中打开一个新的命令提示符—这可以使用快捷键 Shift + Ctrl + C. 从 Visual Studio Code 中完成

3. 在命令提示符下输入以下命令，按进入 :

   bower update 
   
   

4. 前面的命令将下载bower.json文件中指定的任何 Bower 依赖项，并将其保存到项目中的bower_components文件夹中。

5. After the Bower dependencies has been downloaded, your project layout should resemble the following inside the Visual Studio Code explorer:

   

   类型

   如果您收到以下错误，ENOGIT git is not installed or not in the PATH，这意味着您没有在环境变量中指定的 Git 安装文件夹路径。通过向您的 Windows 环境变量添加以下值来解决此问题:;%PROGRAMFILES(x86)%\Git\bin;%PROGRAMFILES(x86)%\Git\cmd 另一种解决方法是从 Git Shell 运行命令，而不是正常的命令提示符。

使用 grave 编译 Bootstrap Sass 文件

如果您想选择自定义 Bootstrap Sass 文件以便在项目中使用它们，可以通过为其创建一个大口任务来自动执行 Sass 编译过程。

Visual Studio 代码支持从内部运行任务和分析任务结果的能力。任务可以包括许多事情，如编译 Sass，缩小 CSS，或将文件复制到不同的文件夹。

要在 Visual Studio 代码中配置任务，请执行以下步骤:

1. 在 Visual Studio 代码中，按下 F1 键打开命令面板。

2. 在命令面板中输入以下内容，然后按进入 :

   Configure Task Runner 
   
   

3. 从列表中选择咕噜声，按下回车键。

4. 该命令将自动创建一个名为.vscode的新文件夹，其中包含一个新的tasks.json文件。

5. 你将需要大口和大口-萨斯插件，以便将 Bootstrap 4 SCSS 文件编译成 CSS。要安装该插件，请打开命令提示符并输入以下命令，然后按进入键:

           npm install gulp gulp-sass
   
   

6. 安装好必要的插件后，切换回 Visual Studio Code，将tasks.json文件的内容改为如下:

           { 
               "version": "0.1.0", 
               "command": "gulp", 
               "isShellCommand": true, 
               "tasks": [ 
                   { 
                       "taskName": "compile-sass", 
                       "isBuildCommand": true, 
                       "showOutput": "always", 
                       "isWatching": true 
                   } 
               ] 
           } 
   
   

7. 保存tasks.json文件，并在项目的根目录下添加一个名为gulpfile.js的新文件。

8. 将gulpfile.js文件的内容改为如下:

           var gulp = require('gulp'); 
           var gulpSass = require('gulp-sass'); 
   
           gulp.task('compile-sass', function () { 
               gulp.src('./bower_components/bootstrap/scss/bootstrap.scss') 
                   .pipe(gulpSass()) 
                   .pipe(gulp.dest('./wwwroot/css')); 
           }); 
   
   

9. 先前的更改将编译位于./bower_components/bootstrap/scss/文件夹中的bootstrap.scss SASS 文件，并将该 CSS 文件复制到wwroot/css文件夹中作为bootstrap.css。

10. 要运行编译-sass 任务，按下 F1 键，调出命令面板并键入以下内容，或从项目列表中选择:

```cs
Tasks: Run Task 

```

11. 这将返回项目中配置的可用任务列表。从列表中选择compile-sass。
12. Visual Studio Code will show an output window with the result of the task:

![Using Gulp to compile the Bootstrap Sass files](https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/boots-aspdn-mvc-2e/img/image_08_006.jpg)

在compile-sass任务完成后，您应该会在wwwroot\css文件夹中看到一个bootstrap.css文件。您的项目布局应该类似于 Visual Studio 代码资源管理器中的以下内容:

创建 MVC 布局页面

创建一个支持 Bootstrap 4 的 ASP.NET MVC 项目的最后一步是创建一个主布局页面，该页面将引用 Bootstrap CSS 和 JavaScript 文件。要创建布局页面，请完成以下步骤:

1. 向Views\Shared文件夹添加一个名为_Layout.cshtml的新文件。

2. 将以下 HTML 添加到文件中:

           <!DOCTYPE html> 
           <html> 
           <head> 
               <meta charset="utf-8" /> 
               <meta name="viewport" content="width=device-width,
                initial-scale=1.0" /> 
               <title>My Bootstrap Site</title> 
               <link rel="stylesheet" href="~/css/bootstrap.css" />     
           </head> 
           <body> 
   
               <div class="container body-content"> 
                   @RenderBody() 
                   <hr /> 
                   <footer> 
                       <p>&copy; @DateTime.Now.Year - Your Bootstrap 4 site</p> 
                   </footer> 
               </div> 
   
           </body> 
           </html> 
   
   

3. 保存文件。

4. 为了使用布局文件，在Views/Home文件夹中添加一个名为Index.cshtml的新文件，并将其内容设置如下:

           @{ 
               Layout="~/Views/Shared/_Layout.cshtml"; 
           } 
           <h1>This is my Bootstrap 4 site. </h1> 
   
   

测试场地

为了测试站点，您需要切换回命令提示符并输入以下命令，以便启动红隼网络服务器并运行您的站点:

dotnet run 

将显示一条消息，说明网络服务器正在监听http://localhost:5000。打开浏览器，导航到该网址。您应该会看到您的网站在浏览器中以默认的 Bootstrap 4 样式运行。

总结

在这一章中，你被介绍给了新的编辑；微软的 Visual Studio 代码，并看到如何使用它来创建一个在 Windows、Linux 和 OS X 上使用 Bootstrap 4 的 ASP.NET MVC 站点

这也是这本书的最后一章，到目前为止，您应该已经对在自己的 ASP.NET MVC 项目中使用 Bootstrap 相当满意了。您还应该更熟悉新的 ASP.NET Core 和它使用的新的包管理器和任务管理器。

确保您从 Packt 网站或位于https://github.com/Pietervdw/bootstrap-for-aspnetmvc的 Github 存储库中下载了本书附带的示例项目，以便查看实际操作中提到的示例。

感谢阅读。直到下次，继续编码！

九、附录 a：Bootstrap 资源

Bootstrap 社区是一个充满活力和广阔的社区。以下是互联网上可用的 Bootstrap 资源列表，没有特别的顺序。

主题

以下是基于 Bootstrap 的免费和高级 HTML 主题:

| **URL** | **描述** | | [http://start bootstrap . com/](http://startbootstrap.com/) | 免费的 HTML 入门模板和自举主题。 | | [https://wrapboot strap . com/](https://wrapbootstrap.com/) | 自举的高级主题和模板市场。 | | [http://bit.ly/ThemeForestHtml](http://bit.ly/ThemeForestHtml) | 主题森林有超过 5000 个高级的 HTML 模板，许多是基于 Bootstrap 的，有些不是。 | | [http://www.prepbootstrap.com/](http://www.prepbootstrap.com/) | 免费的 Bootstrap 主题、模板和其他带有完整代码示例的小部件。 | | [http://boottrapzero . com/](http://bootstrapzero.com/) | 开源 Bootstrap 主题和模板。 | | [http://boot watch . com/](http://bootswatch.com/) | 自举的免费主题 | | [http://setbootstrap.com/](http://setbootstrap.com/) | 免费 Bootstrap 主题和模板 |

附加组件

Bootstrap 的附加组件、插件和组件如下:

| **URL** | **描述** | | [http://getfulux . com/](http://getfuelux.com/) | FuelUX 为类似 Bootstrap 的日期选择器、微调器、树和表单向导提供了额外的控制和增强。 | | [http://bit.ly/JasnyBootstrap](http://bit.ly/JasnyBootstrap) | Jasny Bootstrap 为令人兴奋的组件提供了一些增强，如标签按钮和锚定警报。 | | [http://bit.ly/BootstrapNotify](http://bit.ly/BootstrapNotify) | Bootstrap 通知使向用户显示警报样式的通知变得更加容易。 | | [http://boottrapformhelpers . com/](http://bootstrapformhelpers.com/) | Bootstrap 表单助手是一个插件，可以帮助增强您的表单。包括颜色选择器、滑块等。 | | [http://www.bootstrap-switch.org/](http://www.bootstrap-switch.org/) | 将复选框变成 iOS 风格的开关控制。 | | [http://bit.ly/BSAppWiz](http://bit.ly/BSAppWiz) | 使用 Bootstrap 应用向导向表单中添加多步向导式界面 | | [http://bit.ly/TypeAhead](http://bit.ly/TypeAhead) | 推特的一个插件。向表单添加自动完成功能。 | | [http://bit.ly/1NjDwpD](http://bit.ly/1NjDwpD) | x-可编辑-在页面上创建可编辑元素。 | | [http://bootboxjs.com/](http://bootboxjs.com/) | 灵活的对话 | | [http://bit.ly/1QRU2Yy](http://bit.ly/1QRU2Yy) | Bootstrap 文件上传 | | [http://bit.ly/1NUFehr](http://bit.ly/1NUFehr) | Bootstrap 密码强度指示器 | | [http://bit.ly/1T0HpCf](http://bit.ly/1T0HpCf) | Bootstrap 菜单 | | [http://bit.ly/1SLum5v](http://bit.ly/1SLum5v) | 用于 Bootstrap 的图像库 | | [http://bit.ly/1Y7h7MK](http://bit.ly/1Y7h7MK) | Ladda 按钮—内置装载指示器的按钮。 | | [http://www.plupload.com](http://www.plupload.com) | 多运行时文件上传器 | | [http://ckeeditor . com](http://ckeditor.com) | 所见即所得文本编辑器 | | [http://bit.ly/1OdE4rW](http://bit.ly/1OdE4rW) | 离子。范围滑块—响应范围滑块 | | [http://bit.ly/1WHvuIZ](http://bit.ly/1WHvuIZ) | 上下文菜单 |

编辑器和生成器

帮助您设计和构建 Bootstrap 网站的工具如下:

| **URL** | **描述** | | [http://www.bootstrapbundle.com/](http://www.bootstrapbundle.com/) | Visual Studio 2015 的 ASP.Net MVC Bootstrap 项目和项目模板 | | [http://www.layoutit.com/](http://www.layoutit.com/) | Bootstrap 数据库的拖放式界面构建器 | | https://jet trap . com/ | 用于 Bootstrap 的可视化界面构建工具 | | [http://www.bootply.com/](http://www.bootply.com/) | 用于快速构建 Bootstrap 程序界面的可视化编辑器。 | | [http://bit.ly/BSMagic](http://bit.ly/BSMagic) | 自举魔术。轻松为 Bootstrap 创建自己的主题。 | | [http://paintstra . com/](http://paintstrap.com/) | 使用色彩爱好者配色方案生成 Bootstrap 主题。 | | [http://www.bootstrapdesigner.com/](http://www.bootstrapdesigner.com/) | 为 Bootstrap 数据库生成网站或模板。 | | [http://bit.ly/1X7NGf6](http://bit.ly/1X7NGf6) | 块 v.3 用于 Bootstrap 的拖放构建器 | | [http://shoelace.io/](http://shoelace.io/) | 可视化 Bootstrap 网格生成器 |