.net core mvc初級教程（二）

這一片是關於用引入bootstrap前端框架的教程，置於bootstrap是什麼？
bootstrap是一組用於網站和網絡應用程序開發的開源前端（所謂「前端」，指的是展示給最終用戶的界面。與之對應的「後端」是在服務器上面運行的代碼）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、窗體、按鈕、導航及其餘各類組件及Javascript擴展，旨在使動態網頁和Web應用的開發更加容易。
Bootstrap是GitHub上面被標記爲「Starred」次數排名第二最多的項目。Starred次數超過124,000，而分支次數超過了47,000次

目錄
1、怎樣安裝bootstrap前端框架（bootstrap）
2、如何將bootstrap框架打包放入項目中

1、怎樣安裝bootstrap前端框架（bootstrap）

（1）若是沒有wwwroot，那就創建wwwroot文件夾，在其中添加
css,js文件夾，
（2）添加加載前端的工具 Npm:package.json 可加載前端框架
（3）創建bundleconfig.json 做用：將bootstrap等文件打包到css文件夾中

看看bootstrap官網應該怎樣配置
https://getbootstrap.com/docs/4.2/getting-started/introduction/

能夠從官網上看出一共要配置三個：bootstrap,jquery-slim,popper,在NPM配置文件中，就是backage.json，添加完後按下保存就會加載配置文件

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.2.1",
    "jquery-slim": "3.0.0",
    "popper": "1.0.1"
  }
}

上面的"popper": 「1.0.1」，改成 「popper.js」: 「1.14.6」，能夠從關於mvc初級第三篇博客看到

2、如何將bootstrap框架打包放入項目中

添加site.css,放在wwwroot的css文件夾中

添加bundleconfig.json配置文件，將bootstrap等文件打包到css文件夾中
名字不能夠錯
置於其做用機制可參考https://docs.microsoft.com/zh-cn/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.2&tabs=visual-studio

bundleconfig.json

[
  {
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  //上面用於開發
  //下面用於生產
  {
    "outputFileName": "wwwroot/css/bootstrap.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "minify": {
      "enabled": false//意爲沒有對它進行壓縮
    }
  }
]

第一個
將"node_modules/bootstrap/dist/css/bootstrap.css",
「wwwroot/css/site.css」
兩個文件打包成wwwroot/css/all.min.css一個文件
第二個
將"node_modules/bootstrap/dist/css/bootstrap.css"
打包成wwwroot/css/bootstrap.css至關於複製操做
「enabled」: false
意爲沒有對它進行壓縮
那怎樣對他進行打包呢

BuildBundlerMinifier NuGet 程序包

這是我另外一個項目，因此項目名有所不一樣

成功，中間出現了一個小插曲

這個少寫了個s不過不打要緊
Npm操做這篇教程結束

github代碼
https://github.com/1045683477/.net-Core-MVC-

下篇https://blog.csdn.net/qq_41841878/article/details/85380146