“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(), ],})
登录后复制
然后就可以使用啦
相关推荐:bootstrap教程
以上就是ngx bootstrap是什么的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2927521.html