跟着慕课网的课程学习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. AWS Aurora数据库 Multi-Master 小测

    AWS Aurora Mysql终于推出了Multi-Master,直面硬刚Oracle RAC.在多一份数据库产品选择的小兴奋之余,我们也看看新推出的Multi-Master的特点(包括优缺点). ...

  2. 【0731 | Day 5】Python基础（三）

    Part 10 格式化输出的三种方式 一.占位符 #一般字符串连接/普通形式 ​ name = 'Adela' age = str(22) print('My name is '+ name+ ',' ...

  3. 洛谷 P2016 战略游戏

    题意简述简述 求一棵树的最小点覆盖 题解思路 树形DP dp[i][0]表示第i个点覆盖以i为根的子树的最小值,且第i个点不放士兵 dp[i][1]表示第i个点覆盖以i为根的子树的最小值,且第i个点放 ...

  4. ATX agent+UIautomation2 自动化测试介绍

    纯搬运贴,内容几乎来源于作者的几篇介绍文章,这里做了整合 目前ATX+UIautomator2 处于自动化界的浪口风尖,现在有幸终于有时间对ATX进行了粗浅的了解 为什么要用ATX ATX+UIaut ...

  5. Mina各组件介绍

    Mina各组件介绍 上一篇文章已经系统的介绍了Mina的运行流程,Apache推出的Mina性能上很是高效,上章节我们知道内部有很多的类,各个类之间的依赖也是很多,他们之家都是相互依赖. 下面主要看看 ...

  6. 2015-11-17 linux基础笔记

    21. 可执行权限不代表能够执行,这得看文件内容 22. 还是可以用适当的拓展名表示该文件是什么种类的*.sh  脚本或批处理文件 *Z.*.tar.*.tar.gz.*.zip.*.tgz 压缩文件 ...

  7. Java 迭代接口：Iterator、ListIterator 和 Spliterator

    1. 简介 当我们使用 for 或 while 循环来遍历一个集合的元素,Iterator 允许我们不用担心索引位置,甚至让我们不仅仅是遍历一个集合,同时还可以改变它.例如,你如果要删除循环中的元素, ...

  8. C# 中的数据库操作~存储过程篇Mysql SqlServer

    Mysql 存储过程查询方式 SQL server 普通数据库操作 EF 调用SQL SERVER存储过程 Mysql 存储过程查询方式: public NetPort GetNetdevicePor ...

  9. 单元测试之NUnit二

    NUnit 分三篇文章介绍,入门者可阅读文章,有基础者直接参考官方文档.初次写博客,望大家指点. 导航: 单元测试之NUnit一 单元测试之NUnit二 单元测试之NUnit三 本文介绍常用的NUni ...

  10. ionic 页面动画 ngAnimate

    git 地址: https://github.com/Augus/ngAnimate/ 使用方法: 下载后, 1.引入ngAnimate.js(依赖jquery); 2.引入 ng-animate.c ...