Angular开发 使用 ngx-bootstrap作为样式库

简介: ngx-bootstrap里面可以复制你想要的样式组件,官方有介绍怎么使用,不过本人稍微修改了下使用ngx-bootstrap的步骤1、npm install ngx-bootstrap –save2、npm install bootstarap –save-dev3、在angular-cli.

ngx-bootstrap里面可以复制你想要的样式组件,官方有介绍怎么使用,不过本人稍微修改了下


使用ngx-bootstrap的步骤

  • 1、npm install ngx-bootstrap –save
  • 2、npm install bootstarap –save-dev
  • 3、在angular-cli.json文件中添加bootstrap为全局样式
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
  • 1
  • 2
  • 3
  • 4
  • 4、根据官方文档中你需要使用什么样式就要在app.module.ts注入
import { AccordionModule,AlertModule,ButtonsModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AccordionModule.forRoot(),
    AlertModule.forRoot(),
    ButtonsModule.forRoot()
  ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 5、直接官网复制代码
相关文章
|
5月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
49 0
|
7月前
|
开发框架 前端开发 测试技术
什么是 Angular 企业级应用开发中的 Breaking Change
什么是 Angular 企业级应用开发中的 Breaking Change
50 0
|
8月前
|
Web App开发 存储 前端开发
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
43 0
|
1月前
|
安全 API 开发者
Angular angular-oauth2-oidc 库的使用概述
Angular angular-oauth2-oidc 库的使用概述
13 0
|
4月前
|
存储 搜索推荐 API
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
44 0
|
6月前
|
Web App开发 缓存 前端开发
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
52 0
|
6月前
|
开发框架 前端开发 JavaScript
推荐一个前后端分离.NetCore+Angular快速开发框架
推荐一个前后端分离.NetCore+Angular快速开发框架
65 0
|
7月前
|
JavaScript 前端开发 测试技术
angular框架怎么从0到1进行开发
angular框架怎么从0到1进行开发
38 0
|
7月前
|
存储 JavaScript 前端开发
什么是 Angular 预构建库
什么是 Angular 预构建库
27 0
|
7月前
|
存储 JavaScript 前端开发
关于 Subscription 在 Angular 开发中的应用
关于 Subscription 在 Angular 开发中的应用
58 0