ngx-bootstrap有何用，如何安装何使用

时间2024-03-25 10:20:04发布访客分类其他前端知识浏览345

导读：关于“ngx-bootstrap有何用，如何安装何使用”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“ngx-boo...

关于“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有何用，如何安装何使用”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

bootstrap