ngx bootstrap是什麼

「ngx-bootstrap」是一個angular的一個UI框架，是Angular快速繼承bootstrap3或bootstrap4元件的最佳方式，可以有效地提高開發效率；可以利用「npm install ngx-bootstrap  --save ”指令進行安裝“ngx-bootstrap”。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

ngx bootstrap是什麼

ngx- bootstrap 是angular的一個UI框架，是Angular快速整合Bootstrap 3或Bootstrap 4元件的最佳方式。 ngx-bootstrap可以提高開發效率。

這裡使用的是@angular/cli 8.2.5，與bootstrap4

1.安裝ngx-bootstrap

----在項目目錄開啟cmd控制台輸入

----使用」–save「寫入依賴

npm install ngx-bootstrap  --save
// 也可以用国内的淘宝镜像快速安装
cnpm install ngx-bootstrap --save

2.在專案中引入對應的css

在angualr.json檔案中的styles全域樣式中加入對應的路徑

 "styles": [
              "../node_modules/bootstrap/scss/bootstrap"
            ],

#3.匯入依賴

引入全域css樣式後想要使用對應的元件還需要在對應的module中導入相關依賴才能正常使用

這裡引入折疊組件與tab選項卡組件

首先在頭部引入組件

import {CollapseModule, TabsModule} from 'ngx-bootstrap';

其次需要在@NgModule中的imports中聲明

@NgModule({
  imports: [
    TabsModule.forRoot(),
    CollapseModule.forRoot(),
  ],
})

然後就可以使用啦

相關推薦：bootstrap教程

#

以上是ngx bootstrap是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！