重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

ngxbootstrap怎么安装使用

本篇内容主要讲解“ngx bootstrap怎么安装使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ngx bootstrap怎么安装使用”吧!

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都网站建设、满城网络推广、小程序开发、满城网络营销、满城企业策划、满城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供满城建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

“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怎么安装使用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


名称栏目:ngxbootstrap怎么安装使用
网页地址:http://cqcxhl.com/article/pejicd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP