Angular 4:如何包含Bootstrap？

Question

我是一个后端开发人员,我只是在玩Angular4.所以我做了这个安装教程:https://www.youtube.com/watch？v = cdlbFEsAGXo.

鉴于此,我如何添加bootstrap到应用程序,所以我可以使用类"container-fluid"或"col-md-6"等类似的东西？

Answer 1

npm install --save bootstrap

之后,在angular-cli.json(在项目的根文件夹内)中,找到styles并添加这样的bootstrap css文件:

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

更新:
在角6+ angular-cli.json 改变到angular.json.

Answer 2

观看视频或按照步骤操作

以角度2 /角度4 /角度5 /角度6安装自举4

在项目中包含bootstrap有三种方法:
1)在index.html文件中添加CDN链接
2)使用npm安装bootstrap并在angular.json中 设置路径推荐
3)使用npm安装bootstrap并在index.html文件中设置路径

我建议您使用npm安装bootstrap的2个方法,因为它安装在项目目录中,您可以轻松访问它

方法1

向您的angular project index.html文件添加Bootstrap,Jquery和popper.js CDN路径

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 0.9/UMD/popper.min.js

方法2

1)使用npm安装bootstrap

npm install bootstrap --save

在安装Bootstrap 4之后,我们需要两个更多javascript包,即Jquery和Popper.js没有这两个包引导程序是不完整的,因为Bootstrap 4使用的是Jquery和popper.js包,所以我们必须安装

2)安装JQUERY

npm install jquery --save

3)安装Popper.js

npm install popper.js --save

现在,Bootstrap在node_modules文件夹内的Project Directory上安装

打开angular.json这个文件可以在你的angular目录下打开那个文件,并在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安装bootstrap按照方法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工作正常

Answer 3

为了配置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应用程序中.

现在我们已经有了依赖项,我们可以告诉Angular CLI它需要使用以下任何选项或两者来加载这些样式:

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

我们可以添加依赖项,如下所示:

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

选项2)添加到angular-cli.json中

我们可以将样式css文件添加到angular-cli.json文件中,该文件位于我们的角度应用程序的根文件夹中,如下所示:

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

Answer 4

Angular 4 - Bootstrap/@ ng-bootstrap设置

首先使用以下命令将bootstrap安装到项目中:

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

在此之后,您可以使用All the Bootstrap小部件(例如carousel,modal,popovers,工具提示,制表符等)和其他几个好东西(datepicker,rating,timepicker,typeahead).

Answer 5

在Angular4为你处理@types系统,你应该做下面的事情,

做,

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

tsconfig.json

查找类型数组并添加jquery和bootstrap条目,

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

的index.html

在head section中添加以下条目,

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

Answer 6

有关以下详细步骤和工作示例，您可以访问 https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

非常详细的步骤和适当的解释。

步骤： 从 NPM 安装 Bootstrap

接下来，我们需要安装 Bootstrap。将目录更改为我们创建的项目（cd angular-bootstrap-example）并执行以下命令：

对于引导程序 3：

npm install bootstrap --save

对于 Bootstrap 4（目前处于测试阶段）：

npm install bootstrap@next --save

或 替代方案：本地 Bootstrap CSS 作为替代方案，您还可以下载 Bootstrap CSS 并将其本地添加到您的项目中。我从网站上下载了 Bootstrap 并创建了一个文件夹样式（与 style.css 相同）：

注意： 不要将本地 CSS 文件放在 assets 文件夹下。当我们使用 Angular CLI 进行生产构建时，.angular-cli.json 中声明的 CSS 文件将被缩小，所有样式将被捆绑到一个 style.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 的 Bootstrap JavaScript 组件（选项 1） 如果您不需要使用 Bootstrap JavaScript 组件（需要 JQuery），这就是您需要的全部设置。但是如果你需要使用 modals、accordion、datepicker、tooltips 或任何其他组件，我们如何在不安装 jQuery 的情况下使用这些组件？

Bootstrap 有一个名为 ngx-bootstrap 的 Angular 包装库，我们也可以从 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 {}

因为我们为每个模块调用 .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 中导入引导模块。

import { AppBootstrapModule } from './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap 适用于 Bootstrap 3 和 4。我也做了一些测试，大部分功能也适用于 Bootstrap 2.x（是的，我还有一些遗留代码需要维护）。

希望这对某人有所帮助！

Answer 7

请参考此链接 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.

它提供了有关使用angular-cli将最新引导程序包含在角度4中的分步说明.

Answer 8

当这个得到越来越多的答案时,我会标记帮助我的那个:

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

Answer 9

如果您使用的是Sass / Scss，请遵循此步骤，

做npm安装

npm install bootstrap --save

并将import语句添加到您的sass / scss文件中，

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

Answer 10

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