【Angular】如何在项目中应用Bootstrap【备忘录】

1 年 ago

雅, 悟

1 minute

创建 Angular 项目

> ng new angular-bootstrap

前往Angular项目

> cd angular-bootstrap

将Bootstrap安装到Angular项目中。

> npm install --save bootstrap
> npm install --save @ng-bootstrap/ng-bootstrap
> ng add @angular/localize

修改配置文件

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

将内容添加到app.module.ts文件中

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

app.component.html的修改

<div class="form1">
  <div class="form-group">
    <input 
      type="text" 
      class="form-control"/>
  </div>
  <button 
    class="btn btn-primary">OK</button>
</div>

结束了！