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

时间:2016-06-06 03:31:46

标签: twitter-bootstrap angular angular-cli

我们想在使用angular-cli 1.0.0-beta.5(w / node v6.1.0)生成的app中使用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应该提供的东西,因为它“照顾”构建部分?

  • 在src / system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的bundle中?但考虑到我们不打算在我们的应用程序代码中明确使用它们(例如,不像moment.js或像lodash这样的东西),这似乎是错误的

39 个答案:

答案 0 :(得分:268)

重要更新: 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
    
  2. 此行现在安装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 并在styles数组中插入新条目:

      "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      
    3. 打开 src / app / app.component.html 并添加:

      <alert type="success">hello</alert>
      
    4. 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'
        }
      };
      

答案 1 :(得分:106)

查找关键字&gt;全局库安装 在https://github.com/angular/angular-cli帮助您找到答案。

根据他们的文档,您可以采取以下步骤添加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 array:

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

如果您正在运行它,请重新启动,并且Bootstrap 4应该在您的应用上运行。

这是最好的解决方案。 但如果你不重新启动服务它就永远不会有效。强烈建议您执行此操作。

答案 2 :(得分:49)

执行以下操作:

npm i bootstrap@next --save

这会将bootstrap 4添加到您的项目中。

接下来转到您的src/style.scsssrc/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"
],

答案 3 :(得分:28)

首先,您必须使用这些命令安装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"
  ]

答案 4 :(得分:20)

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

包括Bootstrap

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

使用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。 验证引导样式按钮是否出现。

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

配置项目

_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。 验证是否显示bootstrap样式按钮。 要确保使用您的变量,请打开_variables.scss并添加以下内容:

$brand-primary: red;

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

答案 5 :(得分:16)

更新v1.0.0-beta.26

您可以在doc上看到导入bootstrap here

的新方法

如果仍然无效,请使用命令ng serve

重新启动

1.0.0或更低版本:

在index.html文件中,您只需要bootstrap 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

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

答案 6 :(得分:9)

我猜上述方法在发布后已经改变,请检查此链接

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>

答案 7 :(得分:7)

  

Angular 5中Bootstrap 4的步骤

  1. 创建Angular 5项目

    ng new AngularBootstrapTest

  2. 转到项目目录

    cd AngularBootstrapTest

  3. 下载bootstrap

    npm install bootstrap

  4. 将Bootstrap添加到项目

    4.1 open .angular-cli.json

    4.2找到&#34;样式&#34; json中的部分

    4.3添加bootstrap css路径如下

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

    现在,您已成功在angular 5项目中添加了bootstrap css

    测试bootstrap

    1. 打开src/app/app.component.html
    2. 添加引导按钮组件
    3. <button type="button" class="btn btn-primary">Primary</button>
      

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

      1. 保存文件

      2. 运行项目

        ng serve --open

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

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

答案 8 :(得分:6)

由于这变得如此令人困惑,而且这里的答案完全混杂,我只是建议去官方ui团队参加BS4 回购(是的,NG-Bootstrap有很多这样的回购。

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

从lib引用:

  

这个库是由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 {
}

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

答案 9 :(得分:5)

执行以下步骤:

  1. npm install --save bootstrap

  2. 在.angular-cli.json中,添加到样式部分:

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

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

    享受

答案 10 :(得分:4)

  1. 安装bootstrap

     npm install bootstrap@next
    
  2. 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"
          ],
    
    1. 最后将bootstrap.css添加到您的代码style.scss

      @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
      
    2. 重新启动本地服务器

答案 11 :(得分:3)

答案 12 :(得分:2)

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

npm install --save bootstrap

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

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

将其更改为

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

全部完成。

答案 13 :(得分:2)

运行此命令

npm install bootstrap@3

您的Angular.json

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

答案 14 :(得分:2)

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

使用此功能所需的唯一依赖是Element enclosing = element; while (enclosing.getKind() != ElementKind.PACKAGE) { enclosing = enclosing.getEnclosingElement(); } PackageElement packageElement = (PackageElement) enclosing; 。无需使用 jquery popper.js 依赖项。

ng-bootstrap将完全取代组件的JavaScript实现。因此,您不需要在.angular-cli.json的脚本部分中包含bootstrap

当您使用angular-cli最新版本将引导程序与生成的项目集成时,请执行以下步骤。

  • 在.angular-cli.json,样式部分中包含bootstrap.min.js

    bootstrap.min.css
  • 安装 ng-bootstrap 依赖项。

    "styles": [
       "styles.scss",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    
  • 将其添加到主模块类中。

    npm install --save @ng-bootstrap/ng-bootstrap
    
  • 在主模块导入部分中包含以下内容。

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
  • 如果要在这些模块类中使用ng-bootstrap组件,请在子模块中执行以下操作。

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

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

答案 16 :(得分:2)

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

答案 17 :(得分:2)

  1. 安装引导程序popper.js

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

  1. src / styles.css 中,导入引导程序的样式

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

答案 18 :(得分:1)

您有多种方法来add Bootstrap 4 in your Angular project

  • 在Angular项目的index.html文件的部分中包含带有和标记的Bootstrap CSS和JavaScript文件,

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

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

答案 19 :(得分:1)

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

以及angular.json文件和style.css文件中的下一个设置引导程序路径。

您可以阅读有关如何在angular click here to read full blog about this

中安装和设置引导程序的完整博客。

答案 20 :(得分:1)

我看到许多解决方案都无法在新版本的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>

答案 21 :(得分:1)

第一步:
    npm install bootstrap@latest --save-dev 这将安装最新版本的引导程序, 但是,可以通过添加版本号来安装指定的版本

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

答案 22 :(得分:1)

2个简单步骤


  1. 安装Bootstrap(正在安装最新版本)

npm install bootstrap@next
  1. 导入您的项目,在styles.scss中添加以下行

@import '~bootstrap';

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

结局。 :)


注意:以下是我的版本


角度:9

节点:v10.16.0

npm:6.9.1


答案 23 :(得分:1)

  1. 使用npm

    安装Bootstrap
    npm install bootstrap
    
  2. 2.安装Popper.js

    npm install --save popper.js
    

    3.在Angular 5项目中的 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"
            ]
    

答案 24 :(得分: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

就是这样。

答案 25 :(得分:1)

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

1.install bootstrap

npm install bootstrap tether jquery --save

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

答案 26 :(得分:1)

angular-cli现在有一个专门的wiki page,您可以在其中找到所需的一切。 TLDR,通过bootstrap安装npm,并将样式链接添加到&#34; styles&#34;您.angular-cli.json文件中的部分

答案 27 :(得分:0)

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>

答案 28 :(得分:0)

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

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

答案 29 :(得分:0)

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

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

答案 30 :(得分: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。 Components requiring bootstrap's js 在那里,您也会看到依赖 popper.js 的组件,在撰写本文时,它们是用于显示和定位的下拉菜单,以及用于显示和定位的工具提示和弹出框。

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

npm install @popperjs/core

Reference

答案 31 :(得分:0)

如果您刚开始使用angular和bootstrap,则可以按照以下步骤进行简单回答: 1.将bootstrap的节点程序包添加为dev依赖项

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等来升级引导程序。

答案 32 :(得分:0)

用于同时添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

运行此命令后,请继续检查您的node_modules文件夹,您应该能够看到其中添加了引导程序和jquery。

答案 33 :(得分:0)

在这里没有看到这个:

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

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

答案 34 :(得分: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>

答案 35 :(得分:0)

使用哪个JS框架都没有关系,只需执行以下两个步骤,即可轻松将引导程序导入到项目中:

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

styles.cssstyles.scss中,将引导程序导入为@import '~bootstrap/dist/css/bootstrap.min.css'

答案 36 :(得分:0)

在项目内部运行以下命令

npm install --save @bootsrap@4

,如果您得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

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

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

"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。 enter image description here

答案 37 :(得分:0)

使用rfiList安装引导程序。现在,转到nodemodules文件夹,然后从引导程序文件夹复制'bootstrap.min.css.js'的路径,并将完整路径(如npm i --save bootstrap@version)粘贴到{ {1}}在脚本标记文件下,然后重新运行服务器,并检查安装是否成功,然后在您喜欢的任何浏览器中运行该程序,然后按F12键,您会发现部分窗口被打开,现在转到“元素”选项卡打开头标签,如果看到样式标签中的引导程序,则表明安装成功。

答案 38 :(得分:0)

使用angular-cli的一个工作示例:

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

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

有关bootstrap-schematics的更多信息,请查看here