使用 Angular 添加 Bootstrap

使用 Angular 添加 Bootstrap 可以让你在应用中使用强大的 Bootstrap 框架以及预先构建的 UI 组件。

步骤

步骤 1：安装 Bootstrap

你可以使用 npm 安装 Bootstrap。

npm install bootstrap

步骤 2：在 angular.json 中添加 Bootstrap 样式

在 angular.json 文件中的 styles 数组中添加 Bootstrap 样式路径。

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

步骤 3：在 app.module.ts 中导入 Bootstrap 模块

在 app.module.ts 中导入 Bootstrap 模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤 4：在 HTML 中使用 Bootstrap 组件

现在你可以在 HTML 中使用 Bootstrap 的 UI 组件了。

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

结论

使用 Angular 添加 Bootstrap 很简单，只需要安装，然后将其样式添加到 angular.json 文件中的 styles 数组，最后在 app.module.ts 中导入 Bootstrap 模块即可开始使用 Bootstrap 的强大 UI 组件。