zoukankan      html  css  js  c++  java
  • Angular中使用bootstrap样式

    Angular中使用bootstrap样式

    Angular中引入bootstrap的方法


    方法1:在Angular.json中的styles数组中添加bootstrap路径
    如下所示:

    "styles": [
        "src/styles.css",
        "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
    

    这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不同,因此对应的路径也有可能需要作出修改。


    方法2:通过在styles.css中使用@import 进行引入。
    由于styles.css是整个项目的全局样式,因此可以在这里通过@import直接引入,也能够全局生效,这里同样需要注意路径问题。
    路径中不需要带node_modules

    @import  url('bootstrap/dist/css/bootstrap.min.css')
    
    

    Angular中引入bootstrap不生效的解决办法

    在进行Angular开发时,使用了bootstrap样式。发现bootstrap的样式无法生效。引用方式如下:
    Angular.json中修改styles数组,

    "styles": [
        "src/styles.css",
        "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
    

    仔细检查路径后发现没有问题,但是样式总是无法生效。查看控制台发现元素没有bootstrap的样式。说明bootstrap没有生效。然后在node_module中查找发现存在两个跟bootstrap相关的文件,其中一个是我们引用的bootstrap,另外一个是带下划线和@版本的bootstrap。

    _bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css
    

    这个文件里面具有各种css样式设置。因此,我们尝试了将这个文件进行了引入。

    "styles": [
        "src/styles.css",
        "./node_modules/_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css"
    ]
    

    最后发现bootstrap样式果然生效了。通过在网上查找发现:原来使用淘宝的cnpm进行模块安装时,最终带下划线带@符号的才是模块文件,其他的文件夹只是模块文件的快捷方式。所以我们如果要引用第三方模块,必须引入带下划线的模块,而不能使用快捷方式。

    参考文章:
    angular6使用angular-cli构建项目,引用bootstrap样式无效

  • 相关阅读:
    让用户舒服起来 10个改善UI的技术
    Powerpoint快捷键大全
    自制Flash FLV视频播放器
    Firefox与IE在CSS样式表中的差异
    让你每天都充满积极性的五个方法
    asp.net 2实用技术汇总
    春季要健康 “排毒”三步走
    皮肤变好必遵守洗脸九法
    经典博客收集
    教你一招让网页用上漂亮的11PX中文字体
  • 原文地址:https://www.cnblogs.com/yinhaiying/p/11180025.html
Copyright © 2011-2022 走看看