Angular中使用bootstrap样式

Posted yinhaiying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 '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文件夹下面是空的。里面根本没有dist文件,也就不存在css样式了。相反查找到一个跟bootstrap相关的文件:

[email protected]@bootstrap/dist/css/bootstrap.min.css

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

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

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

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

以上是关于Angular中使用bootstrap样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 中使用带有 SASS 的 Bootstrap 4

协调 Angular.js 和 Bootstrap 表单验证样式

如何使用 CSS 更改 Angular-UI Bootstrap Datepicker 弹出窗口的样式?

使用 Bootstrap Angular 6 数据表的分页样式页脚

从 Angular 5 升级到 Angular 6,Bootstrap 按钮样式没有间距

Angular 6 - ng-bootstrap - 样式标签