visual-studio-2017 - 如何在 .net core 2 网站中升级 Bootstrap

Question

我很确定这很容易，但我不知道如何将 bootstrap 从 3.3.7 升级到 4.1.1。

根据版本，我所做的是在 _layout 页面中更改此内容

  <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" />

还需要什么。

我也在 Nuget 包管理器中看到过，但我认为这需要更多的更改，我不知道该怎么做，保持对版本和项目本身的控制。

更新

我在 wwwroot/lib/bootstrap 文件夹中找到了一个 bower.json 文件，我将它修改为 3.3.7 并将其替换为 4.1.1，但是有一个提交号我不知道它是什么。

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": "1.9.1 - 3"
  },
  "version": "4.4.1",
  "_release": "4.4.1",
  "_resolution": {
    "type": "version",
    "tag": "v4.1.1",
    "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86"
  },
  "_source": "https://github.com/twbs/bootstrap.git",
  "_target": "v4.1.1",
  "_originalSource": "bootstrap",
  "_direct": true
}

这是行不通的。 bootstrap cdn 的布局引用仍然指向 3.3.7，并且当我保存 bower 文件时，lib 文件夹中的 bootstrap 文件没有更新。

Answer 1

在 Visual Studio 2017 15.7 中，您可以使用尚未发布的 LibMan (Library Manager) 以获取最新的 Bootstrap 库。

打开您的 Web 项目

转到工具 -> Nuget 包管理器 -> Nuget 包管理器控制台

类型

PM>Install-Package Microsoft.Web.LibraryManager.Build -Version 1.0.113

安装库管理器后，在解决方案的根目录上创建 libman.json

格式化你的 libman.json 如下

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "defaultDestination": "wwwroot/lib",
  "libraries": [
    {
      "library": "jquery@3.0.0",
      "files": [
        "core.js",
        "jquery.js",
        "jquery.min.js",
        "jquery.min.map",
        "jquery.slim.js",
        "jquery.slim.min.js",
        "jquery.slim.min.map" 
      ],
      "destination": "wwwroot/lib/jquery"
    },
    {
      "library": "twitter-bootstrap@4.1.3",
      "files": [
        "css/bootstrap-grid.css",
        "css/bootstrap-grid.css.map",
        "css/bootstrap-grid.min.css",
        "css/bootstrap-grid.min.css.map",
        "css/bootstrap-reboot.css",
        "css/bootstrap-reboot.css.map",
        "css/bootstrap-reboot.min.css",
        "css/bootstrap-reboot.min.css.map",
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "js/bootstrap.bundle.js",
        "js/bootstrap.bundle.js.map",
        "js/bootstrap.bundle.min.js",
        "js/bootstrap.bundle.min.js.map",
        "js/bootstrap.js",
        "js/bootstrap.js.map",
        "js/bootstrap.min.js",
        "js/bootstrap.min.js.map" 
      ],
      "destination": "wwwroot/lib/bootstrap"
    }
  ]
}

然后重建您的解决方案。瞧!