Angular集成Bootstrap库
1、生成Angular7工程
运行命令:
ng new angular-ng-bootstrap
2、集成Bootstrap4
运行命令:
npm install bootstrap
在angular-ng-bootstrap\angular.json文件加入Bootstrap4样式:
"node_modules/bootstrap/dist/css/bootstrap.min.css"
3、集成Bootstrap小部件ng-bootstrap4
3.1、依赖
此存储库包含一组基于Bootstrap标记和CSS的本机Angular指令。因此,不需要依赖jQuery或Bootstrap的JavaScript。
3.2、版本
以下是ng-bootstrap 的Angular和Bootstrap 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.js或bootstrap.min.js添加到我的项目中吗?
不,ng-bootstrap的目标是完全取代组件的JavaScript实现。你也不应该包括其他依赖项,如jQuery或popper.js。它不是必需的,可能会干扰ng-bootstrap代码。
3.3、支持的浏览器
我们努力支持Bootstrap 4和Angular支持的相同浏览器和版本,以较严格的为准。检查Angular和Bootstrap的浏览器支持说明。
我们的代码会在所有支持的浏览器上自动测试。
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。