安装 Bootstrap Angular 9 - CSS

Bootstrap是一个流行的前端框架，它可以帮助您创建漂亮的Web设计。Angular是另一个流行的前端框架，它可以帮助您创建动态Web设计。在本教程中，我们将介绍如何在Angular 9中安装和使用Bootstrap CSS。

步骤1：安装Bootstrap

要开始在Angular 9中使用Bootstrap CSS，请使用以下命令安装它：

npm install bootstrap

步骤2：添加Bootstrap

现在安装了Bootstrap CSS，我们需要将其添加到Angular应用程序中。要将Bootstrap添加到Angular 9应用程序中，请按照以下步骤操作：

1. 在styles.css文件中添加以下行：

@import "~bootstrap/dist/css/bootstrap.css";

2. 在.angular-cli.json文件中，将以下代码添加到styles数组中：

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

3. 在app.module.ts文件中，将以下行添加到文件中：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent],
  imports: [NgbModule.forRoot(), BrowserModule],
  bootstrap: [AppComponent]
})

步骤3：测试

现在您已经成功地将Bootstrap添加到Angular 9应用程序中，请使用以下示例代码测试它：

<section class="container-fluid">
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</section>

结论

现在，您已经知道如何在Angular 9应用程序中安装和使用Bootstrap CSS。使用Bootstrap可以帮助您创建漂亮的Web设计，同时Angular可以帮助您创建动态的Web应用程序。现在您可以使用这些框架来创建现代化的Web设计！