angular2中使用bootstrap样式

最新推荐文章于 2024-06-18 14:26:24 发布

原创最新推荐文章于 2024-06-18 14:26:24 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Angular项目中引入Bootstrap框架，包括在package.json中添加依赖、使用npm安装、配置angular.json以及在HTML中应用Bootstrap样式和组件的具体步骤。

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、最后运行结果为：