Angular UI ngx-bootstrap 使用说明

简介: 序言:  ngx-bootstrap包含了由Angular提供支持的所有核心的Bootstrap组件。我们可以直接通过命令行安装后使用,同时使用该系列的组件不需要包含原始的JS组件。

序言:

  ngx-bootstrap包含了由Angular提供支持的所有核心的Bootstrap组件。我们可以直接通过命令行安装后使用,同时使用该系列的组件不需要包含原始的JS组件。但是我们需要引入bootstrap的css样式。

步骤:

1、安装

1.1 通过npm安装ngx-bootstrap

  npm install ngx-bootstrap --save

1.2 通过cnpm 安装ngx-bootstrap

  cnpm install ngx-bootstrap --save

 

2、添加bootstrap样式到index.html中

2.1 bootstrap3的样式

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

2.2 bootstrap4的样式

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

 

3、对应组件的用法,如Accordion组件

复制代码
// RECOMMENDED (doesn't work with system.js)
import { AccordionModule } from 'ngx-bootstrap/accordion';
// or
import { AccordionModule } from 'ngx-bootstrap';

@NgModule({
  imports: [AccordionModule.forRoot(),...]
})
export class AppModule(){}
复制代码

具体的组件请参考http://ngx-bootstrap.com/#/


相关文章
|
2月前
|
XML 开发框架 前端开发
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
17 0
|
13天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
7月前
|
前端开发 JavaScript API
关于 Angular 应用的 Bootstrap 过程
关于 Angular 应用的 Bootstrap 过程
33 0
|
7月前
|
JSON 前端开发 JavaScript
SAP UI5 index.html 里的 bootstrap script 介绍
SAP UI5 index.html 里的 bootstrap script 介绍
30 0
|
7月前
|
缓存 Java C++
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
Spartacus 在技术和架构( library 发布方式 vs 模板发布方式,headless vs embedded,Angular vs JSP 技术栈)等各方面,都是一种全面的从 Accelerator 的完整范式转变。因此,对于 Commerce Cloud 已经使用 Accelerator 的客户来说,并没有直接的方法可以从基于 Accelerator 的 Storefront 迁移到使用 Spartacus library 的店面。
46 0
|
11月前
|
前端开发 JavaScript 开发者
前端封装库/工具库的UI框架之Bootstrap
随着互联网时代的到来,对于Web应用的UI设计和开发变得越来越重要。而为了更高效地进行UI开发,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个颇受欢迎的UI框架就是Bootstrap。
127 0
|
Web App开发 前端开发 JavaScript
Web前端快速开发 Bootstrap 响应式UI框架
Web前端快速开发 Bootstrap 响应式UI框架
460 0
Web前端快速开发 Bootstrap 响应式UI框架
|
前端开发
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
|
容器
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
116 0
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
|
API 网络架构
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称