ngx bootstrap是什麼

WBOY
發布: 2022-08-01 18:07:34
原創
2877 人瀏覽過

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

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!