是時候使用bootstrap來脫離這丑陋的界面了。 ## 安裝bootstrap 我們使用終端來到項目的根目錄，執行`npm install jquery@1.12.4 popper.js@1.16.0 bootstrap@4.3.1`完成bootstrap的安裝。 ``` panjiedeMac-Pro:web-app panjie$ npm install jquery@1.12.4 popper.js@1.16.0 bootstrap@4.3.1 + popper.js@1.16.0 + bootstrap@4.3.1 + jquery@1.12.4 updated 3 packages and audited 18850 packages in 12.437s found 9 vulnerabilities (2 moderate, 7 high) run `npm audit fix` to fix them, or `npm audit` for details ``` > 為了保證大家的版本號與教程中相一致，我們在安裝過程中指定了包的小版本。比如我們使用的為`npm install jquery@1.12.4`而非`npm install jquery`。在生產環境中，我們在安裝時往往使用不指定版本號的形式來安裝當前包的最新版本。 ## 加載bootstrap 原則上來說angular和bootstrap都屬于由npm來管理的包。由于其為并列的關系，所以如果在angular中想使用bootstrap就必須進行一些配置。我們此時打開項目根目錄的angular.json ``` panjiedeMac-Pro:web-app panjie$ tree -L 1 . ├── README.md ├── angular.json ★ ├── browserslist ├── e2e ├── karma.conf.js ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json 3 directories, 10 files ```  然后找到第30-32行以及95-97行代碼： ``` "styles": [ "src/styles.sass" ], ``` 并將其修正為： ``` "styles": [ "src/styles.sass", "./node_modules/bootstrap/dist/css/bootstrap.css" ], ``` 然后我們重新使用`ng serve`來啟動項目：  ## 我猜 通過觀察package.json的變化以及在angular中引用bootstrap的方法，我猜當前系統結構應該是這樣的：  如果你想徹底弄清他們間的關系（在現階段，完全沒有這個必要），你可以認真閱讀本小節后的參考文檔鏈接 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.1) | - | | 工作區和項目文件結構 | [https://www.angular.cn/guide/file-structure](https://www.angular.cn/guide/file-structure) | - | | 工作區配置 | [https://www.angular.cn/guide/workspace-config](https://www.angular.cn/guide/workspace-config) | - | | npm包 | [https://www.angular.cn/guide/npm-packages](https://www.angular.cn/guide/npm-packages) | - |