跟着慕课网的课程学习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. Redhat 离线安装 Docker (Community from binaries)

    需求 在离线环境安装Docker (Community版),因为Enterprise版要花钱.当然资金充裕的客户可参考https://docs.docker.com/install/linux/doc ...

  2. 【错误】【vscode】"'#' not expected here"

    今天使用vscode发现完整的代码报错了,但依然可以运行

  3. SpringBoot 2 HTTP转HTTPS

    @Bean public TomcatServletWebServerFactory servletContainer() { TomcatServletWebServerFactory tomcat ...

  4. .NETCore C# 中级篇2-4 一文带你完全弄懂正则表达式

    .NETCoreCSharp 中级篇2-4 本节内容为正则表达式的使用 简介 有的时候,你是否有过这种需求:判断一个Ip地址.邮箱.密码规则是否合法.如果让你使用if一类的传统方法进行处理,你肯定会被 ...

  5. bat 下 字符串拆分 类似 split 可以使用 for /f delims

    @echo offset strin=AA,BB,CC,DDfor /f "tokens=1,2,3,4 delims=, " %%a in ('echo %strin%') do ...

  6. 干货 | Elasticsearch、Kibana数据导出实战

    1.问题引出 以下两个导出问题来自Elastic中文社区. 问题1.kibana怎么导出查询数据? 问题2:elasticsearch数据导出 就像数据库数据导出一样,elasticsearch可以么 ...

  7. C#之项目常用方法之静态扩展

    一般项目中我们经常用到数据Json的序列化与反序列化,为了方便在需要的地方快速使用,一般建议都封装为静态扩展方法,在需要的地方可直接使用. 而目前C#项目中序列化一般都是用的 Newtonsoft.J ...

  8. 高并发下，调整IIS相关的设置，以提高服务器并发量

    1.修改 IIS 队列长度 参考资料:https://docs.microsoft.com/zh-cn/previous-versions/office/communications-server/d ...

  9. RocketMQ 4.3.2 standalone Installation and Configuration

    1 Download RockeMQ Package: You need to download it and put it to the OS Image. wget http://apache.c ...

  10. C/C++ 修改系统时间，导致sem_timedwait 一直阻塞的问题解决和分析

    修改系统时间,导致sem_timedwait 一直阻塞的问题解决和分析 介绍 最近修复项目问题时,发现当系统时间往前修改后,会导致sem_timedwait函数一直阻塞.通过搜索了发现int sem_ ...