如何将 bootstrap 添加到 angular-cli 项目

Question

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

获得 bootstrap 及其与 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 生成的项目中处理这种情况（即加载 bootstrap 脚本）？

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

使用 CDN？但我们宁愿提供这些文件以保证它们可用
在 ng build -prod 之后将依赖项复制到 dist/vendor？但这似乎是 angular-cli 应该提供的东西，因为它是构建部分的 'takes care' ?
在 src/system-config.ts 中添加 jquery、bootstrap 和系绳，并以某种方式将它们拉入我们在 main.ts 中的捆绑？但考虑到我们不会在我们的应用程序代码中显式使用它们（不像 moment.js 或类似 lodash 的东西，例如），这似乎是错误的。

Answer 1

重要更新： 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，那么你应遵循以下步骤：

安装ngx-bootstrap和bootstrap：

npm install ngx-bootstrap bootstrap --save

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

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

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

打开angular-cli.json（对于angular6及以后的文件名改为angular.json ) 并在 styles 数组中插入一个新条目：
```
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
```
打开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'
  }
};

Answer 2

更新 v1.0.0-beta.26

您可以在文档中查看新的导入方式bootstrap here

如果还是不行，用命令ng serve重启

1.0.0或以下版本：

在你的 index.html 文件中你只需要 bootstrap css link（不需要 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

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

Answer 3

正在查找关键字 > 全局库安装 on https://github.com/angular/angular-cli 帮你找到答案。

根据他们的文档，您可以按照以下步骤添加 Bootstrap 库。

首先，从 npm 安装 Bootstrap：

npm install bootstrap

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

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

上述步骤对于某些功能的运行很重要，例如下拉菜单的显示。

最后将Bootstrap CSS文件添加到angular.json文件中的apps[0].styles数组中：

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

如果你运行重新启动服务，否则更改将不可见。 Bootstrap 4+ 现在应该可以在您的应用程序上运行了。

备选方案： 将 Bootstrap 添加到 Angular 的另一种解决方案是使用 ngx-bootstrap 项目，该项目提供由 Angular 提供支持的 Bootstrap 组件。请看这个 to learn more regarding the use of ngx-boostrap with Angular or the ngx-bootstrap project's own documentation.

Answer 4

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

Answer 5

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

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

将这些行添加到 angular-cli.json（angular.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"
  ]

Answer 6

执行以下操作：

npm i bootstrap@next --save

这会将 bootstrap 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.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"
],

Answer 7

我猜上面的方法在发布后发生了变化，检查这个link

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>

Answer 8

运行在 bash npm install ng2-bootstrap bootstrap --save
Add/Change以下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" ],

Answer 9

试试这个

npm install bootstrap@next

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

Answer 10

安装bootstrap
```
npm install bootstrap@next
```

添加代码.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"
],

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

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

重新启动本地服务器

Answer 11

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

npm install --save bootstrap

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

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

将其更改为

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

全部完成。

Answer 12

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

包括Bootstrap

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

使用CSS

入门

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

ng new my-app
cd my-app

正在安装Bootstrap

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

# version 3.x
npm install bootstrap --save

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

配置项目

现在项目已设置，必须将其配置为包含 bootstrap 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。确认出现 bootstrap 样式的按钮。

使用SASS

入门

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

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

正在安装Bootstrap

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

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

配置项目

在 src/ 中创建一个空文件 _variables.scss。

如果您使用的是 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。确认出现 bootstrap 样式的按钮。为确保使用您的变量，请打开 _variables.scss 并添加以下内容：

$brand-primary: red;

Return浏览器看字体颜色变了

Answer 13

由于这变得如此令人困惑，而且这里的答案完全混杂，我只建议与 官方 ui-BS4 回购团队一起使用（是的，有许多 NG-Bootstrap.

的回购协议

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

引用自库：

This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework.

As with Bootstrap 4, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.

只需复制粘贴其中的内容即可：

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

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

Answer 14

angular-cli 现在有一个专门的 wiki page，您可以在这里找到您需要的一切。 TLDR，通过 npm 安装 bootstrap 并将样式 link 添加到 .angular-cli.json 文件

中的 "styles" 部分

Answer 15

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

1.install bootstrap

npm install bootstrap tether jquery --save

2.add 到 .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"
  ],

Answer 16

执行以下步骤：

npm install --save bootstrap
并在您的 .angular-cli.json 中，添加到样式部分：

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

之后，您必须重新启动 ng serve

享受

Answer 17

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

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

ng-bootstrap 是完全替换组件的 JavaScript 实现。因此，您不需要在 .angular-cli.json.

的脚本部分中包含 bootstrap.min.js

当您将 bootstrap 与使用 angular-cli 最新版本生成的项目集成时，请遵循这些步骤。

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

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

安装ng-bootstrap依赖项。

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

将此添加到您的主模块 class。

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

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

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

如果您要在这些模块 classes.
中使用 ng-bootstrap 组件，也请在您的子模块中执行以下操作
```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
   imports: [NgbModule, ...],
})
```
现在您的项目已准备好使用可用的 ng-bootstrap 组件。

Answer 18

使用 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

就是这样。

Answer 19

Steps for Bootstrap 4 in Angular 5

创建 Angular 5 个项目

ng 新 AngularBootstrap测试
移动到项目目录

cd AngularBootstrap测试
下载bootstrap

npm 安装bootstrap
将 Bootstrap 添加到项目

4.1开.angular-cli.json

4.2 在json
中找到"styles"部分
4.3 添加bootstrap css 路径如下

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

Now you have succesfully added the bootstrap css in angular 5 project

测试bootstrap

打开src/app/app.component.html
添加bootstrap按钮组件

.

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

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

保存文件
运行项目

ng serve --open

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

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

Answer 20

使用 angular-cli 时的工作示例：

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

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

有关 bootstrap 原理图的更多信息，请查找 here。

Answer 21

使用 npm
安装 Bootstrap
```
npm install bootstrap
```

2.Install Popper.js

npm install --save popper.js

3.Goto angular.json 在 Angular 6 个项目 / .angular-cli.json 在 Angular 5 中添加列出的：

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

Answer 22

安装 bootstrap、popper.js

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

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

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

Answer 23

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

Answer 24

运行项目中的以下命令

npm install --save @bootsrap@4

如果您收到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

表示boostrap 4安装成功。但是，为了使用它，您需要更新 angular.json 文件下的 "styles" 数组。

按以下方式更新它，以便 bootstrap 能够覆盖现有样式

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

Answer 25

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

使用 npm i -S bootstrap 或 yarn add bootstrap 安装 bootstrap。

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

Answer 26

只需在 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>

Answer 27

第一步：
npm install bootstrap@latest --save-dev 这将安装最新版本的 bootstrap，但是可以通过添加版本号

来安装指定的版本

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

Answer 28

这里没有看到这个：

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

我刚刚在 style.scss 中添加了这一行就我而言，我还想覆盖 bootstrap 变量。

Answer 29

用于添加 Bootstrap 和 Jquery 两者

npm install bootstrap@3 jquery --save

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

Answer 30

如果您刚开始使用 angular 和 bootstrap，那么简单的答案如下： 1.添加bootstrap的node包作为dev依赖

npm install --save bootstrap

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

"styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
并且您已准备好使用 bootstrap 进行样式、网格等

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

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

Answer 31

你有很多方法可以add Bootstrap 4 in your Angular project:

在 Angular 项目的 index.html 文件部分中包含 Bootstrap CSS 和 JavaScript 文件和标签，
正在使用 @import 关键字将 Bootstrap CSS 文件导入 Angular 项目的全局 styles.css 文件。
在项目的 angular.json 文件的样式和脚本数组中添加 Bootstrap CSS 和 JavaScript 文件

Answer 32

运行这个命令

npm install bootstrap@3

你的Angular.json

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

Answer 33

您可以使用 npm install bootstrap 命令在 angular 中安装 bootstrap。

和 angular.json 文件和 style.css 文件中的下一个设置 bootstrap 路径。

您可以在 angular、 click here to read full blog about this

中阅读有关如何安装和设置 bootstrap 的完整博客

Answer 34

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

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

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

Answer 35

2个简单步骤

安装Bootstrap（正在安装最新版本）

npm install bootstrap@next

导入您的项目，在您的 styles.scss

@import '~bootstrap';

请注意您的导入顺序可能很重要，如果您有其他使用 bootstrap 的库，请将此导入语句放在顶部

结束。 :)

注意：以下是我的版本

angular : 9

节点：v10.16.0

npm：6.9.1

Answer 36

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

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

Answer 37

2020 年 8 月更新：Angular10

"If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it." Just run the following command inside your project folder. All the configurations will be automatically added.

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>

Answer 38

对于bootstrap4.5，angular10

npm install bootstrap --save

像这样使用 bootstrap 导入语句更新您的 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;
}

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

Answer 39

好消息！基本上Bootstrap5现在就可以轻松实现了，甚至不需要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。 Components requiring bootstrap's js 在那里你也会看到依赖于 popper.js 的组件，在撰写本文时，它们是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出窗口。

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

npm install @popperjs/core

Reference

Answer 40

安装引导程序

npm install --save bootstrap

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

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

For more info...

如何将 bootstrap 添加到 angular-cli 项目

How to add bootstrap to an angular-cli project

angular

twitter-bootstrap

angular-cli

ngx-bootstrap

包括Bootstrap

使用CSS

入门

正在安装Bootstrap

配置项目

测试项目

使用SASS

入门

正在安装Bootstrap

配置项目

测试项目