如何在 ASP.NET Core 中使用 Bootstrap 4

发布于01月28日

我想在ASP中更新 bootstrap .NET内核与NuGet.我用了这个:

Install-Package bootstrap -Version 4.0.0

它确实添加了依赖项，但我现在如何将其添加到我的项目中？本地NuGet依赖项的路径是什么？

Installed NuGet dependencies

一次性安装

这就是ASP.NET核心模板不是单页应用程序，目前正在进行.当您使用这些来创建新的应用程序时，wwwroot文件夹只包含一个包含依赖项的文件夹lib:

wwwroot folder包含具有静态依赖项的lib文件夹

如果仔细查看当前的文件，可以看到它们最初是与Bower一起放置在那里创建模板的，但这很可能很快就会改变.其基本思想是将文件once复制到wwwroot文件夹中，以便您可以依赖它们.

要做到这一点，我们可以简单地遵循Bootstrap的介绍，直接使用download the compiled files.正如下载网站上提到的，这不包括jQuery，所以我们也需要单独下载；不过，如果我们 Select 稍后使用bootstrap.bundle文件，我们会这样做.对于jQuery，我们只需从the download site中获取一个"压缩的生产"文件(右键单击链接并 Select "将链接另存为…"从菜单中).

这就给我们留下了一些文件，这些文件只需提取并复制到wwwroot文件夹中即可.我们还可以创建一个lib文件夹，以更清楚地表明这些是外部依赖:

wwwroot folder包含带有已安装依赖项的lib文件夹

这就是我们所需要的，所以现在我们只需要调整我们的_Layout.cshtml文件以包含这些依赖项.为此，我们在<head>中添加以下块:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

在<body>的最后一个街区:

<environment include="Development">
    <script src="~/lib/js/jquery-3.3.1.js"></script>
    <script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/js/jquery-3.3.1.min.js"></script>
    <script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

您也可以只包含缩小版，跳过此处的<environment>个标记帮助器，使其更简单.但这就是你需要做的一切，让你开始.

来自NPM的依赖关系

如果您想要保持依赖关系的更新，那么更现代的方法是从NPM包存储库中获取依赖关系.为此，您可以使用npm或yarn；在我的示例中，我将使用npm.

首先，我们需要为我们的项目创建一个package.json文件，这样我们就可以指定我们的依赖项.为此，我们只需从"Add New Item"对话框执行此操作:

添加新项目:npm配置文件

一旦我们有了它，我们需要编辑它以包含我们的依赖项.应该是这样的:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

通过保存，VisualStudio将已经运行NPM来为我们安装依赖项.它们将被安装到node_modules文件夹中.所以剩下要做的就是把这些文件放到wwwroot文件夹中.有几个选项可以做到这一点:

`bundleconfig.json` for bundling and minification

我们可以使用多种方式之一来使用bundleconfig.json进行Bundle 和缩小，如the documentation中所述.一个非常简单的方法是简单地使用BuildBundlerMinifier NuGet package，它会自动为此设置一个构建任务.

安装该软件包后，我们需要在项目根目录下创建一个bundleconfig.json，包含以下内容:

[
  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "minify": { "enabled": false }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
    "minify": { "enabled": false }
  }
]

这基本上配置了将哪些文件合并为哪些文件.当我们构建时，我们可以看到vendor.min.css和vendor.js.css是正确创建的.所以我们需要做的就是再次调整我们的_Layouts.html，以包含这些文件:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

使用像Gulp这样的任务管理器

如果我们想更多地进入客户端开发，我们也可以开始使用我们在那里使用的工具.例如，Webpack，这是一个非常常用的构建工具，适用于所有方面.但我们也可以从一个简单的任务管理器(如Gulp)开始，自己完成一些必要的步骤.

为此，我们在项目根目录中添加了一个gulpfile.js，包含以下内容:

const gulp = require('gulp');
const concat = require('gulp-concat');

const vendorStyles = [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
];

gulp.task('build-vendor-css', () => {
    return gulp.src(vendorStyles)
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));

gulp.task('default', gulp.series('build-vendor'));

现在，我们还需要调整package.json，使其依赖于gulp和gulp-concat:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

最后，我们编辑.csproj以添加以下任务，以确保在构建项目时运行Gulp任务:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

现在，当我们构建时，会运行default个gulp 任务，这会运行build-vendor个任务，然后像之前一样构建vendor.min.css和vendor.min.js.因此，在像上面那样调整我们的_Layout.cshtml之后，我们可以使用jQuery和Bootstrap.

虽然Gulp的初始设置比上面的bundleconfig.json个要复杂一些，但我们现在已经进入了 node 世界，可以开始使用其他所有很酷的工具.所以从这个开始可能是值得的.

结论

虽然这突然变得比仅仅使用Bower复杂得多，但我们也确实通过这些新选项获得了很多控制权.例如，我们现在可以决定wwwroot文件夹中实际包含哪些文件，以及这些文件的外观.我们也可以利用它，通过Node，率先进入客户端开发领域，这至少有助于a bit的学习曲线.

如何在 ASP.NET Core 中使用 Bootstrap 4

推荐答案

一次性安装

来自NPM的依赖关系

`bundleconfig.json` for bundling and minification

使用像Gulp这样的任务管理器

结论

.net相关问答推荐

"；Make Async ValueTask/ValueTask方法分期分配发生了什么？

.NET 7.0中的UseHttpsRedirection和IIS生产部署

.NET 中两个子字符串之间的非贪婪正则表达式匹配

为什么具有可为空值的 struct 的 HashSet 非常慢？

在 C# 中获取 log4net 日志(log)文件

在 .NET 中获取执行 exe 路径的最佳方法是什么？

.Include() 与 .Load() 在 EntityFramework 中的性能

我可以从我的应用程序中抛出哪些内置 .NET 异常？

使用 EPPlus 时如何设置列类型

RNGCryptoServiceProvider 的优缺点

如何明智地使用 StringBuilder？

什么是编组？当某些东西被编组时会发生什么？

新的 netstandardapp 和 netcoreapp TFM 有什么区别？

在 C# 中将匿名类型转换为键/值数组？

如何异步 Files.ReadAllLines 并等待结果？

Double.TryParse 或 Convert.ToDouble - 哪个更快更安全？

一个接口是否应该继承另一个接口

C# 中的 override 和 new 关键字有什么区别？

如何使用 NPOI 读取文件

浮动与双重性能

推荐答案

一次性安装

来自NPM的依赖关系

bundleconfig.json for bundling and minification

使用像Gulp这样的任务管理器

结论

.net相关问答推荐

`bundleconfig.json` for bundling and minification