ngx bootstrap怎么安装使用

本篇内容主要讲解“ngx bootstrap怎么安装使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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(),
  ],
})

然后就可以使用啦

到此，相信大家对“ngx bootstrap怎么安装使用”有了更深的了解，不妨来实际操作一番吧！这里是蜗牛博客网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。