logo标签列表

Angular 4: 如何引入Bootstrap？

twitter-bootstrapangular
128

我是一名后端开发者，现在正在使用Angular4进行实验。所以我看了这个安装教程：https://www.youtube.com/watch?v=cdlbFEsAGXo。

鉴于此，我应该如何将Bootstrap添加到应用程序中，以便可以使用"class=container-fluid"或"class=col-md-6"等类似的内容？

3
请参考：https://dev59.com/AVoU5IYBdhLWcg3wQ1Z3如何将Bootstrap添加到Angular CLI项目中？ - Dmitrij Kuba
请参见：http://coderjony.com/blogs/how-to-add-bootstrap-in-an-angular-application/ - Ankush Jain
21个回答
200
npm install --save bootstrap

然后，在angular-cli.json文件中（在项目的根文件夹内），找到styles，并像这样添加bootstrap CSS文件：

之后，在项目的根文件夹中，找到angular-cli.json文件。查找styles，并将bootstrap CSS文件添加进去，就像下面这样：

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

更新：
在 Angular 6+ 中，angular-cli.json 已变更为 angular.json。

2
这个也能用，但我想https://dev59.com/AVoU5IYBdhLWcg3wQ1Z3是我需要的。谢谢你的回答！ - Joschi
4
如何添加Bootstrap JS和jQuery JS？要添加Bootstrap JS和jQuery JS，您需要在HTML文件中将这些库的链接添加到<head>标签中。例如： 完成后，您就可以在页面上使用Bootstrap和jQuery提供的特性和功能了。 - Ravi Ji
6
为了添加js，你需要打开angular-cli.json文件，将"scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"]放入其中，这样就可以使用js了。 - D4IVT3
2
你能解释一下为什么要用 ../node_modules [...] 吗？对我来说应该只需要 /node_modules [...]。 - vinibrsl
2
@vnbrs 这是相对于 index.html 的路径。如果你使用 Angular CLI 创建应用程序，那么你的 index.html 位于相对于应用程序根目录的 ./src 目录下。如果你的设置不同，你可以相应地调整路径。 - Egor Stambakio
显示剩余3条评论
110

观看视频或按照以下步骤操作：

在 Angular 2 / Angular 4 / Angular 5 / Angular 6 中安装 Bootstrap 4

有三种方法可以将 Bootstrap 包含在您的项目中：
1）在 index.html 文件中添加 CDN 链接。
2）使用 npm 安装 Bootstrap 并在angular.json文件中设置路径。推荐使用此方法。
3）使用 npm 安装 Bootstrap 并在 index.html 文件中设置路径。

我建议您使用 2 种方法，即使用 npm 安装 Bootstrap，因为它会安装在您的项目目录中，您可以轻松访问它。

方法 1

将 Bootstrap、Jquery 和 popper.js CDN 路径添加到 Angular 项目 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 安装 Bootstrap。

npm install bootstrap --save

安装 Bootstrap 4 后，我们需要另外两个 JavaScript 包，即 Jquery 和 Popper.js。如果没有这两个包，Bootstrap 4 就不完整，因为 Bootstrap 4 使用了 Jquery 和 Popper.js 包，所以我们也必须将它们安装。

2) 安装 JQUERY

npm install jquery --save

3) 安装Popper.js

npm install popper.js --save

现在Bootstrap已经安装在您的项目目录中的node_modules文件夹中。

打开angular.json这个文件可以在您的Angular目录中找到，将bootstrap、jquery和popper.js文件的路径添加到styles[]和scripts[]路径中，如下面的示例所示：

"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安装bootstrap，请按照方法2的步骤进行操作，在方法3中，我们只需要在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 工作良好

8
Angular6：文件.angular-cli.json现在被称为angular.json。路径不再是“../node_modules…”，而是“node_modules/…”。干杯 - user970470
我完全忘记在angular.json中添加脚本，所以奇怪为什么jQuery组件没有发挥作用。谢谢你提醒我！ - AdminAffe
1
将Bootstrap添加到angular.json中的脚本会产生什么作用？您是否仍然需要在想要使用它的每个地方都通过“<link rel ...”进行包含？ - Jens Mander
谢谢，真不可思议有多少资源缺乏这方面的信息，尤其是关于popper的那一点。 - Avi E. Koenig
46

要在Angular中配置/集成/使用Bootstrap，首先需要使用npm安装Bootstrap包。

安装包

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

注意：--save命令将把依赖项保存在我们的angular应用程序中的package.json文件中。

现在我们已经通过上述步骤安装了该软件包，我们可以使用以下任何一种选项或两种选项来告诉Angular CLI需要加载这些样式：

选项1）添加到src/styles.css文件中

我们可以按照下面所示添加依赖项：

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

选项2）将样式文件添加到angular-cli.json或angular.json中

我们可以将样式css文件添加到位于我们Angular应用程序根目录下的angular-cli.json或angular.json文件中，如下所示：

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]
1
我本想发布这样的答案，但既然已经有了，我就点个赞吧。干得好，先生。我只想补充一点，在最新版本的Angular 7中，没有angular-cli.json，而是改为angular.json。 - Игор
在选项2中，对我有效的CSS路径是"./node_modules/bootstrap/dist/css/bootstrap.min.css"。 - Murtuza
@ИгорРајачић，在哪个级别我应该将其添加到JSON文件中，请你给一个示例链接？ - Kuldeep Yadav
1
@KuldeepYadav angular-cli.json或angular.json文件位于我们的Angular应用程序的根文件夹中。 - Vishal Biradar
12

Angular 4 - Bootstrap / @ng-bootstrap 设置

首先使用以下命令将 Bootstrap 安装到您的项目中：

npm install --save bootstrap

然后在 angular-cli.json 文件（根目录）中的 styles 中添加此行："../node_modules/bootstrap/dist/css/bootstrap.min.css"

"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小部件（例如：轮播、模态框、弹出框、工具提示、选项卡等）以及一些额外的好东西（日期选择器、评分、时间选择器和类型提示等）。

10

在处理@types系统时，你需要遵循以下步骤在 Angular4 中：

执行：

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

查找types数组并添加jquery和bootstrap条目，

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

首页.html

在 head 部分添加以下条目，

  <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。

在生产环境中构建后，链接在浏览器控制台中抛出错误。 - Vignesh
@Vignesh 需要看到问题。很难说什么。 - micronyks
1
可能是因为您的node_modules文件夹中的文件没有自动提供给客户端。相反，将样式和脚本添加到.angular-cli.json文件中，告诉Angular将它们与其他内容捆绑在一起并提供给客户端。 - Noxxys
7

以下是详细步骤和工作示例，您可以访问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文件夹（与styles.css同级）：

注意： 不要将本地CSS文件放在assets文件夹下。当我们使用Angular CLI进行生产构建时，.angular-cli.json中声明的CSS文件将被压缩，并且所有样式将被捆绑成一个styles.css。在构建过程中，assets文件夹会被复制到dist文件夹中（CSS代码将被重复）。只有在直接在index.html中导入它们的情况下，才将本地CSS文件放在assets下。

导入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"
],

or src/style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: 使用ngx-bootstrap（选项1）与Bootstrap JavaScript组件 如果您不需要使用需要JQuery的Bootstrap JavaScript组件，那么这就是您所需的全部设置。但是，如果您需要使用模态框、手风琴、日期选择器、工具提示或任何其他组件，我们如何在不安装jQuery的情况下使用这些组件呢？

有一个名为ngx-bootstrap的Angular包装库可用于Bootstrap，我们也可以从NPM安装：

npm install ngx-bootstrap --save

注意：ng2-bootstrap和ngx-bootstrap是同一个包。#itsJustAngular之后，ng2-bootstrap被重命名为ngx-bootstrap。

如果您想在创建Angular CLI项目时同时安装Bootstrap和ngx-bootstrap：

npm install bootstrap ngx-bootstrap --save

4.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 {}

因为我们为每个模块（由于ngx-bootstrap模块提供程序）调用.forRoot()方法，所以这些功能将在项目的所有组件和模块中都可用（全局范围）。
作为替代方案，如果您想将ngx-bootstrap组织到不同的模块中（仅出于组织目的，以防需要导入许多bs模块并且不想使应用程序模块混乱），您可以创建一个名为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中导入bootstrap模块。
导入{ AppBootstrapModule } from './app-bootstrap/app-bootstrap.module';
@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap适用于Bootstrap 3和4。我还进行了一些测试，大多数功能也适用于Bootstrap 2.x（是的，我仍然需要维护一些遗留代码）。

希望这能帮助到某些人！

6
如果您正在使用Sass/Scss，请按照以下步骤操作：
1. 运行npm install命令。
npm install bootstrap --save

并且在您的sass/scss文件中添加import语句，

@import '~bootstrap/dist/css/bootstrap.css'
5

在Angular 7.0.0中测试通过

步骤1 - 安装所需依赖项

npm install bootstrap（如果您需要特定版本，请指定版本号）

npm install popper.js（如果您需要特定版本，请指定版本号）

npm install jquery

我尝试过的版本：

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

第二步：在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"
            ]
          },
3

针对 bootstrap 4.0.0-alph.6 版本

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

然后完成这些步骤后，运行:

npm install

现在，打开.angular-cli.json文件，并导入bootstrap、jquery和tether：
"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"
  ]

现在，您已经准备好了。
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接