跟着慕课网的课程学习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. 同时启动多个tomcat,端口修改

    所用Tomcat服务器都为zip 版,非安装版.以 tomcat8 为例: 安装第二个Tomcat完成后,打开 tomcat/conf/server.xml 文件,查找以下三处: 1. 修改http访 ...

  2. c++随笔之编译器编译原理

    /* C++编译器原理:1)首先明白声明与定义是两个不同的概念 extern int i;是声明,int i;是定义 函数就更简单了2)编译分为: 预编译:将宏替换,include等代码拷贝过来 编译 ...

  3. 100天搞定机器学习|Day16 通过内核技巧实现SVM

    前情回顾 机器学习100天|Day1数据预处理100天搞定机器学习|Day2简单线性回归分析100天搞定机器学习|Day3多元线性回归100天搞定机器学习|Day4-6 逻辑回归100天搞定机器学习| ...

  4. Duilib的圆角矩形 抗锯齿优化 弥补RoundRect不足(网易云信borderround版本)

    VListBox class="list" name="list" padding="5,3,5,3" bordersize="1 ...

  5. 史上最全面的SignalR系列教程-4、SignalR 自托管全解(使用Self-Host)-附各终端详细实例

    1.概述 通过前面几篇文章 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 史上最全面的Signa ...

  6. 基于Spring Boot自建分布式基础应用

    目前刚入职了一家公司,要求替换当前系统(单体应用)以满足每日十万单量和一定系统用户负载以及保证开发质量和效率.由我来设计一套基础架构和建设基础开发测试运维环境,github地址. 出于本公司开发现状及 ...

  7. pip安装时使用国内源,加快下载速度

    国内源: 新版ubuntu要求使用https源,要注意. 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.c ...

  8. java线程池,工作窃取算法

    前言 在上一篇<java线程池,阿里为什么不允许使用Executors?>中我们谈及了线程池,同时又发现一个现象,当最大线程数还没有满的时候耗时的任务全部堆积给了单个线程, 代码如下: T ...

  9. 台式机主机u盘安装centos7报错及注意事项

    利用UltraISO制作U盘启动安装台式机CentOS7系统:流程及报错解决 一.制作U盘 1.首先打开UltraISO软件,尽量下载最新版的 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标 ...

  10. HBase的安装和使用

    文章作者:foochane  原文链接:https://foochane.cn/article/2019062801.html 1 Hbase基本介绍 Hbase是一个分布式数据库,可以提供数据的实时 ...