如何添加bootstrap到Angular工程

执行

ng new

命令新建一个工程

然后执行下面命令安装bootstrap所需要的组件

npm install --save ng-bootstrap/ng-bootstrapnpm install --save bootstrap@v4.0.0-beta.2npm install --save font-awesome

打开.angular-cli.json文件，添加bootstrap CSS

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

打开app.module.ts文件，初始化ng-bootstap

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';@NgModule({  declarations: [AppComponent, ...],  imports: [NgbModule.forRoot(), ...],    bootstrap: [AppComponent]})export class AppModule {}

打开app.component.html，并输入下面这此测试内容

<div class="jumbotron">  <div class="container">    <ngb-alert type="success" [dismissible]="false">      Bootstrap is working!    </ngb-alert>    <h1>      <i class="fa fa-bath" aria-hidden="true"></i>      And so is Font Awesome!    </h1>  </div></div><div class="container">  <p>    A progress bar:    <ngb-progressbar showValue="true" type="success" [value]="65">    </ngb-progressbar>  </p></div><div class="container">  <ngb-tabset>    <ngb-tab title="Bacon">        <ng-template ngbTabContent>          <p class="mt-4">Content for tab 1.            <button type="button"                    class="btn btn-secondary"                    placement="bottom"                    ngbPopover="A popover in tab 1"                    popoverTitle="Bacon is good">              Click me            </button>          </p>        </ng-template>      </ngb-tab>      <ngb-tab title="Lettuce">        <ng-template ngbTabContent>          <p>Content for tab 2</p>        </ng-template>      </ngb-tab>      <ngb-tab title="Tomatoes">        <ng-template ngbTabContent>          <p>Content for tab 3</p>        </ng-template>      </ngb-tab>    </ngb-tabset></div>

执行

ng server

命令并用浏览器测试