详解在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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
vue2中使用less简易教程
Mar 27 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python编程实现12306的一个小爬虫实例
2017/12/27 Python
使用python编写监听端
2018/04/12 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
超简单使用Python换脸实例
2019/03/27 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python实现自动打卡的示例代码
2020/10/10 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
医院门卫岗位职责
2013/12/30 职场文书
欢送领导祝酒词
2015/08/12 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS