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

Question

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

我可以在依赖项下的NuGet节点下看到Bootstrap NuGet。但其中的 Bootstrap 文件都不是 wwwroot。

我添加了一个带有按钮的 Razor 页面。但是，它显示一个看起来正常的按钮。未使用 Bootstrap:

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

Answer 1

您需要使用 Bower 来安装这些文件(有关详细信息，请参阅 Manage client-side packages with Bower in ASP.NET Core)。

首先将 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"
}

然后，从“依赖项”下的 Bower 文件夹中，您可以选择“还原包”，然后将下载文件。

然后，您可以在 _Layout.cshtml 文件中引用 Bootstrap ，其中包含用于开发的相对链接和发布时的 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();
    ...
}