如何在ASP.NET Core中使用Bootstrap 4
dev*_*per 96 .net nuget asp.net-core bootstrap-4 asp.net-core-2.0
我想用NuGet更新ASP.NET Core中的Bootstrap.我用过这个:
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项,但我现在如何将它添加到我的项目中？本地NuGet依赖的路径是什么？
pok*_*oke 194
正如其他人已经提到的那样,包管理器Bower(通常用于不依赖于大量客户端脚本的应用程序中的依赖关系)正在逐步推出并积极推荐转向其他解决方案:
因此,虽然你现在仍然可以使用它,但Bootstrap也宣布放弃对它的支持.因此,内置的ASP.NET Core模板正在慢慢编辑,以便远离它.
不幸的是,没有明确的前进道路.这主要是因为Web应用程序不断进入客户端,需要复杂的客户端构建系统和许多依赖项.因此,如果您正在构建类似的东西,那么您可能已经知道如何解决这个问题,并且您可以扩展现有的构建过程,以便在那里简单地包含Bootstrap和jQuery.
但是仍有许多Web应用程序在客户端没有那么重,应用程序仍然主要在服务器上运行,因此服务器提供静态视图.Bower之前通过简单地发布客户端依赖关系而没有那么多的过程来填补这一点.
在.NET世界中我们也有NuGet和以前的ASP.NET版本,我们也可以使用NuGet向一些客户端依赖项添加依赖项,因为NuGet只是将内容正确地放入我们的项目中.不幸的是,使用新.csproj格式和新的NuGet,已安装的软件包位于我们的项目之外,因此我们不能简单地引用它们.
这为我们提供了一些如何添加依赖项的选项:
一次性安装
这就是ASP.NET Core模板,它不是单页面应用程序,目前正在进行.当您使用它们创建新应用程序时,该wwwroot文件夹只包含一个lib包含依赖项的文件夹:
如果仔细查看当前的文件,您可以看到它们最初放置在Bower中以创建模板,但这很可能很快就会改变.基本思想是将文件复制一次到wwwroot文件夹,以便您可以依赖它们.
为此,我们可以简单地按照Bootstrap的介绍并直接下载编译后的文件.正如下载网站上所提到的,这不包括jQuery,所以我们也需要单独下载它; 它确实包含 Popper.js,但是如果我们选择bootstrap.bundle稍后使用该文件 - 我们将会这样做.对于jQuery,我们只需从下载站点获取一个"压缩,生产"文件即可.
这给我们留下了一些文件,这些文件将简单地提取并复制到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或纱线; 在我的例子中,我将使用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捆绑和缩小,如文档中所述.一种非常简单的方法是简单地使用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这样的任务管理器
如果我们想进一步深入客户端开发,我们也可以开始使用我们在那里使用的工具.例如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咕嘟咕嘟任务运行时,它运行的build-vendor任务,然后我们建立vendor.min.css并vendor.min.js就像我们以前那样.因此,在调整我们之后_Layout.cshtml,我们可以使用jQuery和Bootstrap.
虽然Gulp的初始设置比bundleconfig.json上面的设置稍微复杂一些,但我们现在已经进入了Node-world并且可以开始使用那里的所有其他酷工具.所以从这开始可能是值得的.
结论
虽然这比使用Bower突然变得复杂得多,但我们也通过这些新选项获得了很多控制权.例如,我们现在可以决定文件wwwroot夹中实际包含哪些文件以及这些文件的确切外观.而且我们还可以用它来使第一移动到客户端开发世界节点至少应有助于有点用的学习曲线.
- 大声笑.我要笑,否则我会哭.使用Visual Studio的工具支持进行了17年的.Net开发,并且已经实现了这一目标？就个人而言,我没有看到这是如何取得进展.如果只需要将Bootstrap样式添加到Web项目中就需要这么多工作,那么就会出现严重错误. (46认同)
- @camainc如果有的话,那就归咎于JavaScript生态系统的开发.这根本与.NET或Visual Studio无关.简单的解决方案仍然是手动下载文件,然后将它们添加到您的Web根目录.这就是它以前几年的运作方式. - 为了它的价值,微软正在开发新的VS工具,以使这个过程更简单(和可更新). (8认同)
- @user听起来好像你使用的是非常旧版本的Node.您可以通过运行`node -v`来查看该版本,并获取当前版本[在此处在nodejs.org上](https://nodejs.org/en/) (2认同)
- @ ozzy432836,我知道这不是一个引导问题,我从来没有说过.这是一个普遍的发展问题,每个人似乎都在追逐下一个新框架.我已经看到了我职业生涯中的很多变化,但没有像过去几年围绕Javascript发生的事情那样.看到开发社区一个接一个地推出一个新框架,这绝对是疯了.至于JS是否是前进的方向,陪审团仍然在那个问题上,特别是对于WASM以及像Blazor这样的项目. (2认同)
Sun*_*est 41
看看这个,似乎LibMan方法最适合我的需求,添加了Bootstrap.我喜欢它,因为它现在内置于Visual Studio 2017(15.8或更高版本)并具有自己的对话框.
VS添加到项目的默认方法使用Bower,但看起来它正在出路.在Microsofts bower页面的标题中,他们写道:
在几个链接之后导致在Visual Studio中使用LibMan和ASP.NET Core,它显示了如何使用内置对话框添加库:
在"解决方案资源管理器"中,右键单击要添加文件的项目文件夹.选择"添加">"客户端库".将出现"添加客户端库"对话框:[来源:Scott Addie 2018 ]
然后对于bootstrap,只需(1)选择unpkg,(2)键入"bootstrap @ .."(3)安装.在此之后,您只需要验证_Layout.cshtml中的所有包含或其他地方是否正确.它们应该像href ="〜/ lib/bootstrap/dist/js/bootstrap ...")
- 对我来说，这是最简单，最好的答案。 (6认同)
- 对我来说，这也是使用MS STANDARD TOOL进行安装的最简单方法。在您发布的提示中-将Provider更改为unpkg，键入bootstrap @ 4。，我能够安装。Libman确实不是很直观（在我的情况下，在显示软件包之前，我还必须在4点之后输入。（点）（我认为libman在我的环境中不起作用）。 (2认同)
- 只是提醒一下：如果您在 CdnJS 上寻找 Bootstrap，请注意该名称是 twitter-bootstrap，因为它最初被称为。 (2认同)
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"
]
}
]
}
对我来说，诀窍是：
1）右键单击wwwroot>添加>客户端库
2）在搜索框中输入“ bootstrap”
3）选择“选择特定文件”
4）向下滚动并选择一个文件夹。就我而言，我选择了“ twitter-bootstrap”
5）检查“ css”和“ js”
6）点击“安装”。
几秒钟后，我将所有这些都放到了wwwroot文件夹中。对要添加的所有客户端软件包执行相同的操作。
不幸的是，您将很难使用 NuGet 在 .NET Core 项目上安装 Bootstrap（或大多数其他 JavaScript/CSS 框架）。如果您查看 NuGet 安装，它会告诉您它不兼容：
如果您必须知道本地包依赖项在哪里，它们现在位于您的本地配置文件目录中。即%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts。
但是，我建议切换到 npm 或 bower - 就像 Saineshwar 的回答一样。
| 归档时间： |
|
| 查看次数： |
77701 次 |
| 最近记录： |