angular2中使用bootstrap样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sunxiaoju/article/details/84934944

1、首先在package.json文件中加入："bootstrap": "^4.1.3",如下图所示：

2、然后重新使用npm install安装，如下图所示：

3、此时在node_modules目录中就有一个bootstrap目录，如下图所示：

4、然后在angular.json中添加

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

如下图所示：

如果是加js文件，则只需要添加：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

如下图所示：

5、然后在html中的button按钮通过class直接使用即可，如下代码所示：

<h1>Hello {{name}}!</h1>
<p>
    Here`s a list of the things you need to do:
</p>
<ul>
    <li *ngFor="let todo of todos;index as idx;first as isFirst;last as isLast;even as isEven;odd as isOdd">索引：{{idx}},内容：{{todo}},是否是第一个：{{isFirst}},是否是最后一个：{{isLast}},是否是偶数：{{isEven}},是否是奇数：{{isOdd}}</li>
</ul>
<button (click)="click()" class="btn btn-danger">click</button>

6、最后运行结果为：