Angular 4：如何包含Bootstrap？

时间：2017-04-22 09:05:50

标签： twitter-bootstrap angular

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

鉴于此，如何在应用程序中添加bootstrap，以便我可以使用“container-fluid”或“col-md-6”等类似的东西？

23 个答案:

答案 0 :(得分：149)

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。

答案 1 :(得分：74)

观看视频或按照步骤

Install bootstrap 4 in angular 2 / angular 4 / angular 5 / angular 6

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

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

方法1

将Bootstrap，Jquery和popper.js CDN路径添加到角度项目index.html文件

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css＆＃34;
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js＆＃34;
的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使用的是Jquery和popper.js软件包所以我们必须安装< / p>

2）安装JQUERY 

npm install jquery --save

3）安装Popper.js 

npm install popper.js --save

现在Bootstrap安装在 node_modules 文件夹

内的项目目录上

打开 angular.json 这个文件可以在你的angular目录打开那个文件，并在 styles [] 里面添加bootstrap，jquery和popper.js文件的路径和 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按照方法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工作正常

答案 2 :(得分：32)

  

为了配置Bootstrap依赖，我们需要安装   使用npm的Bootstrap依赖。

$ npm install bootstrap@4.0.0-alpha.6 --save

注意：--save命令会将依赖项保存在package.json文件中的angular app中。

  

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

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

  

我们可以添加依赖项，如下所示：

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

选项2）添加到angular-cli.json或angular.json

  

我们可以将样式css文件添加到angular-cli.json或angular.json文件中   我们的角应用程序的根文件夹如下所示：

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

答案 3 :(得分：12)

Angular 4 - Bootstrap / @ ng-bootstrap setup

首先使用以下命令将 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';

在此之后，您可以使用所有Bootstrap小部件（例如轮播，模态，弹出框，工具提示，标签等）和其他几个好东西（datepicker，rating，timepicker，typeahead）。

答案 4 :(得分：9)

在处理 @types 系统的 Angular4 中，您应该做以下事情，

DO，

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 。

答案 5 :(得分：5)

随着这个问题得到越来越多的答案，我将标记出帮助我的那个：

How to add bootstrap to an angular-cli project

答案 6 :(得分：5)

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

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

答案 7 :(得分：4)

如果您使用的是Sass / Scss，请按照

进行操作

执行npm install 

npm install bootstrap --save

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

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

答案 8 :(得分：4)

有关以下详细步骤和工作示例，您可以访问 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（目前处于测试阶段）：

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的情况下使用这些组件？

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

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中导入你的bootstrap模块。

从'./app-bootstrap/app-bootstrap.module'导入{AppBootstrapModule}; 

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

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

希望这能有所帮助！

答案 9 :(得分：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"
  ]

现在。你准备好了。

答案 10 :(得分：2)

在Angular 7.0.0中进行了测试

第1步-安装必需的依赖项

  

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

     

npm安装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"
            ]
          },

答案 11 :(得分：1)

在项目中运行以下命令，即 npm install bootstrap@4.0.0-alpha.5 --save

安装上述依赖项后，运行以下npm命令，该命令将安装bootstrap模块 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”;

答案 12 :(得分：1)

第1步： npm install bootstrap --save

步骤2： 将以下代码粘贴到angular.json中 node_modules / bootstrap / dist / css / bootstrap.min.css

第3步： ng服务

enter image description here

答案 13 :(得分：0)

如果您使用的是 Angular 6 + ，请将以下代码行添加到 angular.json ：

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

答案 14 :(得分：0)

将bootstrap当前版本4添加到angular：

1 /首先，您必须安装这些：

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

2 /然后将所需的脚本文件添加到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"
],

3 /最后将Bootstrap CSS添加到angular.json中的样式数组：

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

check this link

答案 15 :(得分：0)

| * | 为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"
    ]
    ...
}]

答案 16 :(得分：0)

首先使用npm在项目中安装引导程序 npm i bootstrap 在您的项目中打开ur style.css文件后，添加此行

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

这就是在您的项目中添加的引导程序

答案 17 :(得分：0)

安装最新的使用$ npm i --save bootstrap @ next

答案 18 :(得分：0)

Angular 6 CLI，只需：

ng add @ ng-bootstrap / schematics

答案 19 :(得分：0)

如果您想在线使用bootstrap并且您的应用程序可以访问互联网，您可以添加

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

进入你的主要style.css文件。这是最简单的方法。

参考：angular.io

请注意。此解决方案从unpkg网站加载引导程序，它需要具有Internet访问权限。

答案 20 :(得分：0)

我可以看到你已经得到了很多答案，但你可以尝试这种方法。

最好不要在angular中使用jquery，我更喜欢https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md方法来安装bootstrap而不使用依赖于jquery的bootstrap js组件。

npm install ngx-bootstrap bootstrap --save

使用角度

保持代码jquery免费

答案 21 :(得分：0)

添加到angular-cli.json 

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

这将是有效的，我检查了它。

答案 22 :(得分：-1)

你使用cdn for bootstrap和jquery或直接在app中安装bootstarp 用：

npm install ngx-bootstrap --save

也使用https://ng-bootstrap.github.io/#/home，但这不是合法的

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

相关问题
最新问题