ngx bootstrap是什么

177 阅读 0 评论 117 点赞

我是靠谱客的博主等待画笔，这篇文章主要介绍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 --save1
2
3
npm install ngx-bootstrap  --save
// 也可以用国内的淘宝镜像快速安装
cnpm install ngx-bootstrap --save
登录后复制

2.在项目中引入相应的css

在angualr.json文件中的styles全局样式中加入相应的路径

复制代码 "styles": [
              "../node_modules/bootstrap/scss/bootstrap"
            ],1
2
3
"styles": [
              "../node_modules/bootstrap/scss/bootstrap"
            ],
登录后复制

3.导入依赖

引入全局css样式后想要使用相应的组件还需要在相应的module中导入相关依赖才能正常使用

这里引入折叠组件与tab选项卡组件

首先在头部引入组件

复制代码import {CollapseModule, TabsModule} from 'ngx-bootstrap';1
import {CollapseModule, TabsModule} from 'ngx-bootstrap';
登录后复制

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

复制代码@NgModule({
  imports: [
    TabsModule.forRoot(),
    CollapseModule.forRoot(),
  ],
})1
2
3
4
5
6
@NgModule({
  imports: [
    TabsModule.forRoot(),
    CollapseModule.forRoot(),
  ],
})
登录后复制

然后就可以使用啦