How to use Bootstrap 4 in ASP.NET Core

I want to update Bootstrap in ASP.NET Core with NuGet. I used this:

Install-Package bootstrap -Version 4.0.0

It did add the dependencies but how do I add it to my project now? What is the path for local NuGet dependencies?

Installed NuGet dependencies

135394 次浏览
小开

不幸的是，您将很难使用 NuGet 将 Bootstrap (或大多数其他 JavaScript/CSS 框架)安装到。NET 核心项目。如果你看一下 NuGet 安装，它会告诉你它是不兼容的:

enter image description here

如果您必须知道本地包依赖项在哪里，那么它们现在位于您的本地配置文件目录中。

不过，我建议改用 npm，或者类似于 Saineshwar 的 bower。

小开

我们在 asp.net 核心中使用 bootstrap 4，但是使用“ Package Installer”扩展引用“ npm”中的库，发现这比 Nuget for Javascript/CSS 库要好。

然后，我们使用“ Bundler & Minifier”扩展将相关文件复制到 wwwroot 中，以便进行开发/部署。

小开
最佳答案

正如其他人已经提到的，包管理器 Bower通常用于应用程序中不依赖于大量客户端脚本的依赖关系，它是 在出去的路上，并积极建议转向其他解决方案:

. . psst! 虽然鲍尔是维护，我们建议 纱线和 webpack新的前端项目！

因此，尽管您现在仍然可以使用它，Bootstrap 也已经向 放弃对它的支持发布了。因此，内置的 ASP.NET 核心模板正在慢慢地进行编辑，以脱离它。

不幸的是，没有明确的前进道路。这主要是由于 Web 应用程序不断进入客户端，需要复杂的客户端构建系统和许多依赖关系。因此，如果您正在构建类似的东西，那么您可能已经知道如何解决这个问题，并且可以扩展现有的构建过程，简单地包含 Bootstrap 和 jQuery。

但是仍然有许多 Web 应用程序在客户端并不那么繁重，应用程序仍然主要在服务器上运行，因此服务器提供静态视图。Bower 之前填补了这一空白，使得发布客户端依赖项变得非常容易，而不需要那么多的进程。

在。NET 世界我们也有 NuGet 和以前的 ASP.NET 版本，我们也可以使用 NuGet 添加依赖关系到一些客户端的依赖关系，因为 NuGet 只是把内容正确地放入我们的项目。不幸的是，使用新的 .csproj格式和新的 NuGet，已安装的软件包位于我们的项目之外，因此我们不能简单地引用它们。

这给我们留下了一些如何添加依赖项的选项:

一次性安装

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

wwwroot folder contains lib folder with static dependencies

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

为此，我们可以直接按照 Bootstrap 的介绍和 下载已编译的档案进行操作。正如在下载站点上提到的，这不包括 JQuery，所以我们也需要单独下载; 它是 does contain Popper.js，但是如果我们选择以后使用 bootstrap.bundle文件ーー我们将这样做。对于 jQuery，我们可以简单地从 下载网站获得一个“压缩的，生产的”文件(右键单击链接并从菜单中选择“另存链接为...”)。

这给我们留下了一些文件，它们将简单地解压缩并复制到 wwwroot文件夹中。我们还可以创建一个 lib文件夹，让它更清楚地表明这些是外部依赖项:

wwwroot folder contains lib folder with our installed dependencies

这就是我们所需要的，所以现在我们只需要调整 _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>

And the following block at the very end of the <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>标记助手，使其更加简单。但这就是你需要做的，让你开始。

Dependencies from NPM

如果希望保持依赖关系的更新，更现代的方法是从 NPM 包存储库获取依赖关系。您可以为此使用 NPM 或 Yarn; 在我的示例中，我将使用 NPM。

首先，我们需要为我们的项目创建一个 package.json文件，这样我们就可以指定我们的依赖项。要做到这一点，我们只需在“添加新项”对话框中进行操作:

Add New Item: npm Configuration file

一旦我们有了它，我们需要编辑它来包含我们的依赖关系，它应该是这样的:

{
"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用于捆绑和缩小

我们可以使用各种方法之一来使用 bundleconfig.json进行捆绑和缩小，如 文件中所解释的。一个非常简单的方法是使用 BuildBundlerMinifier NuGet 包，它会自动为此设置一个构建任务。

在安装该包之后，我们需要在项目的根目录创建一个 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 这样的任务管理器

如果我们想更深入地进行客户端开发，我们也可以开始使用在客户端使用的工具。例如 网络包，这是一个非常常用的构建工具，真正的一切。但是我们也可以从一个更简单的任务管理器(如 咕噜)开始，自己完成一些必要的步骤。

为此，我们在项目根目录中添加一个 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-world，可以开始使用其他所有很酷的工具了。所以也许值得从这个开始。

结论

虽然这突然变得比仅仅使用 Bower 复杂得多，但我们也确实通过这些新选项获得了很多控制权。例如，我们现在可以决定哪些文件实际上包含在 wwwroot文件夹中，以及这些文件看起来是什么样子。我们还可以利用这一点，通过 Node 率先进入客户端开发领域，这至少应该有助于 有一点的学习曲线。

小开

使用 nmp 配置文件(将其添加到 Web 项目中) ，然后像使用 bower.json 和 save 那样添加所需的包。视觉工作室将下载和安装它。您将在项目的 nmp 节点下找到该包。

小开

试试 Libman，它和 Bower 一样简单，你可以指定 wwwroot/lib/作为下载文件夹。

小开

仔细看看，似乎 LibMan 方法最适合我添加 Bootstrap 的需要。我喜欢它，因为它现在内置到 Visual Studio 2017(15.8或更高版本)中，并且有自己的对话框。

更新6/11/2020: bootstrap 4.1.3现在默认添加了 VS-2019.5(感谢 Harald S. Hanssen 的关注)

VS 添加到项目中的默认方法使用 Bower，但它看起来似乎已经过时了。在微软 鲍尔页面的标题中，他们写道: Bower is maintained only.Recommend using LibManager

以下几个链接指向 在 Visual Studio 中使用 ASP.NET 核心的 LibMan，其中 表演介绍了如何使用内置对话框添加库:

在解决方案资源管理器中，右键单击项目文件夹，其中 应该添加文件。选择“添加”> 客户端库 出现客户端库对话框: [ source: Scott Addie 2018]

enter image description here

然后对于 bootstrap just (1)选择 unpkg，(2)键入“ bootstrap@。."(3)安装。在此之后，您只需验证 _ Layout.cshtml 或其他位置中的所有包含都是正确的。它们应该类似于 Href = “ ~/lib/bootstrap/dist/js/bootstrap...”)

小开

Libman 似乎是微软现在首选的工具，它集成在 Visual Studio 2017(15.8)中。

本文 描述了如何使用它，甚至描述了如何设置由构建过程执行的恢复。

Bootstrap 的文档 告诉您在项目中需要什么文件。

下面的示例应该作为 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"
]
}
]
}
小开

BS4现在可以在 .NET Core 2.2上看到。当然是在 SDK 2.2.105 x64安装程序上。我正在用它运行 Visual Studio 2017。到目前为止，对于新的 Web 应用程序项目来说还不错。

小开

What does the trick for me is:

1)右击 wwwroot > Add > Client Side Library

2)在搜索栏输入“ bootstrap”

3)选择「选择特定档案」

4)向下滚动并选择一个文件夹。在我的例子中，我选择了“ twitter-bootstrap”

5)检查「 css 」及「 js 」

6)按「安装」。

几秒钟后，我有了所有这些 wwwroot 文件夹。对要添加的所有客户端包执行相同的操作。

小开

为什么不用 CDN 呢？除非你需要编辑 BS 的代码，那么你只需要参考 CDN 中的代码。

看 BS4 CDN 这里:

Https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

在页面的底部。


提交答案