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

Question

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

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

我添加了一个带按钮的剃须刀页面。但是，它显示一个看起来很正常的按钮。 Bootstrap 未被使用：

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

Answer 1

文件不在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>

Answer 2

您需要使用 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 文件夹中 select Restore Packages 并下载文件。

然后您可以在 _Layout.cshtml 文件中引用 bootstrap，其中包含用于开发的相关 link 和发布时的 CDN link。

<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 服务器能够 return 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();
    ...
}

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

How to add bootstrap to empty asp.net core 2 template app?

asp.net

twitter-bootstrap

razor-pages