没有使用Bootstrap for Angular呈现的样式

时间:2017-08-28 09:47:28

标签: css twitter-bootstrap angular sass bootstrap-4

我已使用以下命令安装了NgbBootstrap 4。当然,根模块也会导入包。

  

npm install @ ng-bootstrap / ng-bootstrap --save
  npm install bootstrap @ next --save

在代码中,我正在尝试添加以下指令。然而,唯一呈现的是关闭 - 交叉按钮和我输入的文本只是在无聊的情况下 - 没有边框,框,颜色等。

<ngb-alert type="info">dsdsdds</ngb-alert>

不确定如何进一步排除故障,因为googlearching没有产生任何影响。建议?

2 个答案:

答案 0 :(得分:2)

NgBootstrap网站网站上的误导性部分是他们只专注于指令框架,将样式全部留给开发人员。

所以,基本上,似乎CSS和/或SCSS仍然应该由编码器提供。解决方案是自己设计样式,或者使用以下语句从Bootstrap的公开发行中抢夺它们,这是非常明智的,无疑更快。

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

答案 1 :(得分:0)

将bootstrap依赖项添加到angular.json(Angular版本6和更高版本)或angular-cli.json(对于低于6的Angular版本)中的样式数组中。

例如对于有角度的版本8,这目前对我有用

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

您可能需要根据node_modules所在的位置来更新引用。

我也错过了这个问题,因为我错过了该部分

  

安装完以上依赖项

在参考Angular和Bootstrap并在进行故障排除时找到此页面的文档中。

建议使文档更清晰明了地显示一个完整的示例,例如以ng new开头。