Angular学习笔记(二十六)在angular中使用ng-bootsrtap之初体验

本文记录了在Angular项目中使用ng-bootstrap的过程,包括ng-bootstrap的概念、特点和使用步骤。ng-bootstrap是基于Angular和Bootstrap 4的TypeScript组件库,它的API完全在Angular环境中可用。文章介绍了如何全局安装ng-bootstrap,引入模块,使用Accordion组件,并解决样式问题,提供了通过CDN或安装bootstrap来引入样式的两种方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在一个angular项目中使用ng-bootstrap,初步入门,所以记录一下。

这里查看官方文档

什么是ng-bootstrap

概念:基于Angular 的 Bootstrap组件
构架:TypeScript+bootstrap 4 CSS框架
特点:其API在Angular是可用的,不需要第三方js

如何使用ng-bootstrap

1.全局安装ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

2.在angular项目中引入module

//app.module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    //在这里,加入
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

3.使用Accordion组件

使用ng g component accordionDemo新建组件,将Accordion组件代码放进accordionDemo中

展示图:
这里写图片描述

4.基本效果出来了,但是少了样式

因为ng-bootsrtap是基于angular和bootstrap的,所以样式的引用可以使用

方法一: bootstrap的CDN:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

方法二:安装bootstrap
npm install bootstrap
在 .angular-cli.json中引入样式:

"styles": [
        "styles.css",
        //引入bootstrap样式
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ]

这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值