如何在 ASP.NET Core 中使用 Bootstrap 4
我想用 NuGet 更新 ASP.NET Core 中的 Bootstrap。我用这个：
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项，但我现在如何将它添加到我的项目中？本地 NuGet 依赖项的路径是什么？
https://i.stack.imgur.com/J7fL6.png
正如其他人已经提到的，包管理器 Bower，通常用于不依赖繁重客户端脚本的应用程序中的此类依赖项，它是 on the way out 并积极建议迁移到其他解决方案：
..psst！在维护 Bower 的同时，我们建议新的前端项目使用 yarn 和 webpack！
因此，尽管您现在仍然可以使用它，但 Bootstrap 也已向 drop support for it 宣布。因此，内置的 ASP.NET Core 模板也正在慢慢被编辑以远离它。
不幸的是，没有明确的前进道路。这主要是因为 Web 应用程序不断向客户端移动，需要复杂的客户端构建系统和许多依赖项。因此，如果您正在构建类似的东西，那么您可能已经知道如何解决这个问题，并且您可以扩展现有的构建过程以简单地在其中包含 Bootstrap 和 jQuery。
但是仍然有许多 Web 应用程序在客户端并不那么繁重，应用程序仍然主要在服务器上运行，因此服务器提供静态视图。 Bower 之前通过简化发布客户端依赖项而无需太多流程来填补这一点。
在 .NET 世界中，我们也有 NuGet，并且在以前的 ASP.NET 版本中，我们也可以使用 NuGet 将依赖项添加到一些客户端依赖项，因为 NuGet 只会将内容正确地放入我们的项目中。不幸的是，对于新的 .csproj 格式和新的 NuGet，已安装的包位于我们的项目之外，因此我们不能简单地引用它们。
这给我们留下了一些如何添加依赖项的选项：
一次性安装
这就是 ASP.NET Core 模板（不是单页应用程序）当前正在做的事情。当您使用它们创建新应用程序时，wwwroot 文件夹只包含一个文件夹 lib，其中包含依赖项：
https://i.stack.imgur.com/mMC4U.png
如果您当前仔细查看这些文件，您会发现它们最初是与 Bower 一起放置在那里以创建模板的，但这种情况可能很快就会改变。基本思路是将文件一次复制到 wwwroot 文件夹，以便您可以依赖它们。
为此，我们可以简单地按照 Bootstrap 的介绍和 download the compiled files 直接进行。如下载站点所述，这不包括jQuery，因此我们也需要单独下载； does contain Popper.js 但如果我们稍后选择使用 bootstrap.bundle 文件，我们将这样做。对于 jQuery，我们可以简单地从 the download site 获取单个“压缩的生产”文件（右键单击链接并从菜单中选择“将链接另存为...”）。
这给我们留下了一些文件，这些文件将简单地提取并复制到 wwwroot 文件夹中。我们还可以创建一个 lib 文件夹，以更清楚地表明这些是外部依赖项：
https://i.stack.imgur.com/E2P6Z.png
这就是我们所需要的，所以现在我们只需要调整我们的 _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 文件，以便我们可以指定我们的依赖项。为此，我们只需从“添加新项目”对话框中执行此操作：
https://i.stack.imgur.com/KCvoj.png
一旦我们有了它，我们需要编辑它以包含我们的依赖项。它应该看起来像这样：
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
通过保存，Visual Studio 将已经运行 NPM 来为我们安装依赖项。它们将安装到 node_modules 文件夹中。所以剩下要做的就是将文件从那里获取到我们的 wwwroot 文件夹中。有几个选项可以做到这一点：
bundleconfig.json 用于捆绑和缩小
我们可以使用多种方法之一来使用 bundleconfig.json 进行捆绑和缩小，如 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 进入客户端开发世界，这至少应该有助于一点学习曲线。
对此进行调查，似乎 LibMan 方法最适合我添加 Bootstrap 的需求。我喜欢它，因为它现在内置在 Visual Studio 2017（15.8 或更高版本）中，并且有自己的对话框。
2020 年 6 月 11 日更新：现在默认添加 VS-2019.5 引导程序 4.1.3（感谢 Harald S. Hanssen 的注意。）
https://i.stack.imgur.com/0LfME.png
以下几个链接指向 Use LibMan with ASP.NET Core in Visual Studio，其中 shows 如何使用内置对话框添加库：
在解决方案资源管理器中，右键单击应添加文件的项目文件夹。选择添加 > 客户端库。出现添加客户端库对话框：[来源：Scott Addie 2018]
https://i.stack.imgur.com/3FbzL.png
然后对于引导程序，只需（1）选择 unpkg，（2）输入“bootstrap@..”（3）安装。在此之后，您只需验证 _Layout.cshtml 或其他位置中的所有包含是否正确。它们应该类似于 href="~/lib/bootstrap/dist/js/bootstrap...")
试试 Libman，它和 Bower 一样简单，您可以指定 wwwroot/lib/ 作为下载文件夹。
对我来说诀窍是：
1）右键单击wwwroot>添加>客户端库
2）在搜索框中输入“bootstrap”
3）选择“选择特定文件”
4) 向下滚动并选择一个文件夹。就我而言，我选择了“twitter-bootstrap”
5）检查“css”和“js”
6) 点击“安装”。
几秒钟后，我拥有了所有 wwwroot 文件夹。对要添加的所有客户端包执行相同的操作。
Libman 似乎是微软现在首选的工具。它集成在 Visual Studio 2017(15.8) 中。
This article 介绍了如何使用它，甚至介绍了如何设置由构建过程执行的恢复。
Bootstrap's documentation 告诉您项目中需要哪些文件。
以下示例应作为 libman.json 的配置。
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "twitter-bootstrap@4.2.1",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.bundle.js",
"css/bootstrap.min.css"
]
},
{
"library": "jquery@3.3.1",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
}
]
}
不幸的是，您将很难使用 NuGet 在 .NET Core 项目上安装 Bootstrap（或大多数其他 JavaScript/CSS 框架）。如果您查看 NuGet 安装，它会告诉您它不兼容：
https://i.stack.imgur.com/eQx5P.png
如果您必须知道本地软件包依赖项在哪里，它们现在位于您的本地配置文件目录中。即%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts。
但是，我建议切换到 npm 或 bower - 就像在 Saineshwar 的回答中一样。
我们在 asp.net 核心中使用 bootstrap 4，但使用“Package Installer”扩展名从“npm”引用库，发现这比用于 Javascript/CSS 库的 Nuget 更好。
然后，我们使用“Bundler & Minifier”扩展将相关文件（从位于项目外部的 npm node_modules 文件夹中）复制到 wwwroot 以进行开发/部署。
BS4 现在在 .NET Core 2.2 上可用。肯定在 SDK 2.2.105 x64 安装程序上。我正在使用它运行 Visual Studio 2017。到目前为止，对于新的 Web 应用程序项目都很好。
为什么不直接使用 CDN？除非您需要编辑BS的代码，否则您只需参考CDN中的代码即可。
请参阅此处的 BS 4 CDN：
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
在页面的底部。
使用 nmp 配置文件（将其添加到您的 Web 项目中），然后以与使用 bower.json 相同的方式添加所需的包并保存。 Visual Studio 将下载并安装它。您将在项目的 nmp 节点下找到该包。
node -v查看版本，并获取当前版本 over here on nodejs.org