twitter-bootstrap - 如何在 angular 2 中使用 bootstrap 4？

Question

我正在构建一个用 typescript 编写的 angular 2 应用程序。它将结合使用 bootstrap 4 框架和一些自定义主题，这可能吗？

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

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

Answer 1

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

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

npm i bootstrap@next --save

这会将 bootstrap 4 添加到您的项目中。

接下来转到您的 src/style.scss 或 src/style.css 文件并在那里导入 Bootstrap :

对于 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，请确保将 .angular-cli.json 中的默认样式更改为 scss:

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

Bootstrap JS 组件

要使 Bootstrap JS 组件正常工作，您仍然需要将 bootstrap.js 导入 scripts 下的 .angular-cli.json (这应该自动发生):

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

2017/09/13 更新: Boostrap 4 Beta 现在使用 popper.js 而不是 tether.js。因此，根据您使用的版本，在您的脚本中导入 tether.js(alpha)或 popper.js(beta)。感谢您的提醒@MinorThreat