logo标签列表

如何使用ng2-bootstrap从Bootstrap 3切换到Bootstrap 4？

twitter-bootstrapangularng2-bootstrap
3

我正在为一个Angular 2项目使用ng2-bootstrap。

这个包支持Bootstrap 3和4。安装后，默认使用Bootstrap 3。我没有发现任何有关切换的信息。

我如何从Bootstrap 3切换到Bootstrap 4？我需要在tsconfig.json文件中编写什么吗？

谢谢！

1
他们说“它与v3和v4兼容”，但文档中却没有任何说明如何切换，这完全令人困惑 :-( - Simon_Weaver
3个回答
4
实际上，Vamsi的答案在当前版本中对我不起作用。我查看了源代码，这个可以工作：
将以下内容放置在html的<head>顶部：
<script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
</script>
你把代码放在哪里了？ 你应该把代码放在应用程序的主要组件之前。 - Vamsi
你可以在这里看到，附加 window.__theme 并没有做任何事情，他们使用该值根据其值更改 Ng2BootstrapConfig.theme。 https://github.com/valor-software/ng2-bootstrap/blob/development/demo/index.ts#L26 - Vamsi
这个解决方案对我有效，而@Vamsi的则不行。使用带有Webpack Starter Kit的RC.3。 - SimonHawesome
4

您需要将主题设置为bootstrap4。

import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';    

Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

注意: 以上代码应该在你的主组件之前使用，与你将使用angular2的 enableProdMode(); 相同的位置。

谢谢，但它显示“模块'ng2-bootstrap'没有导出成员'Ng2BootstrapConfig'。”“模块'ng2-bootstrap'没有导出成员'Ng2BootstrapTheme'。” - Hongbo Miao
请确保您正确引用它，它们正在导出，如此处所示：https://github.com/valor-software/ng2-bootstrap/blob/master/components/ng2-bootstrap-config.ts - Vamsi
谢谢，@Vamsi。抱歉回复晚了。我的问题是关于Angular2的，所以你的答案是正确的。然而，我实际上创建了一个angular2-meteor项目。我认为问题在于Ng2BootstrapConfig和Ng2BootstrapTheme没有在ng2-bootstrap.d.ts文件中导出。因此，我创建了一个问题，https://github.com/valor-software/ng2-bootstrap/issues/114 - Hongbo Miao
在定义你的主应用组件之前，就是你将使用Angular2的 enableProdMode(); 的相同位置。 - Vamsi
1

简单：

卸载boostrap包 npm uninstall --save bootstrap

安装boostrap 4包 npm install --save bootstrap@4.0.0-alpha.5

由于ng2-bootstrap适用于这两个包，它只需检测已安装的bootstrap包即可。对我来说很有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接