文档章节

angular 2 cli 下使用 ng-bootstrap

十万猛虎下画山
 十万猛虎下画山
发布于 2017/09/06 14:40
字数 331
阅读 43
收藏 0

地址 需要翻墙:https://ng-bootstrap.github.io/#/home

Dependencies

This repository contains a set of native Angular directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • Angular (requires Angular version 4 or higher, tested with 4.0.3)
  • Bootstrap CSS (tested with 4.0.0-beta
  •  
  • Bootstrap要单独安装妈蛋的。
  • npm install bootstrap@4.0.0-beta
  • 我说一直报错找不到css呢,css要放在angular-cli.json的style中 )
     "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "styles.css"
          ],

     

Should I add bootstrap.js or bootstrap.min.js to my project?

No, the goal of ng-bootstrap is to  completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

Supported browsers

We strive to support the same browsers and versions as supported by both Bootstrap 4 and Angular, whichever is more restrictive. Check browser support notes for Angular and Bootstrap.

Our code is automatically tested on all the supported browsers.

Installation

After installing the above dependencies, install ng-bootstrap via: 

(安装完上述依赖之后,安装@ng-bootstrap模块和ng-bootstrap样式)
npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

© 著作权归作者所有

共有 人打赏支持
十万猛虎下画山
粉丝 4
博文 107
码字总数 73582
作品 0
西城
程序员
私信 提问
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
09/29
0
0
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
Angular CLI 常用命令

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。本文总结了在实际项目中经常会用到的 Angular CLI 命令。 获取帮助() 等同于,跟所有的其他命令行一样...

waylau
11/09
0
0
如何利用Angular-Cli创建库

创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库 一.ng-packagr ng-packagr已集成到angular-cli中,...

BIRD
11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
今天
5
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
3
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
今天
4
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部