将 Bootstrap 选项卡与 Angular 一起使用

在这一步中，我们将学习如何使用 Bootstrap 标签页。我们将使用 Angular 来实现。我们可以通过使用各种 Angular 版本（例如 Angular 6、7、8、9、10 和 11）来使用 Bootstrap 标签页。如果我们不了解 ngx-bootstrap 标签页，那么我们就来对了地方。以下示例将提供一种学习 ng Bootstrap 标签页的简单方法。

Bootstrap 提供了 Ng Bootstrap 的功能。 Ng Bootstrap 将提供 Bootstrap 版本 3 和 4 的所有原生 angular 指令，例如 datepicker、tooltip、buttons、model、tabs、pagination 等。我们可以通过使用 Ng Bootstrap 轻松使用 Bootstrap UI。在下面的示例中，将简单地创建四种类型的标签页，创建后，我们可以在应用程序中使用它。为了使用 Bootstrap 标签页，分步过程描述如下

步骤 1

在这一步中，我们将创建新应用。以下命令可用于创建新应用，如下所示

ng new my-new-app

步骤 2

在这一步中，我们将安装 Bootstrap 4。在这里，我们将使用 Bootstrap CSS 来安装 Bootstrap 的核心包。以下命令可用于安装它，如下所示

npm install bootstrap --save

执行此命令后，我们将添加 Bootstrap CSS，例如 "node_modules/bootstrap/dist/css/bootstrap.min.css"。现在我们将使用一个名为 angular.json 的文件并像这样添加它

angular.json

步骤 3

在这一步中，我们将安装 Ng Bootstrap。在这里，我们将使用 Bootstrap UI 来安装 Ng Bootstrap 的包。以下命令将用于安装它，如下所示

npm install --save @ng-bootstrap/ng-bootstrap

步骤 4

在这一步中，我们将导入模块。在这里，我们将导入 NgbModule。现在我们将使用一个名为 app.module.ts 的文件并像这样导入它

src/app/app.module.ts

步骤 5

在这一步中，我们将更新视图文件。在这里，我们将使用名为 HTML 的文件并更新它。我们将使用一个名为 app.component.html 的文件并将以下代码添加到其中。现在我们将创建四种类型的 Bootstrap 标签页，如下所述

src/app/app.component.html

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

ng serve

当我们运行此命令时，将生成以下输出