asp.net - 如何将引导程序添加到空的 asp.net core 2 模板应用程序？

Question

在一个空的（模板）asp.net core 2 应用程序中，在项目中添加一个Bootstrap 包后，还需要什么才能访问Bootstrap？

我可以在依赖项下的 NuGet 节点下看到 Bootstrap NuGet。但是没有一个 Bootstrap 文件是wwwroot.

我添加了一个带有按钮的剃须刀页面。但是，它显示一个正常外观的按钮。未使用引导程序：

<button type="button" class="btn btn-primary">Primary</button>

Answer 1

您需要使用 Bower 来安装文件（有关详细信息，请参阅在 ASP.NET Core 中使用 Bower 管理客户端包）。

首先将bower.json和.bowerrc文件添加到您的项目根文件夹。

bower.json内容：

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "3.2.1"
  },
  "resolutions": {
    "jquery": "3.2.1"
  }
}

.bowerrc内容

{
  "directory": "wwwroot/lib"
}

然后从 Dependencies 下的 Bower 文件夹中，您可以选择 Restore Packages，文件将被下载。

然后，您可以在 _Layout.cshtml 文件中引用引导程序，其中包含用于开发的相对链接和发布时的 CDN 链接。

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

并Startup.cs添加 UseStaticFiles 以使 Web 服务器能够返回 CSS 和 JS 文件。

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider serviceProvider) {
    ...
    app.UseStaticFiles();
    ...
}

Answer 2

这些文件不在 js 文件夹中。尝试以下位置的文件：

<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>