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

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

Admin发表于 2022-09-16 17:55:23578 次浏览

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

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

标签： bootstrap

上一篇： H5、WEB前端、大前端、WEB全栈分别是什么意思

下一篇： bootstrap与jquery的区别和关系如何理解

相关信息推荐

PHP实现插件功能的条件、步骤及代码是什么

2022-11-29 09:53:44　

摘要：php实现插件功能：1、新建函数文件“function.php”，代码内容是“function addAction($hook, $actionFunc){...}”；2、确认插件的Hook点，设置钩子埋入点；3、建立“check_all.php”和“login.php”两个文件，然后在“check_all.php”文件中写入“addAction(...)”即可。

PHP中url中文传参出现乱码怎么办，有哪些解决方法？

2022-01-07 18:31:05　

摘要：PHP中url中文传参出现乱码怎么办?php地址栏传中文后出现乱码的问题还是比较常见的，这篇给大家总结了一些url地址栏传中文乱码的处理方法，能应对多种url中文乱码的情况，有一定的参考价值，对大家学习和工作都有一定的帮助，有需要的朋友可以参考，接下来就跟随小编来看看吧。

常见Java异常面试题汇总，你能答出多少？

2022-02-12 17:53:42　

摘要：这篇文章给大家分享的是常见Java异常面试题。文中介绍了很多Java异常相关的面试题，对大家学习和工作都有一定的帮助，因此分享给大家做个参考，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。