Typescript 如何在Angular 2 中使用 bootstrap 程序 4

发布于10月07日

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

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

在我的angular 2项目中，我正在使用sass，当它也在使用sass进行造型时，是否可以从源代码构建bootstrap 4？

推荐答案

Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI)

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

npm i bootstrap@next --save

这将为您的项目添加 bootstrap 4.

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

For 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";

For 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 Components

要让Bootstrap JS组件正常工作，您仍然需要将bootstrap.js导入scripts (this should happen automatically)下的.angular-cli.json:

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

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts.谢谢大家的提醒@MinorThreat