290

我们想在使用 angular-cli 1.0.0-beta.5 (w/ node v6.1.0) 生成的应用程序中使用 bootstrap 4 (4.0.0-alpha.2)。

在使用 npm 获取引导程序及其依赖项后，我们的第一种方法是将它们添加到angular-cli-build.js：

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这很好用，ng serve但是一旦我们生成带有-prod标志的构建，所有这些依赖关系就消失了dist/vendor（惊喜！）。

我们打算如何在使用 angular-cli 生成的项目中处理这种情况（即加载引导脚本）？

我们有以下想法，但我们真的不知道该走哪条路……

  • 使用 CDN 吗？但我们宁愿提供这些文件以保证它们可用

  • 将依赖项复制到dist/vendor我们的ng build -prod? 但这似乎是 angular-cli 应该提供的东西，因为它“照顾”了构建部分？

  • 添加 jquery、bootstrap 和 tethersrc/system-config.ts并以某种方式将它们拉入我们的包中main.ts？但考虑到我们不会在应用程序的代码中显式使用它们，这似乎是错误的（例如，与 moment.js 或类似 lodash 的东西不同）。

4

40 回答 40

332

重要更新： ng2-bootstrap现在被ngx-bootstrap取代

ngx-bootstrap支持 Angular 3 和 4。

更新： 1.0.0-beta.11-webpack 或以上版本

首先在终端中使用以下命令检查您的angular-cli版本：

ng -v

如果您的angular-cli版本大于1.0.0-beta.11-webpack，那么您应该按照以下步骤操作：

  1. 安装ngx-bootstrap和bootstrap： 

    npm install ngx-bootstrap bootstrap --save

该行现在安装 Bootstrap 3，但将来可以安装 Bootstrap 4。请记住ngx-bootstrap支持这两个版本。

  1. 打开src/app/app.module.ts并添加：

    import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
... 
})

  2. 打开angular-cli.json（对于 angular6 和更高版本的文件名更改为angular.json）并在数组中插入一个新条目styles：

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

  3. 打开src/app/app.component.html并添加：

    <alert type="success">hello</alert>

1.0.0-beta.10 或以下版本：

而且，如果您的angular-cli版本是1.0.0-beta.10或更低，那么您可以使用以下步骤。

首先，进入项目目录并输入：

npm install ngx-bootstrap --save

然后，打开你的angular-cli-build.js并添加这一行：

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在，打开你的src/system-config.ts然后写：

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...和：

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};
于 2016-06-07T08:52:39.843 回答
156

在https://github.com/angular/angular-cli上查找关键字 > Global Library Installation可帮助您找到答案。

根据他们的文档，您可以采取以下步骤来添加 Bootstrap 库。

首先从 npm 安装 Bootstrap：

npm install bootstrap@next

然后将所需的脚本文件添加到 angular-cli.json 文件中的 apps[0].scripts 中：

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

最后将 Bootstrap CSS 添加到 apps[0].styles 数组中：

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

如果您正在运行它，请重新启动 ng serve，并且 Bootstrap 4 应该可以在您的应用程序上运行。

这是最好的解决方案。但是，如果您不重新启动 ng serve 它永远不会起作用。强烈建议执行此最后一项操作。

于 2016-09-26T02:09:43.113 回答
73

请执行下列操作：

npm i bootstrap@next --save

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

接下来转到您的src/style.scssorsrc/style.css文件（选择您使用的任何一个）并在那里导入引导程序：

对于 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.json 文件中添加文件（在 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"
],
于 2016-10-07T09:45:21.633 回答
33

首先，您必须使用这些命令安装 tether、jquery 和 bootstrap

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

在您的 angular-cli.json（从版本 6 开始的 angular.json）文件中添加这些行之后

  "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"
  ]
于 2016-10-01T17:18:38.973 回答
26

由于没有人提到关于如何包含 Bootstrap 的官方（angular-cli 团队）故事：https ://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导程序

Bootstrap是一个流行的 CSS 框架，可以在 Angular 项目中使用。本指南将引导您将引导程序添加到 Angular CLI 项目并将其配置为使用引导程序。

使用 CSS

入门

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

ng new my-app
cd my-app

安装引导

创建并准备好新项目后，您接下来需要将引导程序作为依赖项安装到您的项目中。使用该--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。验证是否出现了引导样式按钮。

使用 SASS

入门

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

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.scss。src/

如果您正在使用bootstrap-sass，请将以下内容添加到_variables.scss：

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

添加styles.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.scss并添加以下内容：

$brand-primary: red;

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

于 2017-05-26T08:27:13.613 回答
18

更新 v1.0.0-beta.26

您可以在文档上看到导入引导程序的新方法here

如果还是不行，用 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">

和

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

在my_project/src/system-config.ts中安装 ng2-bootstrap后：

/** 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

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

于 2016-06-19T10:17:54.580 回答
11

  1. 安装引导程序

    npm install bootstrap@next

  2. 将代码添加到 .angular-cli.json：

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

  3. 最后将 bootstrap.css 添加到您的代码 style.scss

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

  4. 重新启动本地服务器

于 2017-04-25T06:27:29.987 回答
9

Angular 5 中 Bootstrap 4 的步骤

  1. 创建 Angular 5 项目

    ng new AngularBootstrapTest

  2. 移动到项目目录

    cd AngularBootstrapTest

  3. 下载引导程序

    npm 安装引导程序

  4. 将引导程序添加到项目

    4.1 打开.angular-cli.json

    4.2 在json中找到“styles”部分

    4.3 添加引导 css 路径如下

    .

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

现在您已成功在 Angular 5 项目中添加引导 css

测试引导

  1. 打开src/app/app.component.html
  2. 添加引导按钮组件

.

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

您可以在此处参考按钮样式（https://getbootstrap.com/docs/4.0/components/buttons/）

  1. 保存文件

  2. 运行项目

    ng服务--打开

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

注意：如果您在ng serve之后添加了引导路径，则必须停止并重新运行 ng serve 以反映更改。

于 2018-03-03T15:18:34.377 回答
8

2个简单的步骤

  1. 安装 Bootstrap（正在安装最新版本）
npm install bootstrap@next
  1. 导入到您的项目中，在您的 styles.scss 中添加以下行
@import '~bootstrap';

请注意您的导入顺序可能很重要，如果您有其他使用引导程序的库，请将此导入语句放在最前面

结束。:)

注意：以下是我的版本

角度：9

节点：v10.16.0

npm：6.9.1

于 2020-07-27T12:06:27.813 回答
7

我猜上面的方法在发布后已经改变了，查看这个链接

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

启动项目

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

安装 ng-bootstrap 和 bootstrap

npm install ng2-bootstrap bootstrap --save

打开 src/app/app.module.ts 并添加

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

打开 angular-cli.json 并在样式数组中插入一个新条目

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

打开 src/app/app.component.html 并通过添加测试所有工作

<alert type="success">hello</alert>
于 2016-10-08T09:21:01.753 回答
6

由于这变得如此混乱，并且这里的答案完全混合，我只建议与官方 ui-team 一起使用 BS4回购（是的，NG-Bootstrap 的回购有很多。

只需按照此处的说明https://github.com/ng-bootstrap/ng-bootstrap即可获得 BS4。

从库中引用：

这个库是由 ui-bootstrap 团队从头开始构建的。我们正在使用 TypeScript 并针对 Bootstrap 4 CSS 框架。

与 Bootstrap 4 一样，这个库正在进行中。请查看我们的问题列表以查看我们正在实施的所有内容。随意在那里发表评论。

只需复制粘贴那里的内容即可：

npm install --save @ng-bootstrap/ng-bootstrap

安装后，您需要导入我们的主模块：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

剩下的唯一部分是在您的应用程序模块中列出导入的模块。对于根（顶级）模块，确切的方法会略有不同，您最终应该得到类似于（注意 NgbModule.forRoot()）的代码：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

应用程序中的其他模块可以简单地导入 NgbModule：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

这似乎是迄今为止最一致的行为

于 2017-06-10T11:33:05.917 回答
6

运行此命令

npm install bootstrap@3

你的 Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
于 2020-04-01T11:49:26.037 回答
5

  1. 使用 npm 安装 Bootstrap

    npm install bootstrap

2.安装Popper.js

npm install --save popper.js

3.转到Angular 6 项目中的 angular.json / Angular 5 中的 .angular-cli.json并添加列出的：

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
于 2018-05-06T16:51:30.600 回答
5

执行以下步骤：

  1. npm install --save bootstrap

  2. 在您的 .angular-cli.json 中，添加到样式部分：

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

之后，您必须重新启动您的 ng 服务

享受

于 2017-09-11T00:17:09.273 回答
3

现在有了新的 ng-bootstrap 1.0.0-beta.5版本，它支持大多数基于 Bootstrap 标记和 CSS 的原生 Angular 指令。

使用它所需的唯一依赖项是bootstrap. 无需使用jquery和popper.js依赖项。

ng-bootstrap 是为了完全替换组件的 JavaScript 实现。所以你不需要包含bootstrap.min.js在你的 .angular-cli.json 中的脚本部分。

当您将引导程序与生成的项目与 angular-cli 最新版本集成时，请按照以下步骤操作。

  • 包含bootstrap.min.css在您的 .angular-cli.json 样式部分中。

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

  • 安装ng-bootstrap依赖项。

    npm install --save @ng-bootstrap/ng-bootstrap

  • 将此添加到您的主模块类中。

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

  • 在您的主要模块导入部分中包含以下内容。

    @NgModule({
   imports: [NgbModule.forRoot(), ...],
})

  • 如果您要在这些模块类中使用 ng-bootstrap 组件，请在您的子模块中执行以下操作。

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
   imports: [NgbModule, ...],
})

  • 现在您的项目已准备好使用可用的 ng-bootstrap 组件。

于 2017-10-13T04:16:01.480 回答
3

对于引导程序 4.5，角度 10

npm install bootstrap --save

使用 bootstrap import 语句更新您的 styles.scss。

 $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;
}

导入引导程序应该在您的变量覆盖之后。[此示例还显示了如何放置自己的主题颜色。]

于 2020-08-24T12:34:58.307 回答
3

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

npm install --save bootstrap

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

"styles": [ "styles.css" ],

将其更改为

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

全部完成。

于 2017-05-06T18:54:31.223 回答
3
  1. 安装引导程序，popper.js

npm install --save bootstrap npm install --save popper.js

  1. 在src/styles.css 中，导入 bootstrap 的样式

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

于 2018-07-26T02:18:31.047 回答
3

我看到很多解决方案不再适用于新版本的 Angular-CLI。

您可以尝试在 app.component.html 的顶部添加以下链接标签，在底部添加脚本标签。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

但是如果你想使用 ngx-bootstrap 然后在你的项目目录中运行以下命令

ng add ngx-bootstrap

将其作为 app.component.html 的内容进行测试

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
于 2020-06-27T16:06:58.643 回答
2

您还可以观看 Mike Brocchi 的视频，其中包含有关如何将引导程序添加到 Angular-Cli 生成的项目的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU（大约 13:00 分钟）

于 2016-09-26T23:35:46.377 回答
2

2020 年 8 月更新：Angular 10

“如果你有一个 Angular ≥ 9 CLI 项目，你可以简单地使用我们的原理图向它添加 ng-bootstrap 库。” 只需在项目文件夹中运行以下命令。所有配置将自动添加。

ng add @ng-bootstrap/ng-bootstrap

ng s

示例片段：

import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}


<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

于 2020-08-22T00:38:58.573 回答
2
  1. 在 bash 中运行npm install ng2-bootstrap bootstrap --save
  2. 添加/更改以下内容angular-cli.json
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
于 2016-10-18T00:58:05.157 回答
2

Step1：
npm install bootstrap@latest --save-dev 这里会安装最新版本的bootstrap，但是可以通过添加版本号来安装指定的版本

Step2：打开styles.css并添加以下内容 @import "~bootstrap/dist/css/bootstrap.css"

于 2019-01-03T16:23:09.617 回答
2

在项目中运行以下命令

npm install --save @bootsrap@4

如果你得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

这意味着boostrap 4已成功安装。但是，为了使用它，您需要更新 angular.json 文件下的“styles”数组。

按以下方式更新它，以便引导程序能够覆盖现有样式

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

为确保一切设置正确，运行ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below，然后你就可以使用 boostrap 了。 在此处输入图像描述

于 2018-08-17T12:05:30.200 回答
2

如果您刚刚开始使用 angular 和 bootstrap，那么简单的答案将是以下步骤： 1. 添加 bootstrap 的节点包作为开发依赖项

npm install --save bootstrap

  1. 在 angular.json 文件中导入引导样式表。

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. 你已经准备好使用引导程序进行样式、网格等。

    <div class="container">My first bootstrap div</div>

我发现最好的部分是我们使用引导程序进行指导，而没有任何第三方模块依赖。我们可以随时通过更新命令npm install --save bootstrap@4.4等来升级引导程序。

于 2019-12-23T08:48:30.537 回答
2

尝试这个

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

于 2017-01-10T19:38:23.317 回答
2

用于同时添加 Bootstrap 和 Jquery 

npm install bootstrap@3 jquery --save

运行此命令后，请继续检查您的 node_modules 文件夹，您应该能够看到 bootstrap 和 jquery 添加到其中。

于 2019-06-12T05:53:50.830 回答
2

安装助推器

npm install --save bootstrap

然后我们需要将 Bootstrap Sass 导入到我们的应用程序中。在styles.scss 添加这一行：

@import "../node_modules/bootstrap/scss/bootstrap.scss";

欲了解更多信息...

于 2021-09-15T05:20:58.650 回答
1

使用 angular-cli 和 css 的工作示例：

1.安装引导

npm install bootstrap tether jquery --save

2.添加到.angular-cli.json

  "styles": [
    "../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"
  ],
于 2017-08-25T12:38:56.917 回答
1

angular-cli现在有一个专门的wiki 页面，您可以在其中找到所需的一切。TLDR，bootstrap通过安装npm并将样式链接添加到.angular-cli.json文件中的“样式”部分

于 2017-07-13T09:02:27.720 回答
1

您可以通过多种方式在 Angular 项目中添加 Bootstrap 4：

  • 在您的 Angular 项目的 index.html 文件部分中包含 Bootstrap CSS 和 JavaScript 文件，并带有 a 和 标签，

  • 使用 @import 关键字在 Angular 项目的全局 styles.css 文件中导入 Bootstrap CSS 文件。

  • 在项目的 angular.json 文件的样式和脚本数组中添加 Bootstrap CSS 和 JavaScript 文件

于 2020-02-05T23:14:43.320 回答
1

npm install bootstrap您可以使用命令以角度安装引导程序。

然后在angular.json文件和style.css文件中设置引导路径。

您可以阅读有关如何在 Angular 中安装和设置引导程序的完整博客，单击此处阅读有关此的完整博客

于 2020-05-20T06:32:44.793 回答
1

这里没看到这个：

@import 'bootstrap/scss/bootstrap.scss';

我刚刚在 style.scss 中添加了这一行在我的情况下，我还想覆盖引导变量。

于 2019-06-11T12:57:48.103 回答
1

使用 npm 安装 boostrap

npm install boostrap@next --save

然后检查你的 node_modules 文件夹中的 boostrap.css 文件（在 dist 内）通常路径是

"../node_modules/bootstrap/dist/css/bootstrap.css",

添加此路径 | 在 style.css 或 style.scss 中导入 boostrap

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

而已。

于 2017-10-28T17:29:47.530 回答
0

使用 angular-cli 的工作示例：

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

适用于 css 和 scss。Bootstrap v3 和 v4 可用。

有关引导程序原理图的更多信息，请在此处找到。

于 2018-04-16T16:53:18.123 回答
0

只需在 index.html 的 Head 标签中添加这三行

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
于 2018-11-03T07:27:17.733 回答
0

使用 .Now 安装引导程序npm i --save bootstrap@version，转到 nodemodules 文件夹并从引导文件夹复制“bootstrap.min.css.js”的路径并将完整路径（如nodemodules/bootstrap/css/bootstrap.min.css.js）粘贴到angular.json脚本标记文件下并重新运行服务器并检查是否安装成功在你喜欢的任何浏览器中运行程序并按F12你会发现窗口的一部分被打开，现在转到元素选项卡打开头标签，如果你在样式标签中看到引导程序，那么你的安装是成功的。

于 2018-07-30T12:11:07.377 回答
0

无论您使用的是哪个 JS 框架，都可以通过以下 2 个步骤轻松将引导程序导入您的项目：

npm i -S bootstrap使用或安装引导程序yarn add bootstrap。

在styles.cssorstyles.scss中，将 bootstrap 导入为@import '~bootstrap/dist/css/bootstrap.min.css'.

于 2018-10-19T18:07:38.110 回答
0

将此添加到您的 styles.css 文件中

@import "~bootstrap/dist/css/bootstrap.css";
于 2020-08-08T04:39:52.637 回答
0

好消息！基本上，Bootstrap 5 现在可以轻松实现，甚至不需要 jQuery。
从您的终端，只需运行

npm install bootstrap@next --save

因此，Angular 使用 webpack，因此，在您的 app.module.ts 中，只需添加：

import "bootstrap";

或者，如果您想单独导入它们，请执行以下操作：

import { ModuleToBeImported } from 'bootstrap';

然后到你的styles.scss，添加：

@import '~bootstrap/scss/bootstrap';

基本上就是这样，但要注意某些组件需要 popper.js。 需要 bootstrap js 的组件 在那里你会看到依赖于 popper.js 的组件，在撰写本文时，这些组件是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出框。

因此，要安装 popper.js，只需运行：

npm install @popperjs/core

参考

于 2020-12-31T10:57:07.477 回答