如何将Bootstrap添加到Angular中【逐步】

HTML、JavaScript和CSS是前端开发的支柱之一。Angular是最常用的用于构建客户端应用程序的JavaScript框架之一。另一方面，Bootstrap是最流行的用户界面（UI）框架之一。

框架是一个预先构建的代码、工具和库的集合，提供了一种预定义的构建应用程序的方式。Bootstrap和Angular都是框架。

本文将介绍每个框架，并讨论结合这两种技术的好处以及如何将它们结合起来创建外观精美且功能强大的应用程序。

什么是Bootstrap？

Bootstrap是一个用于创建移动优先应用程序的免费前端工具包。这个HTML、CSS和JavaScript framework具有一个大量的可重用代码片段的集合，开发人员可以在项目的各个部分使用。

这个框架具有各种功能的设计模板，比如按钮、模态框、图片轮播、表格、导航等等。Bootstrap有详细的文档，使其易于使用。

什么是AngularJS？

AngularJS是一个JavaScript框架，它扩展了HTML的语法，超越了常规的标记语言。该框架引入了数据绑定等功能，允许开发人员在使用HTML时避免创建响应式网页的复杂过程。

AngularJS采用了模型-视图-控制器（MVC）框架，应用程序的逻辑和用户界面之间有明确的分离。开发人员可以使用AngularJS来创建链接_3>、社交网络应用程序、电子商务平台、内容管理系统等等。

在Angular中使用Bootstrap的好处

• 预构建的UI组件：您不必从头开始创建导航栏、按钮、轮播和卡片，因为Bootstrap有预构建的代码片段可以使用。因此，开发人员可以更多地关注功能，而Bootstrap负责基本结构和样式。
• 可定制：预构建的组件提供了样板代码。然而，在您的应用程序上，您可以自定义代码。例如，如果您从Bootstrap中获取一个卡片，您可以更改各种元素，如图像和文本，以适应您的需求。
• 响应式：现代网页用户使用各种设备浏览，从智能手机和平板电脑到计算机。您不必为每个屏幕大小创建一个应用程序，因为Bootstrap提供了响应式的Web应用程序。
• 带来一致的样式：一个好的Web应用程序应该在不同页面上具有一致的外观和感觉。使用Bootstrap的元素和组件可以帮助您实现这个目标。
• 强大的社区：这个框架拥有众多的资源和强大的文档，并得到许多开发人员的支持。

先决条件

#1. Node.js

这是一个JavaScript运行时环境，您将使用它在浏览器之外运行JavaScript代码。您可以通过运行以下命令来检查Node.js的当前版本：

node -v

如果尚未安装，可以从official website安装它。

#2. Node Package Manager（NPM）

NPM将管理您Angular应用程序所需的所有关联包。安装Node.js时，默认会安装NPM。您可以使用以下命令检查当前版本：

npm -v

#3. Angular CLI

这是一个命令行工具，我们将用它来创建Angular应用的基本结构。您可以使用此命令链接_5进行安装；

npm install -g @angular/cli

#4. 集成开发环境（IDE）

这是您将编写代码的地方。您可以使用任何支持JavaScript的IDE，如链接_6或链接_7。

如何将Bootstrap添加到Angular

我们现在拥有所有创建Angular应用所需的工具。有两种主要方法可以将Bootstrap添加到Angular；1. 使用NPM安装Bootstrap。2. 使用CDN链接

方法 1：使用NPM

我们可以使用NPM将整个Bootstrap库安装到我们的项目中。按照以下步骤进行操作；

步骤 1：使用Angular CLI设置基本应用程序结构

一个典型的Angular应用程序有很多文件。我们将为我们的应用程序命名为angular-bootstrap-mockup（您可以给您的应用程序任何您喜欢的名称）。使用以下命令设置您的应用程序；

ng new angular-bootstrap-mockup

您将会回答以下问题；

• 是否要添加Angular路由？（y/N）输入y
• 您想要使用哪种样式表格式？选择CSS

设置完成后，您在终端上会看到类似于这样的内容。

进入创建的项目并进行第2步。您可以使用此命令；

cd angular-bootstrap-mockup

在代码编辑器中打开项目。项目的结构如下所示；

步骤 2：安装bootstrap和bootstrap icons。

运行以下命令以安装这两个；

npm install bootstrap bootstrap-icons

步骤 3：在angular.json文件中引入Bootstrap

在您的应用程序的根文件夹中找到angular.json文件并更改以下行；

"styles": [

  "node_modules/bootstrap/scss/bootstrap.scss",

  "node_modules/bootstrap-icons/font/bootstrap-icons.css",

  "src/styles.scss"

],

"scripts": [

  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

]

步骤 4：安装ng-bootstrap

Ng-bootstrap是建立在Bootstrap框架之上的一组Angular UI组件。该库中的不同组件设计用于与AngularJS配合使用。

使用以下命令进行安装；

npm install @ng-bootstrap/ng-bootstrap

步骤 5：修改app.module.ts以包含NgbModule。

使用以下内容更改app.module.ts文件的内容；

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    NgbModule,

    AppRoutingModule,

  ],

  providers: [

  ],

  bootstrap: [

    AppComponent,

  ],

})

export class AppModule {

}

步骤 5：修改app.component.ts

将英文翻译成简体中文，保留，及HTML标签。

import { Component } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent {

  constructor(private modalService: NgbModal) {

  }

  public open(modal: any): void {

    this.modalService.open(modal);

  }

}

步骤6：向app.component.html文件中添加Bootstrap元素

在Bootstrap网站上有很多可供选择的components。我们将创建一个简单的导航栏并添加两个按钮。

将app.component.html的内容更改如下：

  


    Home

  

  


    Services

  

  


    About

  

  


    博客

  



Angular

Bootstrap

步骤7：运行您的应用程序

使用以下命令：

ng serve

当Angular开发运行时，您可以在浏览器上打开http://localhost:4200/。

方法2：使用CDN链接将Bootstrap添加到Angular中

这种方法允许您直接链接到存储Bootstrap文件的Content Delivery Network（CDN）。

我们可以在新项目中使用这种方法创建多个按钮。按照以下步骤进行操作：

步骤1：创建一个新的Angular项目

我们将将应用程序命名为angular-bootstrap-cdn。（您可以选择任何名称）。

运行此命令：

ng new angular-bootstrap-cdn

安装完成后，更改目录并在代码编辑器中打开您的项目。您可以使用此命令进入项目目录：

cd angular-bootstrap-cdn

步骤2：在index.html文件中包含CDN链接

找到部分中的src/index.html文件和CDN链接。

……

  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

………

步骤3：将Bootstrap代码添加到app.component.html文件中

找到src/app/app.component.html文件。

您可以将此代码添加到文件中：

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Link

步骤4：运行您的应用程序

ng serve

常见问题

您可以在同一个项目中同时使用Bootstrap和Angular Material吗？

可以。Bootstrap和Angular Material都是用于实现相同目的的UI库。然而，在处理相同的组件时，不应同时使用两个库，因为它们可能会冲突。例如，如果您想创建一个登录页面，请根据可用组件选择其中一个。

哪个版本的Bootstrap与Angular兼容？

截至撰写本文时，Bootstrap的当前版本为v5.3.0-alpha2。另一方面，Angular的当前版本是Angular 15。Bootstrap 4的任何内容都与各种Angular版本兼容。然而，在结合这两种技术时，始终要查看Bootstrap和Angular官方网站的文档。

使用Bootstrap和Angular可以构建哪些项目？

使用Bootstrap和Angular构建应用程序的性质没有限制。您可以使用这两个工具构建单页应用程序，社交平台，仪表板和管理面板。您还可以使用Ionic框架与Angular一起创建移动应用程序。

Angular是JavaScript还是TypeScript框架？

Angular是一个JavaScript框架。然而，Angular是用TypeScript编写的，TypeScript是JavaScript的超集。TypeScript引入了JavaScript中不可用的新功能。因此，您可以在Angular应用程序中同时使用TypeScript和JavaScript。

结论

您现在可以放心地使用两种最流行的前端框架Angular和Bootstrap来创建各种应用程序。

选择的方法取决于用例和您想创建的应用程序的类型。

尽管CDN方法看起来很简单，但也有各种缺点。最大的挑战是应用程序的安全性，因为黑客可以使用CDN向您的网站推送恶意脚本。

使用NPM安装Bootstrap可以让您对所包含在应用程序中的代码有控制权。然而，这种方法可能会耗费时间，因为您需要下载所有依赖项。

请查看how to add Bootstrap to a React app。

相关