对于bootstrap 4.5, angular 10

npm install bootstrap --save

更新你的风格。这样的SCSS带有bootstrap import语句。

 $theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);

@import "~bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

导入引导应该在变量覆盖之后。[这个例子还展示了如何放置自己的主题颜色。]

首先，你必须用这些命令安装tether, jquery和bootstrap

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

在你的angular-cli中添加这些行。json(角。Json从版本6起)文件

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

执行该命令

npm install bootstrap@3

你Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

因为还没有人参考官方(angular-cli团队)关于如何包含Bootstrap的故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导

Bootstrap是一个流行的CSS框架，可以在Angular项目中使用。 本指南将带你向Angular CLI项目中添加bootstrap，并将其配置为使用bootstrap。

使用CSS

开始

创建一个新项目并导航到该项目

ng new my-app
cd my-app

安装引导

创建好新项目后，接下来需要将bootstrap作为依赖项安装到项目中。 使用——save选项，依赖将被保存在package.json中

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

配置项目

现在项目已经设置好了，必须将其配置为包含引导CSS。

打开.angular-cli文件。Json从你的项目根。 在属性apps下，数组中的第一项是默认应用程序。 有一个属性styles允许外部全局样式应用到你的应用程序。 指定bootstrap.min.css的路径

当你完成时，它看起来应该如下所示:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

注意:当你对.angular-cli进行更改时。Json，你将需要重新启动ng serve来获取配置更改。

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。

使用萨斯

开始

创建一个新项目并导航到该项目

ng new my-app --style=scss
cd my-app

安装引导

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

配置项目

创建一个空文件_variables。src/中的SCSS。

如果你正在使用bootstrap-sass，在_variables.scss中添加以下内容:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在风格。SCSS添加以下内容:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。 为了确保你的变量被使用，打开_variables。并添加以下内容:

$brand-primary: red;

返回浏览器查看字体颜色的更改。

更新v1.0.0-beta.26

你可以在文档中看到导入引导的新方法

如果仍然不工作，使用ng serve命令重新启动

1.0.0或以下版本:

在index.html文件中，你只需要引导css链接(不需要js脚本)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

And

npm install ng2-bootstrap --save
npm install moment --save

在my_project/src/system-config中安装ng2-bootstrap后。ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

在my_project/angular-cli-build.js中:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

不要忘记这个命令 把你的模块放到供应商中:

ng build

从另一个模块导入相同的原理。

将此添加到styles.css文件中

@import "~bootstrap/dist/css/bootstrap.css";