• 技术文章 >web前端 >前端问答

    ngx bootstrap是什么

    长期闲置长期闲置2022-08-01 18:07:34原创153

    “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是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:bootstrap与jquery是什么关系 下一篇:html5不能用align吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• bootstrap中有弹出层吗• bootstrap是自适应的吗• bootstrap是国内开发的吗• bootstrap怎么清除浮动的样式• 什么是bootstrap自适应
    1/1

    PHP中文网