欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

程序员文章站 2022-06-25 10:58:58
大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案。 可能大家在引入试过col-md之后觉得bootstrap是ok的,其实这个navbar-inverse不显示黑色的问题在于bootstrap3.0和4.0之间的更新, ......

大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案。

Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

可能大家在引入试过col-md之后觉得bootstrap是ok的,其实这个navbar-inverse不显示黑色的问题在于bootstrap3.0和4.0之间的更新,

属性发生了改变。

错误案例:

Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

 

本来该变成黑色的导航条却还是白色。

 

解决方案:

1.

Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

修改navbar-inverse为navbar-dark bg-dark

2.

或者在组件html页面直接引用如下bootstrap3,顺便把之前配置的style和script里面的导入删除

<!-- <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
 
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->

 

关于jquery中$无法识别是因为没有在ts中声明

解决方案

1:

Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

之后就ok了。