「ngx-bootstrap」是一個angular的一個UI框架,是Angular快速繼承bootstrap3或bootstrap4元件的最佳方式,可以有效地提高開發效率;可以利用「npm install ngx-bootstrap --save ”指令進行安裝“ngx-bootstrap”。
本教學操作環境:Windows10系統、bootstrap5版、DELL G3電腦
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中文網其他相關文章!