使用Angular集成Bootstrap 4

Angular是一个流行的Web应用程序框架，而Bootstrap是一个强大的前端框架，可以帮助我们创建现代化、响应式的Web界面。将Bootstrap 4集成到Angular项目中，可以提供丰富的CSS样式和组件，以及响应式布局。本文将介绍如何在Angular应用程序中集成Bootstrap 4，并提供相应的源代码示例。

步骤1：创建Angular项目
首先，确保您已经安装了Angular CLI。打开终端或命令提示符，并运行以下命令来创建一个新的Angular项目：

ng new my-app

这将创建一个名为my-app的新Angular项目。

步骤2：安装Bootstrap 4依赖
进入项目目录，然后运行以下命令来安装Bootstrap 4的依赖：

cd my-app
npm install bootstrap jquery popper.js

这将安装Bootstrap 4、jQuery和Popper.js库。

步骤3：配置Angular.json文件
打开项目目录中的angular.json文件。找到"styles"数组，并将以下两个CSS文件路径添加到该数组中：

"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"

确保将这两个路径添加到"styles"数组的开头位置。这将确保Bootstrap的样式文件首先加载。

步骤4：配置Angular.json文件（可选）
如果您计划