目录
在本教程中，我们将学习如何将Bootstrap 4与Angular 9集成和使用。
我们将看到如何初始化Angular 9项目并将其与Bootstrap 4集成。接下来，我们将使用各种Bootstrap 4 CSS实用程序来创建具有表、表单、按钮、卡片和jumbotrons的响应式布局。
Bootstrap是一个免费的开源CSS框架，用于创建响应式布局，它是移动优先的，并且包含用于排版、表单、按钮和导航等的现成CSS实用程序。
有多种方式将Bootstrap 4与Angular 9应用程序集成。让我们来看一个可能的解决方案示例。
步骤1 –安装Angular CLI v9
让我们从安装最新版本的Angular CLI开始。在您的终端中，运行以下命令：
安装Angular CLI后，让我们通过运行以下命令来初始化Angular 9项目：
$ ng new angular-9-bootstrap-example然后，CLI将询问您：
Would you like to add Angular routing?按Y。
接下来，它将询问您：
Which stylesheet format would you like to use?选择“CSS”。
接下来，我们需要设置Angular表单。
转到src/app/app.module.ts文件，从@angular/forms导入FormsModule，并将其包含在imports数组中，如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
/* ... */
@NgModule({
declarations: [
/* ... */
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }步骤3 –安装Bootstrap 4
初始化Angular 9项目后，让我们继续安装Bootstrap 4并将其与Angular集成。
转到项目的文件夹：
$ cd angular-9-bootstrap-example接下来，使用以下命令从npm安装Bootstrap 4和jQuery：
$ npm install --save bootstrap jquery接下来，转到angular.json文件，并将Bootstrap CSS和JS文件以及jQuery的路径添加到build目标下的styles和 scripts数组，如下所示：
"architect": {
"build": {
[...],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},第4步–创建Angular组件并设置路由
在将Bootstrap 4与Angular 9项目安装并集成后，让我们创建一些组件来测试各种Bootstrap样式。
转到命令行界面并运行以下命令：
$ ng generate component jumbotron
$ ng generate component bootstrap-form
$ ng generate component bootstrap-table接下来，我们需要在路由模块中包括这些组件以启用多个视图。
转到src/app/app-routing.module.ts 文件并按如下所示进行更新：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapTableComponent } from './bootstrap-table/bootstrap-table.component';
import { BootstrapFormComponent } from './bootstrap-form/bootstrap-form.component';
import { JumbotronComponent } from './jumbotron/jumbotron.component';
const routes: Routes = [
{path: "", pathMatch: "full",redirectTo: "home"},
{path: "jumbotron", component: JumbotronComponent},
{path: "bootstrap-form", component: BootstrapFormComponent},
{path: "bootstrap-table", component: BootstrapTableComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }第5步-添加Bootstrap 4Jumbotron
Bootstrap Jumbotron是一种轻巧、灵活的组件，可以选择扩展整个视口，以在您的站点上展示关键的营销信息。
让我们将Bootstrap Jumbotron组件添加到我们的jumbotron页面。
转到src/app/jumbotron/jumbotron.component.html 文件，并添加以下HTML标记：
<div class="jumbotron" style="height: calc(95vh);">
<h1>Angular 9 Bootstrap 4 Demo</h1>
<p class="lead">
This tutorial teaches you how to integrate Bootstrap 4 with Angular 9
</p>
</div>Wu使用内置的.jumbotron类来创建Bootstrap Jumbotron。
第6步-创建Angular Bootstrap 4表
现在，让我们看看如何使用Bootstrap 4表来显示表格数据。
转到src/app/bootstrap-table/bootstrap-table.component.ts文件，并添加一些我们可以显示的数据：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bootstrap-table',
templateUrl: './bootstrap-table.component.html',
styleUrls: ['./bootstrap-table.component.css']
})
export class BootstrapTableComponent implements OnInit {
employees = [
{id: 1, name: "E 001", description: "E 001 des", email: "[email protected]"},
{id: 2, name: "E 002", description: "E 002 des", email: "[email protected]"},
{id: 3, name: "E 003", description: "E 003 des", email: "[email protected]"},
{id: 4, name: "E 004", description: "E 004 des", email: "[email protected]"}
];
selectedEmployee;
constructor() { }
ngOnInit() {
}
public createEmployee(e: {id, name, description, email}){
this.employees.push(e);
}
public selectEmployee(e){
this.selectedEmployee = e;
}
}我们仅定义了两个变量，employees和selectedEmployee用于保存一组雇员和选定的雇员。还有一种将所选雇员分配给selectedEmployee变量的selectEmployee()方法。
接下来，转到src/app/bootstrap-table/bootstrap-table.component.html 文件并按如下所示进行更新：
<div class="container" style="margin-top: 70px;">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees">
<td></td>
<td> </td>
<td> </td>
<td>
<button class="btn btn-primary" (click)="selectEmployee(employee)"> Select</button>
</td>
</tr>
</tbody>
</table>
<div class="card text-center" *ngIf="selectedEmployee">
<div class="card-header">
#
</div>
<div class="card-block">
<h4 class="card-title"></h4>
<p class="card-text">
</p>
</div>
</div>
</div>Bootstrap 4 Card是一种灵活且可扩展的内容容器。它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。如果您熟悉Bootstrap 3，则可以用卡片代替我们的旧面板，wells和缩略图。与这些组件类似的功能可用作card的修饰符类。
我们使用内置.table和.table-hover类创建Bootstrap表，.card，.card-block，.card-title和.card-text类来创建card。
步骤7 –添加Bootstrap 4表单组件
让我们继续向bootstrap-form组件添加Bootstrap样式的表单。
接下来，转到src/app/bootstrap-form/bootstrap-form.component.ts文件并按如下所示进行更新：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'bootstrap-form/-create',
templateUrl: './bootstrap-form/.component.html',
styleUrls: ['./bootstrap-form/.component.css']
})
export class BootstrapForm/Component implements OnInit {
employee : {id, name, description, email} = {id: null, name: "", description: "", email: ""};
constructor() { }
ngOnInit() {
}
createEmployee(){
console.log("Employee created: ", this.employee);
this.employee = {id: null, name: "", description: "", email: ""};
}
}接下来，转到src/app/bootstrap-form/bootstrap-form.component.html文件并按如下所示进行更新：
<div class="container" style="margin-top: 70px;">
<div class="row">
<div class="col-sm-8 offset-sm-2">
<div>
<form>
<div class="form-group">
<label for="id">ID</label>
<input [(ngModel)]="employee.id" type="text" name="id"
class="form-control" id="id" aria-describedby="idHelp" placeholder="Employee ID">
<small id="idHelp" class="form-text text-muted">Enter your employee’s ID</small>
<label for="name">Employee Name</label>
<input [(ngModel)]="employee.name" type="text" name="name"
class="form-control" id="name" aria-describedby="nameHelp"
placeholder="Enter your employee name">
<small id="nameHelp" class="form-text text-muted">
Enter your employee’s name</small>
<label for="email">Employee Email</label>
<input [(ngModel)]="contact.email" type="text"
name="email" class="form-control" id="email" aria-describedby="emailHelp"
placeholder="Enter your employee email">
<small id="nameHelp" class="form-text text-muted">
Enter your employee’s email</small>
<label for="description">Employee Description</label>
<textarea [(ngModel)]="employee.description" name="description"
class="form-control" id="description" aria-describedby="descHelp">
</textarea>
<small id="descHelp" class="form-text text-muted">
Enter your employee’s description</small>
</div>
</form>
<button class="btn btn-primary" (click)="createEmployee()">Create employee</button>
</div>
</div>
</div>
</div>我们使用.form-group和.form-control类来创建Bootstrap表单。
步骤8 –为Angular 9应用程序提供服务
转到命令行界面，然后从项目的文件夹中运行以下命令：
$ ng serve开发服务器将在http://localhost:4200地址启动。
结论
作为回顾，我们已经看到了如何初始化Angular 9项目并将其与Bootstrap 4集成。接下来，我们使用了各种Bootstrap CSS实用程序来创建具有表、表单、按钮、卡片和jumbotron的响应式布局。
