Angular Bootstrap

Angular Bootstrap

如何为Angular项目安装Bootstrap?

在命令提示符下运行以下命令:
npm install--save bootstrap@3  => The @3  is important!

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第1张

此外,当您使用通过Angular CLI 6+创建的项目时(通过 ng v ),您将拥有angular.json文件,而不是 .angular-cli.json 文件。在该文件中,您仍然需要将Bootstrap添加到 styles [] 数组中,但是路径应为 node_modules/bootstrap/dist/css/bootstrap.min.css 否 ../node_modules/bootstrap/dist/css/bootstrap.min.css 。不得包含前导 ../。

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第2张

在这里,我们使用的是Angular 7.2.3版本。

如何在项目中添加bootstrap.css文件?

扩展节点模块(库根文件夹)

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第3张

转到bootstrap文件夹并展开它。

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第4张

转到dist文件夹并展开dist。

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第5张

展开css,您将找到" bootstrap.css"。展开bootstrap.css,您将看到bootstrap.min.css

Angular Bootstrap_https://bianchenghao6.com_【Angular7 教程】_第6张

打开angular.json文件,并在样式部分添加bootstrap.min.css。现在已为Angular 7项目安装了
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

现在可以使用Bootstrap了。