详解在Angular项目中添加插件ng-bootstrap


Posted in Javascript onJuly 04, 2017

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>

测试结果

详解在Angular项目中添加插件ng-bootstrap

示例代码

angular + ng-bootstrap

参考文章

NG Bootstrap - Angular directives specific to Bootstrap 4

Bootstrap 4 components, powered by Angular

ngx-translate core

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
js倒计时小程序
Nov 05 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 #Javascript
Node.js使用gm拼装sprite图片
Jul 04 #Javascript
JavaScript中document.referrer的用法详解
Jul 04 #Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP源码之explode使用说明
2011/08/05 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
缴纳养老保险的证明
2014/01/10 职场文书
领导调研接待方案
2014/02/27 职场文书
迎国庆演讲稿
2014/09/05 职场文书
班主任先进事迹材料
2014/12/17 职场文书
中标通知书格式
2015/04/17 职场文书
小学生暑假生活总结
2015/07/13 职场文书
公司晚宴祝酒词
2015/08/11 职场文书