ASPDotNet 一、ASP.NET Core 和 Bootstrap 4 入门

一、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 的项目，请完成以下过程:

在 Visual Studio 2015 中，从文件菜单中选择新建 | 项目或使用快捷键 Ctrl + Shift + N 。
From the New Project dialog window, select ASP.NET Core Web Application (.NET Core), which you'll find under Templates | Visual C# | Web.
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，我们需要完成以下步骤:

在 Visual Studio 的解决方案资源管理器中双击project.json文件。
将以下两行添加到依赖项部分，并保存project.json文件:

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

```
您应该会在 Visual Studio 解决方案资源管理器中看到一个黄色通知，其中包含一条消息，说明它正忙于恢复包。
打开Startup.cs文件。要为项目启用 MVC，请将ConfigureServices方法更改为以下内容:

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

```

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

```cs 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?}"); 
          }); 
       }

```

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

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

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

在 Visual Studio 解决方案资源管理器中，右键单击项目名称，并从上下文菜单中选择添加 | 新文件夹。
命名新文件夹Controllers。
添加另一个名为Views的文件夹。
右键单击Controllers文件夹，选择添加 | 新项目...从上下文菜单中选择。
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:
接下来，我们需要在Views文件夹中为HomeController添加一个子文件夹。右键单击Views文件夹，从上下文菜单中选择添加 | 新文件夹。
命名新文件夹Home。
右键单击新创建的Home文件夹，选择添加 | 新项目...从上下文菜单中选择。
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:
Your project layout should resemble the following in the Visual Studio Solution Explorer:

使用 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 源文件添加到项目中，您需要执行以下步骤:

右键单击 Visual Studio 解决方案资源管理器中的项目名称，然后选择添加 | 新项目...。
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:
如果尚未打开，双击bower.json文件将其打开，并将 Bootstrap 4 添加到依赖项数组中。该文件的代码应该如下所示:

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

```
保存bower.json文件。
保存bower.json文件后，Visual Studio 会自动将依赖项下载到项目的wwwroot/lib文件夹中。在 Bootstrap 4 的情况下，它也依赖于 jQuery 和 Tether 。您会注意到 jQuery 和 Tether 也作为 Bootstrap 依赖项的一部分被下载。
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项目中，请完成以下步骤:

在 Visual Studio 解决方案资源管理器中右键单击您的项目名称，然后选择添加 | 新项目...从项目上下文菜单中选择。
Find the npm Configuration File item, located under .NET Core | Client-side. Keep its name as package.json and click on Add.
如果尚未打开，双击新添加的package.json文件，并将以下两个依赖项添加到文件内的devDependencies数组:

```cs "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 之前，您需要完成以下任务:

通过在解决方案资源管理器中右键单击项目名称并选择添加 | 新项目，向您的项目添加新的吞咽配置文件...从上下文菜单中选择。项目位置为.NET Core | 客户端。
Keep the filename as gulpfile.js and click on the Add button.
将gulpfile.js文件内的代码改为如下:

cs 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中声明的所有任务。如果没有看到列出的任务，点击位于任务运行器浏览器窗口左侧的刷新按钮。

Running Gulp tasks

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

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

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

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

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

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

Binding Gulp tasks to Visual Studio events

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 样式表中。为此，请遵循以下步骤:

打开bower.json文件，该文件位于您的项目路线中。如果您在 Visual Studio 解决方案资源管理器中没有看到该文件，请单击解决方案资源管理器工具栏上的显示所有文件按钮。
将font-awesome作为依赖项添加到文件中。bower.json文件的完整列表如下:

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

```
Visual Studio 将下载 Font Awesome 源文件，并在项目内部的wwwroot/lib/文件夹中添加一个font-awesome子文件夹。
将位于wwwroot/font-awesome下的fonts文件夹复制到wwwroot文件夹。
接下来，打开位于wwwroot/lib/bootstrap/scss文件夹中的bootstrap.scss文件，并在文件末尾添加以下一行:

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

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

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

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

创建 MVC 布局页面

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

在Views文件夹中添加一个名为Shared的新子文件夹。
在Shared文件夹中添加一个新的 MVC 视图布局页面。该项目可在中找到.NET Core |服务器端类别的添加新项目对话框。
Name the file _Layout.cshtml and click on the Add button:

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

```cs <!DOCTYPE html>

@ViewBag.Title @RenderBody()

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

```

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

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

```
在前面的标记中，使用萨斯源文件和大口生成的 Bootstrap CSS 文件的引用被添加到文件的<head>元素中。在<body>标签中，@RenderBody方法使用 Razor 语法调用。
最后，在文件的底部，就在关闭</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 元素，并学习如何在网站的设计和布局中使用它们。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/32283.html

ASPDotNet 查看更多书籍

《ASP.NET MVC 和 Bootstrap》

分类

最近更新

ASPDotNet 一、ASP.NET Core 和 Bootstrap 4 入门

一、ASP.NET Core 和 Bootstrap 4 入门

Bootstrap 分发中包含的文件

Bootstrap 样式表

Bootstrap JavaScript 文件

Bootstrap 字体/图标

Bootstrap 源文件

注

CSS 预处理器

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

启用 MVC 和静态文件

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

使用 Bower 添加 Bootstrap 4 文件

注

注

使用大口编译 Bootstrap 文件

注

添加吞咽 npm 包

注

启用大口-萨斯编译

注

运行吞咽任务

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

安装字体牛逼

注

创建 MVC 布局页面

内容交付网络

注

总结

留言

联系客服

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET MVC 和 Bootstrap》

ASPDotNet 一、ASP.NET Core 和 Bootstrap 4 入门

一、ASP.NET Core 和 Bootstrap 4 入门

Bootstrap 分发中包含的文件

Bootstrap 样式表

Bootstrap JavaScript 文件

Bootstrap 字体/图标

Bootstrap 源文件

注

CSS 预处理器

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

启用 MVC 和静态文件

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

使用 Bower 添加 Bootstrap 4 文件

注

注

使用大口编译 Bootstrap 文件

注

添加吞咽 npm 包

注

启用大口-萨斯编译

注

运行吞咽任务

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

安装字体牛逼

注

创建 MVC 布局页面

内容交付网络

注

总结

留言

联系客服

ASPDotNet 查看更多书籍