1. 程式人生 > >Angular開發-ngx-bootstrap的UI元件介紹

Angular開發-ngx-bootstrap的UI元件介紹

ngx-bootstrap官方網站裡面可以複製你想要的樣式元件,官方有介紹怎麼使用,不過本人稍微修改了下

使用ngx-bootstrap的步驟

  • 1、npm install ngx-bootstrap –save
  • 2、npm install bootstarap –save-dev
  • 3、在angular-cli.json檔案中新增bootstrap為全域性樣式
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
  • 4、根據官方文件中你需要使用什麼樣式就要在app.module.ts
    注入
import { AccordionModule,AlertModule,ButtonsModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AccordionModule.forRoot(),
    AlertModule.forRoot(),
    ButtonsModule.forRoot()
  ],
  • 5、直接官網複製程式碼
  • 6、執行效果
    執行效果