跟着慕课网的课程学习Angular，简直要被bootstrap的问题整死了，样式一直出不来，导航完全没有背景颜色。。

我在网上找了很多都试了，以下方法特别受用

1、把

"../node_modules/bootstrap/dist/css/bootstrap.css"

"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"

全部换成：

"node_modules/bootstrap/dist/css/bootstrap.css"

"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"

仔细看目录结构，它和src是在同一个目录的，所以不用返回上一层，改了这里样式出现了一点点，但是还是没用颜色

2、在网上找了很多答案后知道，bootstrap v3和v4的版本不一样，所以我们默认安装的是v4的，再用v3的样式就会不兼容

重新安装bootstrap v3：

npm install  bootstrap@3.3.7  --save

这个版本参考原博主

然后就perfect了！！！

angular关于Bootstrap样式不起作用问题的更多相关文章

  1. Angular中innerHTML标签的样式不起作用详解

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...

  2. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  3. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  4. Yii2框架bootstrap样式理解

    Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...

  5. Bootstrap里的文件作用

    Bootstrap里的文件分别表示什么?都有什么用? bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-respon ...

  6. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  7. 前端 angular 和 bootstrap 的安装步骤

    1.安装bower模块: npm install -g bower --registry=http://registry.npm.taobao.org 2.创建.bowerrc 文件存放 前端相关的模 ...

  8. 从覆盖bootstrap样式谈css选择器优先级

    样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...

  9. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

随机推荐

  1. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

  2. spring-boot 示例大全

    spring-boot-demo Spring Boot 学习示例,将持续更新... 本项目基于spring boot 最新版本(2.1.7)实现 什么是spring-boot Spring Boot ...

  3. ImageLoader_显示图片

    public class MainActivity extends AppCompatActivity { private ListView lv; private List<Bean.Resu ...

  4. Flink 源码解析 —— Flink JobManager 有什么作用？

    JobManager 的作用 https://t.zsxq.com/2VRrbuf 博客 1.Flink 从0到1学习 -- Apache Flink 介绍 2.Flink 从0到1学习 -- Mac ...

  5. 编程杂谈——Non-breaking space

    近日,意外地遇上件不寻常的事情.在解析PDF文件,读取其中内容的时候,对某一文件的处理,始终无法达到预期的效果. 解析方法如下: public void Parse(string value) { i ...

  6. Go_笔试题记录-不熟悉的

    1.golang中没有隐藏的this指针,这句话的含义是() A. 方法施加的对象显式传递,没有被隐藏起来 B. golang沿袭了传统面向对象编程中的诸多概念,比如继承.虚函数和构造函数 C. go ...

  7. ubuntu16.04安装Ros(kinetic版本)【亲测好用】

    准备 1.ubuntu16.04 64位桌面版 ps:关于系统的下载和安装这里不做介绍,请自行百度,不是介绍重点 2.更改源 图上的几个勾默认是选上的,如果没有选上,选成上图这样(如果修改过勾,点击关 ...

  8. Feign详细构建过程及自定义扩展

    探究清楚 feign 的原理,自定义 feign 功能 **spring-cloud-openfeign-core-2.1.1.RELEASE.jar** 中 **HystrixFeign** 的详细 ...

  9. 图灵学院Java架构师-VIP-【性能调优-Mysql索引数据结构详解与索引优化】

    最近报名了图灵学院的架构专题的付费课程,没有赶上6月份开课,中途加入的.错过了多线程的直播课程,只能看录播了

  10. cogs 80. 石子归并 动态规划

    80. 石子归并 ★★   输入文件:shizi.in   输出文件:shizi.out   简单对比时间限制:1 s   内存限制:128 MB 设有N堆沙(shi)子排成一排,其编号为1,2,3, ...