详解在Angular项目中添加插件ng-bootstrap
2017-07-04 09:27
676 查看
npm 安装 ng-bootstrap 模块
npm install @ng-bootstrap/ng-bootstrap --save
在 Angular 项目配置
app.module.ts
添加
import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; imports: [ /** * ngx-bootstrap */ NgbModule.forRoot() ],
添加 bootstrap.min.css 样式
在 assets 文件夹下 bootstrap/bootstrap.min.css , 并在 style.css 文件中添加
@import "assets/bootstrap/bootstrap.min.css";
测试
app.component.html
添加代码:
<div> <span> test the ng-bootstrap</span> <div [(ngModel)]="model" ngbRadioGroup name="radioBasic"> <label class="btn btn-primary"> <input type="radio" [value]="1"> Left (pre-checked) </label> <label class="btn btn-primary"> <input type="radio" value="middle"> Middle </label> <label class="btn btn-primary"> <input type="radio" [value]="false"> Right </label> </div> <hr> <pre>{{model}}</pre> </div>
测试结果
示例代码
参考文章
NG Bootstrap - Angular directives specific to Bootstrap 4
Bootstrap 4 components, powered by Angular
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Angular.js与Bootstrap相结合实现表格分页代码
- angularjs封装bootstrap时间插件datetimepicker
- angularJS与bootstrap结合实现动态加载弹出提示内容
- 利用Angularjs和Bootstrap前端开发案例实战
- Angular2中Bootstrap界面库ng-bootstrap详解
- Bootstrap和Angularjs配合自制弹框的实例代码
- AngularJs中Bootstrap3 datetimepicker使用实例
- AngularJS 与Bootstrap实现表格分页实例代码
- Angular ui.bootstrap.pagination分页
- AngularJS Bootstrap详细介绍及实例代码
相关文章推荐
- 在 Angular 项目中添加插件 ng-bootstrap
- 【Angular】Angular项目添加ng-bootstrap插件
- 《Angular2入门系列实践》——如何添加ng-bootstrap插件
- 在 Angular 项目中添加 i18n 插件 ngx-translate
- 详解在 Angular 项目中添加 clean-blog 模板
- angular项目中bootstrap-datetimepicker时间插件的使用
- angular项目中bootstrap-datetimepicker时间插件的使用示例
- 比较全面的Eclipse配置详解(包括智能提示设置、智能提示插件修改,修改空格自动上屏、JDK配置、各种快捷键列表……) Eclipse编辑器基本设置 1、添加行号 在边缘处右
- 添加Bootstrap 到MVC项目中(vs2010)
- MyEclipse项目,使用自带Git插件,添加Git支持(SSH方式)
- AngularJS ngTouch 插件,替代原来的ng-click
- 安卓 cordova批量添加插件到项目
- ionic项目之ngcordova插件
- 如何把应用程序的快捷方式(shortcuts)添加到桌面——(开源项目apps-for-android中的AnyCut项目详解)
- ionic项目之ngcordova插件
- Bootstrap transition.js 插件详解
- 25讲项目实战:自定义菜单插件+添加文章+自定义字段插件
- bootstrap设计网站中添加代码高亮插件
- 关于eclipse添加svn插件及通过svn插件导入maven项目及控制项目的svn忽略文件( Ignored Resources)
- Bootstrap transition.js 插件详解