当前位置: 首页 > 工具软件 > ngx-ui > 使用案例 >

ngx-bootstrap学习笔记

沙岳
2023-12-01

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(),
  ],
})

然后就可以使用啦

 类似资料: