最近在一个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]
})
使用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"
]