在angualr4项目中引入ng-bootstrap

<h1>注意本教程只适用于angular4</h1>

<h2>虽然网上也有很多教程,我也按着好几个教程做了多遍,但都不对,可能是angular更新太快,导致很多教程已经不能用了,总之一路都是坑,我摸索了很久得出一个可行的方案,希望小伙伴们都能避免入坑</h2>

<p>ng-bootstrap应该是针对angular4设计的,和官方快速搭建angular脚手架@angular/cli是对应的,所以请<b>按如下步骤导入ng-bootstrap<b></p>

<h2>1.用 npm install -g @angular/cli 安装angualr4<h2>

<h2>2.用

npm install --save @ng-bootstrap/ng-bootstrap
导入ng-bootstrap<h2>

<h2>3.在你的工程里的app.module.ts中添加红色框里的内容添加<h2>

<h2>4.在工程里的/src/assets下添加一个bootstrap/bootstrap.min.css,(样式文件自己手动添加)如图如图<h2>

<h2>5.最后在工程里的style.css文件 下 ,添加这句代码:

@import "assets/bootstrap/bootstrap.min.css";
<h2>

<h2>到这里就结束了,你可以用如下代码验证一下是否引入成功:

< p >
< ngb-alert [ dismissible]= "false" >
< strong >Warning! </ strong > Better check yourself, you're not looking too good.
</ ngb-alert >
</ p >
把这段代码放在你的组件的html模板中</h2>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值