如何在角度2中使用引导程序4? [英] How to use bootstrap 4 in angular 2?

问题描述

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

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

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

解决方案

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

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

npm i bootstrap@next --save

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

下一步转到您的src/style.scss或src/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，请确保在.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

I'm building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible?

The "ng2-bootstrap" npm package is not working as it doesn't allow me to use the bootstrap css classes, instead it provides custom components. (http://github.com/valor-software/ng2-bootstrap)

In my angular 2 project I'm using sass, would it be possible to build bootstrap 4 from source as it is also using sass for styling?

解决方案

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

If you are using the angular2 cli/angular 4 cli do following:

npm i bootstrap@next --save

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file and import bootstrap there:

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

If you are using scss, make sure you change your default styling to scss in .angular-cli.json:

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

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...     
"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. Thanks for the heads up @MinorThreat

这篇关于如何在角度2中使用引导程序4?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！