Angular集成Bootstrap库

版权声明:转载请注明出处 https://blog.csdn.net/daqiang012/article/details/88545135

1、生成Angular7工程

运行命令:

ng new angular-ng-bootstrap

参考:https://www.angular.cn

2、集成Bootstrap4

运行命令:

npm install bootstrap

在angular-ng-bootstrap\angular.json文件加入Bootstrap4样式:

"node_modules/bootstrap/dist/css/bootstrap.min.css"

参考:https://getbootstrap.com/

3、集成Bootstrap小部件ng-bootstrap4

3.1、依赖

此存储库包含一组基于Bootstrap标记和CSS的本机Angular指令。因此,不需要依赖jQuery或Bootstrap的JavaScript。

3.2、版本

以下是ng-bootstrap 的AngularBootstrap CSS 的最低要求版本列表:

ng-bootstrap Angular Bootstrap CSS
1.x.x 5.0.2 4.0.0
2.x.x 6.0.0 4.0.0
3.x.x 6.1.0 4.0.0
4.x.x 7.0.0 4.0.0

我应该将bootstrap.jsbootstrap.min.js添加到我的项目中吗?

不,ng-bootstrap的目标是完全取代组件的JavaScript实现。你也不应该包括其他依赖项,如jQuery或popper.js。它不是必需的,可能会干扰ng-bootstrap代码。

3.3、支持的浏览器

我们努力支持Bootstrap 4和Angular支持的相同浏览器和版本,以较严格的为准。检查AngularBootstrap的浏览器支持说明。

我们的代码会在所有支持的浏览器上自动测试。

3.4、安装

安装上述依赖项后,ng-bootstrap通过以下方式安装:

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

安装完成后,您需要导入我们的主模块。

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

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

或者,您只能导入包含所需组件的模块,例如。分页和警报。在这种情况下,得到的束将更小。

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}

参考:https://ng-bootstrap.github.io/#/getting-started

界面截图:

源码下载:

https://github.com/daqiang123/angular-ng-bootstrap.git

 

欢迎加入大华软件学院QQ群交流,群号:665714453。

 

展开阅读全文

没有更多推荐了,返回首页