做以下几点:

npm i bootstrap@next --save

这将为您的项目添加引导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";

对于脚本，你仍然需要在angular-cli中添加文件。在Angular版本6中，这个编辑需要在Angular .json文件中完成:

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

对于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;
}

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

在相应的项目目录中打开终端/命令提示符，并键入以下命令。

npm install --save bootstrap

然后打开。angular-cli。json文件，查找

“风格”:( “styles”css ),

把它改成

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

全部完成。

更新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

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

Angular 5中引导4的步骤

创建Angular 5项目 ng新的AngularBootstrapTest 移动到项目目录 cd AngularBootstrapTest 下载引导 NPM安装引导 添加引导到项目 4.1打开.angular-cli.json 4.2在json中找到“styles”部分 4.3添加bootstrap CSS路径如下所示 ． “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css”, “styles”css ),

现在你已经成功地在angular 5项目中添加了bootstrap css

测试引导

src / app / app.component.html开放 添加引导按钮组件

.

<button type="button" class="btn btn-primary">Primary</button>

你可以参考按钮的样式在这里(https://getbootstrap.com/docs/4.0/components/buttons/)

保存文件 运行项目 发球——开球

现在，您将在页面中看到引导样式按钮

注意: 如果你在ng serve之后添加了引导路径，你必须停止并重新运行ng serve来反映这些变化

如果你刚刚开始使用angular和bootstrap，那么简单的答案将如下步骤: 1. 添加节点包引导作为开发依赖

npm install --save bootstrap

在angular中导入引导样式表。json文件。 “风格”:( “项目/ app / src / styles.scss”, ”。/ node_modules /引导/ dist / css / bootstrap.min.css” ), 你已经准备好使用bootstrap进行样式化、网格化等。 >我的第一个bootstrap div</div>

我发现最好的部分是我们使用引导，没有任何第三方模块依赖。只要更新npm install——save bootstrap@4.4等命令，我们就可以随时升级引导程序。