详解在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实现日期级联效果
Jan 23 Javascript
浅谈JavaScript字符集
May 22 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
用js实现in_array的方法
2013/11/05 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
利用python获取Ping结果示例代码
2017/07/06 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
亮剑精神观后感
2015/06/05 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
详解Vue router路由
2021/11/20 Vue.js
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技