我是一个后端开发人员，并且正在玩Angular4。所以我做了这个安装教程：https : //www.youtube.com/watch?v=cdlbFEsAGXo。
鉴于此，我如何向应用程序添加引导程序，以便可以使用类“ container-fluid”或“ col-md-6”之类的东西？
Answers:
npm install --save bootstrap然后，在angular-cli.json（位于项目的根文件夹中）中，找到styles并添加引导css文件，如下所示：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],更新：
角度6+ angular-cli.json 中的更改为angular.json。
../node_modules [...]吗？对我来说应该是公正的/node_modules [...]。
./src相对于应用程序的根目录。如果您的设置不同，则可以强制调整路径。
观看视频或执行以下步骤
将Bootstrap 4安装在角度2 /角度4 /角度5 /角度6中
有三种方法可以在您的项目中包含引导程序
1）在index.html文件中添加CDN链接
2）使用npm安装引导程序并在angular.json中 设置路径推荐
3）使用npm安装引导程序并在index.html文件中设置路径
我建议您遵循以下两种使用npm安装引导程序的方法，因为它已安装在您的项目目录中，您可以轻松访问它
方法1
将Bootstrap，Jquery和popper.js CDN路径添加到您的角度项目index.html文件
Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css “
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap。 min.js “
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js
方法2
1）使用npm安装引导程序
npm install bootstrap --save在安装Bootstrap 4之后，我们需要另外两个javascript软件包，即Jquery和Popper.js，没有这两个软件包bootstrap并不完整，因为Bootstrap 4使用的是Jquery和popper.js软件包，因此我们也必须安装
2）安装JQUERY
npm install jquery --save3）安装Popper.js
npm install popper.js --save现在，Bootstrap已安装在node_modules文件夹中的项目目录上
打开angular.json，此文件在您的角度目录中可用打开该文件，并在styles []和scripts []路径内添加bootstrap，jquery和popper.js文件的路径，请参见以下示例
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],注意：不要更改js文件的顺序，它应该像这样
方法3
使用npm安装引导程序，按照方法3中的方法2，我们只是在index.html文件而不是angular.json文件中设置路径
bootstrap.css
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">Jquery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>引导程序现在可以正常工作
为了以角度配置/集成/使用Bootstrap，首先我们需要使用npm安装Bootstrap软件包。
$ npm install bootstrap@4.0.0-alpha.6 --save // for specific version
or
$ npm install bootstrap --save // for latest version注意：--save命令会将依赖项保存在package.json文件内的角度应用程序中。
现在我们已经在上面的步骤中安装了软件包，现在我们可以告诉Angular CLI它需要通过使用以下任何一个选项或同时使用这两个选项来加载这些样式：
我们可以添加依赖项，如下所示：
@import "~bootstrap/dist/css/bootstrap.min.css";我们可以将样式css文件添加到angular-cli.json或angular.json文件中，该文件位于我们的angular应用程序的根文件夹中，如下所示：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]首先使用以下命令将引导程序安装到您的项目中：
npm install --save bootstrap
然后"../node_modules/bootstrap/dist/css/bootstrap.min.css"
以样式将此行添加到angular-cli.json文件（根文件夹）
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],安装以上依赖项后，请通过以下方式安装ng-bootstrap：
npm install --save @ng-bootstrap/ng-bootstrap
安装完成后，您需要导入主模块。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';此后，您可以使用所有Bootstrap小部件（例如轮播，模态，弹出窗口，工具提示，选项卡等）和其他一些好东西（日期选择器，评级，时间选择器，预输入）。
在Angular4为你处理@types系统，你应该做下面的事情，
做，
1) npm install --save @types/jquery
2) npm install --save @types/bootstraptsconfig.json
查找类型 array并添加jquery和bootstrap条目，
"types": [
"jquery",
"bootstrap",
"node"
]Index.html
在顶部添加以下条目，
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>并开始同时使用jquery和bootstrap。
.angular-cli.json文件中，这告诉Angular将它们与其余内容捆绑在一起并提供给客户端。
如果您使用的是Sass / Scss，请遵循此步骤，
做npm安装
npm install bootstrap --save并将import语句添加到您的sass / scss文件中，
@import '~bootstrap/dist/css/bootstrap.css'有关以下详细步骤和工作示例，您可以访问 https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
非常详细的步骤带有适当的解释。
步骤： 从NPM安装Bootstrap
接下来，我们需要安装Bootstrap。将目录更改为我们创建的项目（cd angular-bootstrap-example），然后执行以下命令：
对于Bootstrap 3：
npm install bootstrap --save对于Bootstrap 4（当前为Beta）：
npm install bootstrap@next --save或 替代方案：本地Bootstrap CSS 作为替代方案，您还可以下载Bootstrap CSS并将其本地添加到您的项目中。我从网站上下载了Bootstrap并创建了一个文件夹样式（与styles.css相同）：
注意： 请勿将本地CSS文件放置在Assets文件夹下。当我们使用Angular CLI进行生产构建时，.angular-cli.json中声明的CSS文件将被最小化，并且所有样式都将捆绑为一个styles.css。在构建过程中，assets文件夹将复制到dist文件夹（CSS代码将被复制）。仅当将本地CSS文件直接导入index.html时，才将它们放在资产下。
导入CSS 1.我们有两个选项可以从NPM安装的Bootstrap中导入CSS：
强文本 1：配置.angular-cli.json：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]2：直接导入src / style.css或src / style.scss：
@import '~bootstrap/dist/css/bootstrap.min.css';我个人更喜欢将所有样式导入src / style.css中，因为已经在.angular-cli.json中声明了它。
3.1替代方法：本地Bootstrap CSS 如果在本地添加了Bootstrap CSS文件，只需将其导入.angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],或 src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';4：使用ngx-bootstrap引导JavaScript组件（选项1） 如果您不需要使用Bootstrap JavaScript组件（需要JQuery），这就是您需要的所有设置。但是，如果您需要使用模式，手风琴，日期选择器，工具提示或任何其他组件，那么如何在不安装jQuery的情况下使用这些组件？
Bootstrap有一个名为ngx-bootstrap的Angular包装库，我们也可以从NPM安装它：
npm install ngx-bootstrap --save注意 ng2-bootstrap和ngx-bootstrap是同一软件包。ng2-bootstrap在#itsJustAngular之后重命名为ngx-bootstrap。
如果要在创建Angular CLI项目时同时安装Bootstrap和ngx-bootstrap：
npm install bootstrap ngx-bootstrap --save4.1：在app.module.ts中添加所需的Bootstrap模块
遍历ngx-bootstrap并在app.module.ts中添加所需的模块。例如，假设我们要使用Dropdown，Tooltip和Modal组件：
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}因为我们为每个模块调用.forRoot（）方法（由于ngx-bootstrap模块提供者），所以功能将在项目的所有组件和模块（全局范围）中可用。
或者，如果您想将ngx-bootstrap组织在另一个模块中（仅出于组织目的，以防您需要导入多个bs模块并且不想使您的app.module混乱），则可以创建一个模块app-bootstrap.module.ts，导入Bootstrap模块（使用forRoot（）），并在exports部分中声明它们（因此它们也可用于其他模块）。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}最后，不要忘了将引导模块导入到app.module.ts中。
从'./app-bootstrap/app-bootstrap.module'导入{AppBootstrapModule};
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}ngx-bootstrap可与Bootstrap 3和Bootstrap 4一起使用。我还进行了一些测试，并且大多数功能也与Bootstrap 2.x一起使用（是的，我还有一些旧代码需要维护）。
希望这对某人有所帮助！
在Angular 7.0.0中测试
步骤1-安装所需的依赖项
npm install bootstrap（如果需要特定版本，请指定版本号。）
npm install popper.js（如果需要特定版本，请指定版本号。）
npm安装jQuery
我尝试过的版本：
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",第2步：按以下顺序在angular.json中指定库。在最新的angular中，配置文件名称为angular.json而不是angular-cli.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},对于bootstrap 4.0.0-alph.6
npm install bootstrap@4.0.0-alpha.6 jquery tether --save然后在完成之后运行：
npm install现在。打开.angular-cli.json文件并导入引导程序，jquery和系绳：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]现在。你准备好了。
如我所见，您已经有了很多答案，但是您可以尝试使用此方法。
最好的做法是不要在angular中使用jquery，我更喜欢https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md方法来安装引导程序而不使用引导程序依赖于jquery的js组件。
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)保持您的代码jQuery自由在角度
在您的项目中运行以下命令，即 npm install bootstrap@4.0.0-alpha.5 --save
安装完上述依赖项后，运行以下npm命令，该命令将安装引导程序模块 npm install --save @ ng-bootstrap / ng-bootstrap
查看此作为参考-https://github.com/ng-bootstrap/ng-bootstrap
将以下导入添加到来自'@ ng-bootstrap / ng-bootstrap'的app.module import {NgbModule}中；并将NgbModule添加到导入中
在您的stye.css @import中“ ../node_modules/bootstrap/dist/css/bootstrap.min.css”;
第1步： npm install bootstrap --save
步骤2：将 以下代码粘贴到angular.json node_modules / bootstrap / dist / css / bootstrap.min.css中
第三步： 上菜
如果您想在线使用引导程序，并且您的应用程序可以访问互联网，则可以添加
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');进入您的主要style.css文件。和最简单的方法
参考：angular.io
注意。此解决方案从unpkg网站加载引导程序，并且需要访问Internet。
要安装最新版本，请使用$ npm i --save bootstrap @ next
| * | 为Angular 2、4、5、6 +安装Bootstrap 4：
| +>使用npm安装Bootstrap
npm install bootstrap --save
npm install popper.js --save| +>将样式和脚本添加到angular.json
"architect": [{
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}]将bootsrap当前版本4添加到angular：
1 /首先，您必须安装以下文件：
npm install jquery --save
npm install popper.js --save
npm install bootstrap --save2 /然后将所需的脚本文件添加到angular.json中的脚本中：
"scripts": [
"node_modules/jquery/dist/jquery.slim.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here3 /最后将Bootstrap CSS添加到angular.json的styles数组中：
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],`您可以使用CDN进行引导和jquery，也可以直接在应用中安装bootstarp，方法如下：
npm install ngx-bootstrap --save也使用https://ng-bootstrap.github.io/#/home，但这不适当
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a