如何在角度2中使用引导程序4?

aqwsez:

我正在构建一个用打字稿编写的angular 2应用程序。它会结合使用bootstrap 4框架和一些自定义主题,这可能吗?

“ ng2-bootstrap” npm软件包不起作用,因为它不允许我使用bootstrap css类,而是提供了自定义组件。http://github.com/valor-software/ng2-bootstrap

在我使用sass的angular 2项目中,是否可以从源代码构建bootstrap 4,因为它也使用sass进行样式设置?

mahatmanich:

Angular2 CLI的Bootstrap4 alpha(也适用于Angular4 CLI)

如果您使用angular2 cli / angular 4 cli,请执行以下操作:

npm i bootstrap@next --save

这会将引导程序4添加到您的项目中。

接下来转到您的src/style.scsssrc/style.css文件并在其中导入引导程序:

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

如果您使用的是scss,请确保在以下位置将默认样式更改为scss .angular-cli.json

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS组件

自举JS组件来工作,你仍然需要进口bootstrap.js.angular-cli.jsonscripts (这应该自动发生)

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

2017年 9月13日更新:Boostrap 4 Beta现在使用popper.js而不是tether.js。因此,根据您使用的版本,在脚本中导入tether.js(alpha)或popper.js(beta)。感谢您的注意@MinorThreat

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章