如何在角度 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)>

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

解决方案

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

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

npm i bootstrap@next --save

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

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

对于 style.css

/* 你可以在这个文件中添加全局样式，也可以导入其他样式文件 */@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于 style.scss

/* 你可以在这个文件中添加全局样式，也可以导入其他样式文件 */@import "../node_modules/bootstrap/scss/bootstrap";

如果您使用的是 scss，请确保在 .angular-cli.json 中将默认样式更改为 scss:

默认值":{"styleExt": "scss",成分": {}}

Bootstrap JS 组件

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

<代码>..."脚本": ["../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屋！