如何在ASP.NET Core中使用Bootstrap 4 [英] How to use Bootstrap 4 in ASP.NET Core
问题描述
我想用NuGet更新ASP.NET Core中的Bootstrap。我用了这个：
安装包引导程序-版本4.0.0
它确实添加了依赖项，但是现在如何将其添加到项目中？本地NuGet依赖项的路径是什么？
正如其他人已经提到的那样，包管理器。如下载站点上所述，它不包含。一种非常简单的方法是简单地使用 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}
}
]
这基本上是配置哪个les合并成什么。并且在构建时，我们可以看到正确创建了 vendor.min.css 和 vendor.js.css 。因此，我们要做的就是再次调整 _Layouts.html 使其包含这些文件：
<！-在< head>内部->
< link rel = stylesheet href =〜/ vendor.min.css />
<！-在< 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>
现在，当我们构建时，默认值 Gulp任务运行，运行 build-vendor 任务，然后构建我们的 vendor.min.css 和 vendor.min.js 就像以前一样。因此，像上面那样调整 _Layout.cshtml 之后，我们可以使用jQuery和Bootstrap。
Gulp的初始设置比上面的 bundleconfig.json 稍微复杂一些，我们现在已经进入Node-world，并且可以开始利用所有其他功能工具在那里。因此，也许值得从此开始。
结论
虽然这突然变得比复杂得多仅使用Bower，我们就可以通过这些新选项获得很多控制权。例如，我们现在可以确定 wwwroot 文件夹中实际包含的文件以及它们的外观。而且我们还可以使用它通过Node进入客户端开发世界，这至少应该对学习曲线有所帮助。
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?
As others already mentioned, the package manager Bower, that was usually used for dependencies like this in application that do not rely on heavy client-side scripting, is on the way out and actively recommending to move to other solutions:
..psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!
So although you can still use it right now, Bootstrap has also announced to drop support for it. As a result, the built-in ASP.NET Core templates are slowly being edited to move away from it too.
Unfortunately, there is no clear path forward. This is mostly due to the fact that web applications are continuously moving further into the client-side, requiring complex client-side build systems and many dependencies. So if you are building something like that, you might already know how to solve this then, and you can expand your existing build process to simply also include Bootstrap and jQuery there.
But there are still many web applications out there that are not that heavy on the client-side, where the application still runs mainly on the server and the server serves static views as a result. Bower previously filled this by making it easy to just publish client-side dependencies without that much of a process.
In the .NET world we also have NuGet and with previous ASP.NET versions, we could use NuGet as well to add dependencies to some client-side dependencies since NuGet would just place the content into our project correctly. Unfortunately, with the new .csproj format and the new NuGet, installed packages are located outside of our project, so we cannot simply reference those.
This leaves us with a few options how to add our dependencies:
One-time installation
This is what the ASP.NET Core templates, that are not single-page applications, are currently doing. When you use those to create a new application, the wwwroot folder simply contains a folder lib that contains the dependencies:
If you look closely at the files currently, you can see that they were originally placed there with Bower to create the template, but that is likely to change soon. The basic idea is that the files are copied once to the wwwroot folder so you can depend on them.
To do this, we can simply follow Bootstrap’s introduction and download the compiled files directly. As mentioned on the download site, this does not include jQuery, so we need to download that separately too; it does contain Popper.js though if we choose to use the bootstrap.bundle file later—which we will do. For jQuery, we can simply get a single "compressed, production" file from the download site (right-click the link and select "Save link as..." from the menu).
This leaves us with a few files which will simply extract and copy into the wwwroot folder. We can also make a lib folder to make it clearer that these are external dependencies:
That’s all we need, so now we just need to adjust our _Layout.cshtml file to include those dependencies. For that, we add the following block to the <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>
You can also just include the minified versions and skip the <environment> tag helpers here to make it a bit simpler. But that’s all you need to do to keep you starting.
Dependencies from NPM
The more modern way, also if you want to keep your dependencies updated, would be to get the dependencies from the NPM package repository. You can use either NPM or Yarn for this; in my example, I’ll use NPM.
To start off, we need to create a package.json file for our project, so we can specify our dependencies. To do this, we simply do that from the "Add New Item" dialog:
Once we have that, we need to edit it to include our dependencies. It should something look like this:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
By saving, Visual Studio will already run NPM to install the dependencies for us. They will be installed into the node_modules folder. So what is left to do is to get the files from there into our wwwroot folder. There are a few options to do that:
bundleconfig.json for bundling and minification
We can use one of the various ways to consume a bundleconfig.json for bundling and minification, as explained in the documentation. A very easy way is to simply use the BuildBundlerMinifier NuGet package which automatically sets up a build task for this.
After installing that package, we need to create a bundleconfig.json at the root of the project with the following contents:
[
{
"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 }
}
]
This basically configures which files to combine into what. And when we build, we can see that the vendor.min.css and vendor.js.css are created correctly. So all we need to do is to adjust our _Layouts.html again to include those files:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Using a task manager like Gulp
If we want to move a bit more into client-side development, we can also start to use tools that we would use there. For example Webpack which is a very commonly used build tool for really everything. But we can also start with a simpler task manager like Gulp and do the few necessary steps ourselves.
For that, we add a gulpfile.js into our project root, with the following contents:
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'));
Now, we also need to adjust our package.json to have dependencies on gulp and 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"
}
}
Finally, we edit our .csproj to add the following task which makes sure that our Gulp task runs when we build the project:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Now, when we build, the default Gulp task runs, which runs the build-vendor tasks, which then builds our vendor.min.css and vendor.min.js just like we did before. So after adjusting our _Layout.cshtml just like above, we can make use of jQuery and Bootstrap.
While the initial setup of Gulp is a bit more complicated than the bundleconfig.json one above, we have now have entered the Node-world and can start to make use of all the other cool tools there. So it might be worth to start with this.
Conclusion
While this suddenly got a lot more complicated than with just using Bower, we also do gain a lot of control with those new options. For example, we can now decide what files are actually included within the wwwroot folder and how those exactly look like. And we also can use this to make the first moves into the client-side development world with Node which at least should help a bit with the learning curve.
这篇关于如何在ASP.NET Core中使用Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
