是时候使用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 ``` ![](https://img.kancloud.cn/74/17/741747c894616b0b70a4a5ce69f38d83_453x238.png) 然后找到第30-32行以及95-97行代码: ``` "styles": [ "src/styles.sass" ], ``` 并将其修正为: ``` "styles": [ "src/styles.sass", "./node_modules/bootstrap/dist/css/bootstrap.css" ], ``` 然后我们重新使用`ng serve`来启动项目: ![](https://img.kancloud.cn/c2/f2/c2f20fdd9fe720ae3dafe4806935be6d_540x195.png) ## 我猜 通过观察package.json的变化以及在angular中引用bootstrap的方法,我猜当前系统结构应该是这样的: ![](https://img.kancloud.cn/7d/4d/7d4d905ce5a4fc0054a1a3e9e8371666_773x598.png) 如果你想彻底弄清他们间的关系(在现阶段,完全没有这个必要),你可以认真阅读本小节后的参考文档链接 # 参考文档 | 名称 | 链接 | 预计学习时长(分) | | --- | --- | --- | | 源码地址 | [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) | - |