如何在 ASP.NET Core 中使用 Bootstrap 4
Posted
技术标签:
【中文标题】如何在 ASP.NET Core 中使用 Bootstrap 4【英文标题】：How to use Bootstrap 4 in ASP.NET Core 【发布时间】：2018-07-06 22:52:03 【问题描述】：我想用 NuGet 更新 ASP.NET Core 中的 Bootstrap。我用这个：
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项，但我现在如何将它添加到我的项目中？本地 NuGet 依赖的路径是什么？
【问题讨论】：
BS4 不应该有 Bower 支持（来源：getbootstrap.com/docs/4.0/migration/#breaking） 将 bootstrap@4.0.0-beta.3 替换为 bootstrap@4.0.0：***.com/questions/47985337/… 目前这应该是公认的答案，最容易使用 Libman：***.com/a/53012140/578552 NUGET 现在兼容 4.4.1 版。 2019年后，最好使用LibMan，如this帖子中所述。 【参考方案1】：正如其他人已经提到的，包管理器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，其中包含依赖项：
如果您当前仔细查看这些文件，您会发现它们最初是与 Bower 一起放置在那里以创建模板的，但这种情况可能很快就会改变。基本思想是将文件一次复制到wwwroot 文件夹，以便您可以依赖它们。
要做到这一点，我们可以直接按照 Bootstrap 的介绍和download the compiled files 进行操作。正如下载网站所说，这不包括jQuery，所以我们也需要单独下载；它does containPopper.js 虽然如果我们稍后选择使用bootstrap.bundle 文件——我们会这样做。对于 jQuery，我们可以简单地从 the download site 获取一个“压缩的生产”文件（右键单击链接并从菜单中选择“将链接另存为...”）。
这给我们留下了一些文件，这些文件将简单地提取并复制到wwwroot 文件夹中。我们还可以创建一个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 文件，这样我们就可以指定我们的依赖项。为此，我们只需从“添加新项目”对话框中执行此操作：
一旦我们有了它，我们需要编辑它以包含我们的依赖项。它应该是这样的：
"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 进入客户端开发世界，这至少应该对一点学习曲线有所帮助。
【讨论】：
当使用 npm 方法时，我收到了类似“Uncaught SyntaxError: Unexpected token export”之类的错误。为了解决这个问题，我切换到 popper.js umd 文件“node_modules/popper.js/dist/umd/popper.min.js”。否则，这是我在堆栈上见过的最好的答案之一，谢谢。 @user 这听起来好像您使用的是非常旧的 Node 版本。运行node -v可以查看版本，获取当前版本over here on nodejs.org
哈哈。我必须笑，否则我会哭。使用 Visual Studio 的工具支持进行 17 年的 .Net 开发，结果到了这个地步？就个人而言，我看不出这是如何向前发展的。如果仅将 Bootstrap 样式添加到 Web 项目就需要做这么多工作，那么事情就大错特错了。
@camainc 如果有的话，那就归咎于 javascript 生态系统的发展。这实际上与 .NET 或 Visual Studio 完全无关。简单的解决方案仍然是手动下载文件，然后将它们添加到您的 Web 根目录。这就是它多年前的工作方式。 – 值得一提的是，微软正在开发新的 VS 工具，以使这个过程更简单（并且可更新）。
@ozzy432836，我知道这不是引导问题，而且我从未说过它是。这是一个普遍的开发问题，每个人似乎都在追逐下一个新框架。我在职业生涯中看到了很多变化，但与过去几年围绕 Javascript 发生的情况完全不同。看着开发社区一个接一个地搅动一个新的框架，这绝对是疯了。至于 JS 是否是前进的方向，目前还没有定论，尤其是 WASM 和 Blazor 等项目即将出现。【参考方案2】：
对此进行研究，似乎 LibMan 方法最适合我添加 Bootstrap 的需求。我喜欢它，因为它现在内置在 Visual Studio 2017（15.8 或更高版本）中，并且有自己的对话框。
2020 年 6 月 11 日更新： VS-2019.5 现在默认添加引导程序 4.1.3（感谢 Harald S. Hanssen 的注意。）
VS 添加到项目的默认方法使用 Bower，但它看起来正在退出。在微软bower 页面的标题中，他们写道：
通过几个链接可以找到Use LibMan with ASP.NET Core in Visual Studio shows 如何使用内置对话框添加库：
在解决方案资源管理器中，右键单击项目文件夹，其中 应该添加文件。选择添加 > 客户端库。添加 出现客户端库对话框：[来源：Scott Addie 2018]
然后对于引导程序，只需 (1) 选择 unpkg，(2) 输入“bootstrap@..” (3) 安装。在此之后，您只需验证 _Layout.cshtml 或其他位置中的所有包含是否正确。它们应该类似于 href="~/lib/bootstrap/dist/js/bootstrap...")
【讨论】：
我有 VS 4.7.02558（社区版），这对我来说是最简单的选择。我在为学习 MS 70-486 (MVC) 考试而创建的实践项目中使用了它，所以我无法回答这对于即将投入生产的项目有多有效。 对我来说，这也是使用 MS STANDARD TOOL 安装这些东西的最简单方法。根据您发布的提示 - 将 Provider 更改为 unpkg，输入 bootstrap@4.，我就可以安装了。 Libman 真的不直观（在我的情况下，我还必须在 4 之后，在显示包之前输入 .（点）（我想，libman 在我的环境中不起作用）。 提醒一下：如果您在 CdnJS 上寻找 Bootstrap，请注意名称是 twitter-bootstrap，因为它最初被称为。 在 Visual Studio 2019 中（2020 年 6 月 11 日最新）- libman 文件已创建，但我没有看到 libman 弹出窗口。 我已经在几个项目上测试了 LibMan，这确实是要走的路。可惜 GUI 不工作，但经过几次尝试后，它很容易使用。【参考方案3】：试试Libman，就像Bower一样简单，你可以指定wwwroot/lib/作为下载文件夹。
【讨论】：
VS2017 还没有发布：更新：2018 年 5 月 24 日——看起来 LibMan 没有进入 15.7 的最终版本。它在 15.8.x 的预览版中 看起来这已经与最终的 15.8 版本一起发布了。 它现在在 VS2017 V 15.8 中可用，并且比公认的答案更简单【参考方案4】：对我来说诀窍是：
1) 右键单击 wwwroot > 添加 > 客户端库
2) 在搜索框中输入“bootstrap”
3) 选择“选择特定文件”
4) 向下滚动并选择一个文件夹。就我而言，我选择了“twitter-bootstrap”
5) 检查“css”和“js”
6) 点击“安装”。
几秒钟后，我拥有了所有 wwwroot 文件夹。对您要添加的所有客户端包执行相同操作。
【讨论】：
【参考方案5】：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"
]
]
【讨论】：
谢谢，我一直在关注一本 Pro ASP.NET Core MVC 2 书，该书告诉我使用现在已经过时的 Bower。在意识到您可以简单地右键单击您的项目并选择 Add -> Client-Side library 之前，我搜索了很长时间。这使用 libman。都是内置的。【参考方案6】：不幸的是，您将很难使用 NuGet 在 .NET Core 项目上安装 Bootstrap（或大多数其他 JavaScript/CSS 框架）。如果您查看 NuGet 安装，它会告诉您它不兼容：
如果您必须知道本地软件包依赖项在哪里，它们现在位于您的本地配置文件目录中。即%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts。
但是，我建议切换到 npm 或 bower - 就像 Saineshwar 的回答一样。
【讨论】：
【参考方案7】：我们在 asp.net 核心中使用 bootstrap 4，但使用“Package Installer”扩展从“npm”引用库，发现这比用于 Javascript/CSS 库的 Nuget 更好。
然后，我们使用“Bundler & Minifier”扩展将相关文件复制（从位于项目外部的 npm node_modules 文件夹中）复制到 wwwroot 中，以进行开发/部署。
【讨论】：
【参考方案8】：BS4 现已在.NET Core 2.2 上提供。肯定在 SDK 2.2.105 x64 安装程序上。我正在使用它运行 Visual Studio 2017。到目前为止，对于新的 Web 应用程序项目来说都很好。
【讨论】：
【参考方案9】：为什么不直接使用 CDN？除非需要修改BS的代码，否则只需要参考CDN中的代码即可。
在此处查看 BS 4 CDN：
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
在页面底部。
【讨论】：
使用 CDN 会增加运行时依赖。因此，如果 CDN 出现故障，您的网站也会出现故障。这是一个安全问题，因为控制 cdn 的任何人都可以更改流行文件并将脚本注入您的站点。这也是一个隐私问题，因为用户的浏览器从第三方服务器而不是您自己的服务器请求文件。 @TxRegex 在某个阶段实际上建议引用 CDN 而不是 Web 应用程序的服务器；因为用户的浏览器很可能在浏览其他网站时已经缓存了一个流行的库，例如 Bootstrap。但无论如何......【参考方案10】：使用 nmp 配置文件（将其添加到您的 Web 项目中），然后以与使用 bower.json 相同的方式添加所需的包并保存。 Visual Studio 将下载并安装它。您会在项目的 nmp 节点下找到该包。
【讨论】：
以上是关于如何在 ASP.NET Core 中使用 Bootstrap 4的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 EF Core 在 ASP.NET Core 中取消应用迁移
干货分享：ASP.NET CORE（C#）与Spring Boot MVC(JAVA)异曲同工的编程方式总结
如何在 ASP.NET Core 中使用 SqlClient？