如何添加bootstrap到空的asp.net核心2模板应用程序？

Question

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

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

我添加了一个带按钮的剃刀页面。但是，它会显示正常的按钮。 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"
}

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

然后，您可以在_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();
    ...
}

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>