如何在ASP.NET Core中使用Bootstrap 4及NuGet更新后的配置与路径问题

嘿，我来帮你一步步搞定这两个问题，都是ASP.NET Core里很常见的操作~

一、把NuGet安装的Bootstrap 4接入项目 #

你已经通过NuGet装好了Bootstrap 4.0.0，接下来要把它的静态文件（CSS、JS）引入到项目里，具体步骤如下：

1. 复制Bootstrap文件到项目静态资源目录
   先找到NuGet包内的css和js文件夹（路径我后面详细说），把它们复制到你项目的wwwroot/lib/bootstrap目录下——如果没有这个目录，自己新建一个就行。

   为什么要放到wwwroot？因为ASP.NET Core默认只会把wwwroot目录下的文件作为静态资源对外暴露，这样页面才能正常加载这些文件。

2. 在布局文件中引用Bootstrap资源
   打开项目里的Views/Shared/_Layout.cshtml（MVC项目）或者Pages/_Layout.cshtml（Razor Pages项目），在对应位置添加引用：

   • 引入Bootstrap CSS（放在<head>标签内）：

     <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
     

   • 引入Bootstrap JS（放在</body>标签之前，注意Bootstrap 4依赖jQuery和Popper.js，要先引用这两个再引用Bootstrap的JS）：

     <!-- 如果你通过NuGet安装了jQuery和Popper.js，就引用本地文件；没装的话也可以用CDN -->
     <script src="~/lib/jquery/jquery.min.js"></script>
     <script src="~/lib/popper.js/umd/popper.min.js"></script>
     <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
     

3. 可选：用捆绑工具优化资源加载
   如果需要压缩、合并静态文件，可以用BundlerMinifier或者WebOptimizer这类工具。新建bundleconfig.json配置文件，把Bootstrap的资源和项目自有资源打包：

   [
     {
       "outputFileName": "wwwroot/css/site.min.css",
       "inputFiles": [
         "wwwroot/lib/bootstrap/css/bootstrap.min.css",
         "wwwroot/css/site.css"
       ]
     },
     {
       "outputFileName": "wwwroot/js/site.min.js",
       "inputFiles": [
         "wwwroot/lib/jquery/jquery.min.js",
         "wwwroot/lib/popper.js/umd/popper.min.js",
         "wwwroot/lib/bootstrap/js/bootstrap.min.js",
         "wwwroot/js/site.js"
       ]
     }
   ]
   

   之后在布局文件里引用打包后的文件即可，能提升页面加载速度。

二、查找本地NuGet依赖的路径 #

NuGet包默认会下载到用户目录下的缓存文件夹，不同系统的路径如下：

• Windows系统：
  路径为 C:\Users\{你的用户名}\.nuget\packages，比如你的用户名是Tom，就是C:\Users\Tom\.nuget\packages
• macOS/Linux系统：
  路径为 ~/.nuget/packages（~代表你的用户主目录）

进入后找到bootstrap文件夹，再进入4.0.0版本的目录，就能看到Bootstrap的所有文件了——一般在content或者wwwroot子目录里（不同NuGet包的结构可能略有差异）。

小提示：如果你的项目用了自定义本地NuGet源，那路径就是你自己设置的文件夹，默认都是上面的用户目录缓存。

内容的提问来源于stack exchange，提问作者ansar maleki